/* Zenvorika */
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sora-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:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/sora-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:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/sora-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}
:root{--font:'Sora',system-ui,sans-serif;--display:'Sora',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;width:100%;max-width:280px;margin-inline:auto;padding:16px;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}}

/* keep grid/flex children from forcing the page wider than the screen */
.hero-grid>*,.panel-grid>*,.est>*,.dash>*,.play-wrap>*,.foot-grid>*,.steps>*,.feats>*,.levels>*,.stats>*{min-width:0}
@media (max-width:560px){.btn.lg{white-space:normal;text-align:center;line-height:1.2;padding:12px 22px}.hero-cta .btn{width:100%}.top .wrap{gap:10px}.brand span{font-size:18px}}

/* hero sub-line + three key blocks under the hero (themes restyle these) */
.hero-sub{font-weight:700;letter-spacing:.02em;color:var(--head);margin:-4px 0 14px;font-size:15px}
.pillars-sec{padding:34px 0 10px}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;min-width:0}
.pillar .fi{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:var(--accent-soft);color:var(--accent-text,var(--accent));margin-bottom:12px}
.pillar .fi svg{width:24px;height:24px}
.pillar h3{margin:0 0 6px;font-size:20px}
.pillar p{margin:0;color:var(--muted)}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}

/*
 * P2E mini-games, set B — snake, mines, rhythm, words, maze.
 * Load after games.css (shell, HUD, buttons, overlays, canvas stage, keyframes).
 * Theme with the same --g-* variables. Every rule is scoped to a game root
 * class or to the namespaced .g-b-* helpers.
 */

/* ---------- canvas stages ---------- */
.g-snake .g-stage, .g-maze .g-stage { cursor: default; }
.g-snake .g-stage::before, .g-maze .g-stage::before { padding-top: 100%; }
.g-rhythm .g-stage { cursor: pointer; background: var(--g-panel, #1e2130); }
.g-rhythm .g-stage::before { padding-top: 125%; }
.g-maze .g-stage { background: var(--g-panel, #1e2130); }

/* ---------- arrow pad (snake, maze) ---------- */
.g-snake .g-b-pad, .g-maze .g-b-pad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: 52px 52px;
  grid-template-areas: ". u ." "l d r";
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  touch-action: none;
}
.g-snake .g-b-pad-btn, .g-maze .g-b-pad-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--g-radius, 18px) * 0.6);
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  touch-action: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.g-snake .g-b-pad-btn:active, .g-maze .g-b-pad-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); background: var(--g-accent, #7c5cff); color: #fff; }
.g-snake .g-b-pad-btn svg, .g-maze .g-b-pad-btn svg { width: 22px; height: 22px; fill: currentColor; }
.g-snake .g-b-pad-0, .g-maze .g-b-pad-0 { grid-area: u; }
.g-snake .g-b-pad-1, .g-maze .g-b-pad-1 { grid-area: r; }
.g-snake .g-b-pad-2, .g-maze .g-b-pad-2 { grid-area: d; }
.g-snake .g-b-pad-3, .g-maze .g-b-pad-3 { grid-area: l; }
@media (hover: hover) and (pointer: fine) {
  .g-snake .g-b-pad, .g-maze .g-b-pad { grid-template-columns: repeat(3, 52px); grid-template-rows: 42px 42px; }
}

/* ---------- mines ---------- */
.g-mines .g-mn-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.g-mines .g-mn-cell {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  aspect-ratio: 1 / 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 18px;
  font-size: clamp(14px, 4.6vw, 22px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  border-radius: calc(var(--g-radius, 18px) * 0.35);
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  background: linear-gradient(160deg, color-mix(in srgb, var(--g-accent, #7c5cff) 18%, var(--g-tile, #2a2e42)), var(--g-tile, #2a2e42));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-touch-callout: none;
  transition: background-color 0.12s ease, transform 0.08s ease;
}
.g-mines .g-mn-cell:hover { filter: brightness(1.12); }
.g-mines .g-mn-cell:active { transform: scale(0.94); }
.g-mines .g-mn-cell:focus-visible { outline: 3px solid var(--g-accent-2, #22d3ee); outline-offset: 1px; z-index: 1; }
.g-mines .g-mn-cell svg { width: 62%; height: 62%; display: block; }
.g-mines .g-mn-cell.is-flag { color: var(--g-danger, #ff4d6d); }
.g-mines .g-mn-cell.is-open {
  cursor: default;
  filter: none;
  transform: none;
  background: rgba(255, 255, 255, 0.04);
  background: color-mix(in srgb, var(--g-text, #eef0ff) 5%, transparent);
  box-shadow: none;
}
.g-mines .g-mn-cell.is-mine { color: var(--g-text, #eef0ff); }
.g-mines .g-mn-cell.is-hit { color: #fff; background: var(--g-danger, #ff4d6d); animation: g-bump 0.3s ease-out; }
.g-mines .g-mn-cell.is-wrong { box-shadow: inset 0 0 0 2px var(--g-danger, #ff4d6d); opacity: 0.6; }
.g-mines .g-mn-n1 { color: var(--g-accent-2, #22d3ee); }
.g-mines .g-mn-n2 { color: #3ddc97; }
.g-mines .g-mn-n3 { color: var(--g-danger, #ff4d6d); }
.g-mines .g-mn-n4 { color: var(--g-accent, #7c5cff); }
.g-mines .g-mn-n5 { color: #ffb020; }
.g-mines .g-mn-n6, .g-mines .g-mn-n7, .g-mines .g-mn-n8 { color: var(--g-text, #eef0ff); }
.g-mines .g-mn-board.is-dealt .g-mn-cell { animation: g-pop-in 0.22s ease-out both; }
.g-mines .g-mn-board.is-clear { box-shadow: 0 0 0 3px var(--g-accent-2, #22d3ee); transition: box-shadow 0.2s ease; }
.g-mines .g-mn-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.g-mines .g-mn-flag {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--g-tile, #2a2e42);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--g-text, #eef0ff);
  background: var(--g-panel, #1e2130);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.g-mines .g-mn-flag svg { width: 18px; height: 18px; color: var(--g-danger, #ff4d6d); }
.g-mines .g-mn-flag.is-on { color: #fff; border-color: var(--g-danger, #ff4d6d); background: var(--g-danger, #ff4d6d); }
.g-mines .g-mn-flag.is-on svg { color: #fff; }
.g-mines .g-mn-flag:focus-visible { outline: 3px solid var(--g-text, #eef0ff); outline-offset: 2px; }
.g-mines .g-mn-tag { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-muted, #8a8fa8); }

/* ---------- words ---------- */
.g-words .g-wd-panel {
  padding: 22px 12px;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
}
.g-words .g-wd-slots, .g-words .g-wd-tiles { display: flex; align-items: center; justify-content: center; gap: 6px; }
.g-words .g-wd-slots { min-height: 52px; margin-bottom: 22px; cursor: pointer; }
.g-words .g-wd-slot, .g-words .g-wd-tile {
  flex: 0 1 54px;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 22px;
  font-size: clamp(17px, 5.6vw, 28px);
  font-weight: 900;
  border-radius: calc(var(--g-radius, 18px) * 0.45);
}
.g-words .g-wd-slot {
  border: 2px dashed var(--g-muted, #8a8fa8);
  border-color: color-mix(in srgb, var(--g-muted, #8a8fa8) 60%, transparent);
  color: var(--g-text, #eef0ff);
}
.g-words .g-wd-slot.is-filled { border-style: solid; border-color: var(--g-accent, #7c5cff); animation: g-pop-in 0.14s ease-out; }
.g-words .g-wd-slots.is-ok .g-wd-slot { border-color: var(--g-accent-2, #22d3ee); color: #fff; background: var(--g-accent-2, #22d3ee); animation: g-bump 0.3s ease-out; }
.g-words .g-wd-slots.is-bad { animation: g-shake 0.32s ease; }
.g-words .g-wd-slots.is-bad .g-wd-slot { border-color: var(--g-danger, #ff4d6d); color: var(--g-danger, #ff4d6d); }
.g-words .g-wd-tile {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  background: var(--g-accent, #7c5cff);
  background: linear-gradient(150deg, var(--g-accent, #7c5cff), color-mix(in srgb, var(--g-accent, #7c5cff) 65%, var(--g-accent-2, #22d3ee)));
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.08s ease, opacity 0.12s ease, box-shadow 0.08s ease;
}
.g-words .g-wd-tile:hover { filter: brightness(1.08); }
.g-words .g-wd-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.g-words .g-wd-tile:disabled { cursor: default; opacity: 0.18; transform: scale(0.9); filter: none; box-shadow: none; }
.g-words .g-wd-tile:focus-visible { outline: 3px solid var(--g-text, #eef0ff); outline-offset: 2px; }
.g-words .g-wd-tools { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.g-words .g-wd-tool {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.g-words .g-wd-tool:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.g-words .g-wd-tool:focus-visible { outline: 3px solid var(--g-accent, #7c5cff); outline-offset: 2px; }

/* ---------- small screens ---------- */
@media (max-width: 380px) {
  .g-mines .g-mn-board { gap: 3px; padding: 6px; }
  .g-words .g-wd-panel { padding: 18px 8px; }
  .g-words .g-wd-slots, .g-words .g-wd-tiles { gap: 4px; }
  .g-snake .g-b-pad, .g-maze .g-b-pad { grid-template-columns: repeat(3, 58px); grid-template-rows: 46px 46px; margin-top: 10px; }
}

/*
 * 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, set D (ice / hockey) — penalty, airhockey, slide, blocks, glide.
 * 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;
 * set-D helpers use the .g-d- prefix and keyframes use g-d-.
 */

/* ---------- ice surfaces ---------- */
.g-penalty .g-stage, .g-airhockey .g-stage, .g-glide .g-stage, .g-slide .g-d-board, .g-blocks .g-d-well {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent, #7c5cff) 35%, transparent), 0 0 22px color-mix(in srgb, var(--g-accent, #7c5cff) 12%, transparent);
}
.g-penalty .g-stage, .g-airhockey .g-stage {
  cursor: crosshair;
  background: var(--g-panel, #1e2130);
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 22px),
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, #fff 12%, var(--g-panel, #1e2130)), var(--g-panel, #1e2130) 70%);
}
.g-penalty .g-stage::before { padding-top: 115%; }
.g-airhockey .g-stage { max-width: 400px; margin: 0 auto; cursor: grab; border-radius: calc(var(--g-radius, 18px) * 1.1); }
.g-airhockey .g-stage::before { padding-top: 150%; }
.g-glide .g-stage {
  background: var(--g-panel, #1e2130);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-bg, #14161f) 55%, var(--g-panel, #1e2130)), color-mix(in srgb, var(--g-accent, #7c5cff) 14%, var(--g-panel, #1e2130)) 85%);
}

/* ---------- penalty ---------- */
.g-penalty .g-d-dots { display: flex; gap: 4px; justify-content: center; margin: -2px 0 10px; }
.g-penalty .g-d-dots i {
  flex: 1 1 0;
  max-width: 16px;
  height: 6px;
  border-radius: 99px;
  background: var(--g-panel, #1e2130);
  transition: background-color 0.2s;
}
.g-penalty .g-d-dots i.is-goal { background: var(--g-accent-2, #22d3ee); }
.g-penalty .g-d-dots i.is-miss { background: color-mix(in srgb, var(--g-muted, #8a8fa8) 55%, transparent); }
.g-penalty .g-d-low .g-stat-v { color: var(--g-danger, #ff4d6d); animation: g-d-blink 0.8s ease-in-out infinite; }

/* ---------- slide ---------- */
.g-slide .g-d-board {
  position: relative;
  touch-action: none;
  cursor: grab;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
  padding: 0;
  overflow: hidden;
}
.g-slide .g-d-board::before { content: ""; display: block; padding-top: 100%; }
.g-slide .g-d-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- shared touch keys (slide, blocks) ---------- */
.g-slide .g-d-ctrl, .g-blocks .g-d-ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.g-slide .g-d-key, .g-blocks .g-d-key {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  min-width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--g-radius, 18px) * 0.55);
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  touch-action: manipulation;
  transition: transform 0.06s ease, box-shadow 0.06s ease, opacity 0.12s;
}
.g-slide .g-d-key svg, .g-blocks .g-d-key svg { width: 24px; height: 24px; display: block; }
.g-slide .g-d-key:active, .g-blocks .g-d-key:active, .g-blocks .g-d-key.is-down {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: color-mix(in srgb, var(--g-accent, #7c5cff) 30%, var(--g-tile, #2a2e42));
}
.g-slide .g-d-key:focus-visible, .g-blocks .g-d-key:focus-visible { outline: 3px solid var(--g-accent, #7c5cff); outline-offset: 2px; }
.g-slide .g-d-key:disabled { opacity: 0.35; cursor: default; transform: none; }
.g-slide .g-d-wide, .g-blocks .g-d-wide { padding: 0 14px; flex: 0 1 auto; }
.g-slide .g-d-ctrl > .g-d-wide { width: 92px; }
.g-slide .g-d-pad {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(3, 46px);
  gap: 4px;
}
.g-slide .g-d-pad .g-d-key { min-width: 0; width: 46px; height: 46px; }
.g-slide .g-d-up { grid-area: 1 / 2; }
.g-slide .g-d-left { grid-area: 2 / 1; }
.g-slide .g-d-right { grid-area: 2 / 3; }
.g-slide .g-d-down { grid-area: 3 / 2; }
.g-slide .g-d-left svg { transform: rotate(-90deg); }
.g-slide .g-d-right svg { transform: rotate(90deg); }
.g-slide .g-d-down svg { transform: rotate(180deg); }

/* ---------- blocks ---------- */
.g-blocks .g-d-next { flex: 0 0 72px; padding: 6px 8px; }
.g-blocks .g-d-next canvas { display: block; width: 100%; height: 24px; }
.g-blocks .g-d-well {
  position: relative;
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  touch-action: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: calc(var(--g-radius, 18px) * 0.5);
  background: var(--g-panel, #1e2130);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--g-bg, #14161f) 40%, var(--g-panel, #1e2130)), color-mix(in srgb, var(--g-accent, #7c5cff) 12%, var(--g-panel, #1e2130)));
}
.g-blocks .g-d-well::before { content: ""; display: block; padding-top: 180%; }
.g-blocks .g-d-well canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-blocks .g-d-bctrl { gap: 8px; }
.g-blocks .g-d-bctrl .g-d-key { flex: 1 1 0; max-width: 64px; }
.g-blocks .g-d-bctrl .g-d-wide { max-width: 84px; color: #fff; background: var(--g-accent, #7c5cff); background: linear-gradient(135deg, var(--g-accent, #7c5cff), var(--g-accent-2, #22d3ee)); }

/* ---------- small screens ---------- */
@media (max-width: 380px) {
  .g-slide .g-d-pad { grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); }
  .g-slide .g-d-pad .g-d-key { width: 40px; height: 40px; }
  .g-slide .g-d-ctrl > .g-d-wide { width: 74px; font-size: 12px; padding: 0 8px; }
  .g-slide .g-d-ctrl, .g-blocks .g-d-ctrl { gap: 6px; }
  .g-blocks .g-d-key { height: 44px; min-width: 40px; }
  .g-blocks .g-d-next { flex-basis: 58px; padding: 5px 6px; }
  .g-blocks .g-d-well { max-width: 250px; }
}

/* ---------- keyframes (set D only) ---------- */
@keyframes g-d-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .g-penalty .g-d-low .g-stat-v { animation: none; }
}

/*
 * P2E mini-games, set E (cricket & target sports) — batting, bowling, runout, darts, putt.
 * 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;
 * set-E helpers use the .g-e- prefix and keyframes use g-e-.
 */

/* ---------- stages ---------- */
.g-batting .g-stage, .g-bowling .g-stage, .g-runout .g-stage, .g-darts .g-stage, .g-putt .g-stage {
  background: var(--g-panel, #1e2130);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-text, #eef0ff) 12%, transparent), 0 6px 18px rgba(0, 0, 0, 0.12);
}
.g-batting .g-stage::before { padding-top: 130%; }
.g-bowling .g-stage::before, .g-runout .g-stage::before { padding-top: 125%; }
.g-darts .g-stage::before { padding-top: 118%; }
.g-putt .g-stage::before { padding-top: 140%; }
.g-runout .g-stage, .g-putt .g-stage { cursor: crosshair; }
.g-darts .g-stage { cursor: none; }
.g-putt .g-hud .g-stat { padding: 6px 8px; }
.g-putt .g-hud .g-stat-v { font-size: 18px; }

/* ---------- ball strip (batting 30, bowling 12, runout 15) ---------- */
.g-batting .g-e-strip, .g-bowling .g-e-strip, .g-runout .g-e-strip {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin: -2px 0 10px;
}
.g-batting .g-e-strip i, .g-bowling .g-e-strip i, .g-runout .g-e-strip i {
  flex: 1 1 0;
  max-width: 18px;
  height: 6px;
  border-radius: 99px;
  background: var(--g-panel, #1e2130);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-text, #eef0ff) 10%, transparent);
  transition: background-color 0.2s, transform 0.2s;
}
.g-batting .g-e-strip i { max-width: 12px; }
.g-batting .g-e-strip i.is-run { background: color-mix(in srgb, var(--g-accent, #7c5cff) 70%, var(--g-panel, #1e2130)); }
.g-batting .g-e-strip i.is-big, .g-bowling .g-e-strip i.is-big, .g-runout .g-e-strip i.is-big {
  background: var(--g-accent-2, #22d3ee);
  animation: g-e-pop 0.3s ease-out;
}
.g-batting .g-e-strip i.is-dot, .g-bowling .g-e-strip i.is-dot, .g-runout .g-e-strip i.is-dot {
  background: color-mix(in srgb, var(--g-muted, #8a8fa8) 50%, transparent);
}
.g-batting .g-e-strip i.is-out { background: var(--g-text, #eef0ff); animation: g-e-pop 0.3s ease-out; }

/* ---------- batting wickets ---------- */
.g-batting .g-e-wk { display: flex; gap: 6px; align-items: center; height: 23px; }
.g-batting .g-e-wk i {
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: var(--g-text, #eef0ff);
  opacity: 0.85;
  transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
}
.g-batting .g-e-wk i.is-out { background: var(--g-danger, #ff4d6d); opacity: 0.5; transform: rotate(28deg) translateY(2px); }

/* ---------- bowling step label ---------- */
.g-bowling .g-e-step { font-size: 17px; }

/* ---------- runout clock ---------- */
.g-runout .g-e-low .g-stat-v { color: var(--g-danger, #ff4d6d); animation: g-e-blink 0.8s ease-in-out infinite; }

/* ---------- darts steady meter ---------- */
.g-darts .g-e-steady {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--g-muted, #8a8fa8);
}
.g-darts .g-e-steady i {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--g-panel, #1e2130);
}
.g-darts .g-e-steady b {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--g-accent, #7c5cff);
  background: linear-gradient(90deg, var(--g-accent, #7c5cff), var(--g-accent-2, #22d3ee));
}
.g-darts .g-e-steady.is-tired b { background: var(--g-danger, #ff4d6d); animation: g-e-blink 0.5s ease-in-out infinite; }

/* ---------- putt scorecard ---------- */
.g-putt .g-e-card { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: -2px 0 10px; }
.g-putt .g-e-card i {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border-radius: 6px;
  color: var(--g-muted, #8a8fa8);
  background: var(--g-panel, #1e2130);
  font-variant-numeric: tabular-nums;
}
.g-putt .g-e-card i.is-par { color: var(--g-text, #eef0ff); background: color-mix(in srgb, var(--g-accent, #7c5cff) 35%, var(--g-panel, #1e2130)); }
.g-putt .g-e-card i.is-big { color: #fff; background: var(--g-accent-2, #22d3ee); animation: g-e-pop 0.3s ease-out; }
.g-putt .g-e-card i.is-miss { color: var(--g-danger, #ff4d6d); }
.g-putt .g-e-card i.is-now { color: var(--g-text, #eef0ff); box-shadow: inset 0 0 0 2px var(--g-accent, #7c5cff); }

@keyframes g-e-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes g-e-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .g-batting .g-e-strip i, .g-bowling .g-e-strip i, .g-runout .g-e-strip i, .g-putt .g-e-card i, .g-darts .g-e-steady b { animation: none !important; transition: none; }
  .g-runout .g-e-low .g-stat-v { animation: none; }
}

/*
 * P2E mini-games, set F (puzzle club) — ballsort, unblock, pipes, lightsout, fifteen.
 * Load after games.css (shell, HUD, buttons, overlays come from there).
 * Theme with the same --g-* variables. Every game selector is scoped to its
 * game; set-F helpers use the .g-f- prefix and keyframes use g-f-.
 */

/* ---------- shared board + controls ---------- */
.g-f-board {
  position: relative;
  padding: 10px;
  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-text, #eef0ff) 10%, transparent);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.g-f-board.is-idle > * { visibility: hidden; }
.g-f-board.is-clear {
  box-shadow: inset 0 0 0 3px var(--g-accent-2, #22d3ee), 0 0 24px color-mix(in srgb, var(--g-accent-2, #22d3ee) 30%, transparent);
  animation: g-f-glow 0.8s ease-out;
}
.g-f-snap *, .g-f-snap { transition: none !important; }
.g-f-ctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.g-f-key {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  padding: 10px 14px;
  min-height: 40px;
  border-radius: 999px;
  color: var(--g-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  border: 1px solid color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent);
  transition: background-color 0.12s, opacity 0.12s, transform 0.12s;
}
.g-f-key:hover { background: color-mix(in srgb, var(--g-accent, #7c5cff) 12%, var(--g-tile, #2a2e42)); }
.g-f-key:active { transform: translateY(1px); }
.g-f-key:disabled { opacity: 0.4; cursor: default; transform: none; background: var(--g-tile, #2a2e42); }
.g-f-key:focus-visible { outline: 3px solid var(--g-accent-2, #22d3ee); outline-offset: 2px; }
.g-f-key small { font-size: 11px; font-weight: 700; opacity: 0.72; }
.g-f-shake { animation: g-f-shake 0.28s ease; }

/* ---------- ballsort ---------- */
.g-ballsort .g-bs-board {
  display: grid;
  grid-template-columns: repeat(var(--g-bs-cols, 5), minmax(0, 1fr));
  gap: 8px 6px;
  padding: 10px 8px 12px;
  justify-items: center;
}
.g-ballsort .g-bs-col {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0 2px;
  width: 100%;
  max-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
}
.g-ballsort .g-bs-col:focus-visible { outline: 2px solid var(--g-accent-2, #22d3ee); outline-offset: 2px; }
.g-ballsort .g-bs-lift { display: block; aspect-ratio: 1; margin: 0 5px 4px; }
.g-ballsort .g-bs-glass {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  padding: 4px 4px 5px;
  border: 2px solid color-mix(in srgb, var(--g-text, #eef0ff) 32%, transparent);
  border-top-color: transparent;
  border-radius: 6px 6px 999px 999px / 6px 6px 22px 22px;
  background: color-mix(in srgb, var(--g-tile, #2a2e42) 75%, transparent);
  transition: border-color 0.15s, background-color 0.2s;
}
.g-ballsort .g-bs-col.is-sel .g-bs-glass { border-color: var(--g-accent-2, #22d3ee); border-top-color: transparent; }
.g-ballsort .g-bs-col.is-focus .g-bs-glass { box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 60%, transparent); }
.g-ballsort .g-bs-col.is-done .g-bs-glass { background: color-mix(in srgb, var(--g-accent-2, #22d3ee) 20%, var(--g-tile, #2a2e42)); border-color: color-mix(in srgb, var(--g-accent-2, #22d3ee) 70%, transparent); border-top-color: transparent; }
.g-ballsort .g-bs-col.is-drop .g-bs-glass { animation: g-f-settle 0.25s ease-out; }
.g-ballsort .g-bs-ball, .g-ballsort .g-bs-slot { display: block; aspect-ratio: 1; border-radius: 50%; }
.g-ballsort .g-bs-ball {
  position: relative;
  background: var(--g-bs-c, #888);
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--g-bs-c, #888) 55%, #fff), var(--g-bs-c, #888) 58%, color-mix(in srgb, var(--g-bs-c, #888) 78%, #000));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 0.16s cubic-bezier(0.3, 0.7, 0.3, 1.2);
}
.g-ballsort .g-bs-ball svg { position: absolute; inset: 20%; width: 60%; height: 60%; fill: rgba(255, 255, 255, 0.92); }
.g-ballsort .g-bs-ball.is-up { transform: translateY(calc(var(--g-bs-up, 1) * (-100% - 3px))); z-index: 1; }
.g-ballsort .g-bs-num { display: block; margin-top: 4px; text-align: center; font-size: 11px; font-weight: 700; color: var(--g-muted, #8a8fa8); }

/* ---------- unblock ---------- */
.g-unblock .g-ub-board { touch-action: none; padding: 10px 14px 10px 10px; }
.g-unblock .g-ub-tray {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background-color: var(--g-tile, #2a2e42);
  background-image:
    linear-gradient(color-mix(in srgb, var(--g-text, #eef0ff) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--g-text, #eef0ff) 9%, transparent) 1px, transparent 1px);
  background-size: calc(100% / 6) calc(100% / 6);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g-text, #eef0ff) 16%, transparent);
}
.g-unblock .g-ub-exit {
  position: absolute;
  right: 2px;
  width: 12px;
  top: calc(10px + (100% - 20px) * 2 / 6 + 4px);
  height: calc((100% - 20px) / 6 - 8px);
  border-radius: 0 6px 6px 0;
  background: repeating-linear-gradient(180deg, var(--g-accent-2, #22d3ee) 0 4px, transparent 4px 8px);
}
.g-unblock .g-ub-block {
  position: absolute;
  left: calc(var(--x) * 100% / 6);
  top: calc(var(--y) * 100% / 6);
  width: calc(var(--w) * 100% / 6);
  height: calc(var(--h) * 100% / 6);
  padding: 3px;
  cursor: grab;
  touch-action: none;
  transition: left 0.12s ease, top 0.12s ease;
}
.g-unblock .g-ub-block::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: color-mix(in srgb, var(--g-accent, #7c5cff) 78%, var(--g-tile, #2a2e42));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.g-unblock .g-ub-block.is-v::before { background: color-mix(in srgb, var(--g-accent, #7c5cff) 58%, var(--g-text, #eef0ff)); }
.g-unblock .g-ub-block.is-key::before {
  background: var(--g-accent-2, #22d3ee);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-accent-2, #22d3ee) 70%, #fff), var(--g-accent-2, #22d3ee) 55%, color-mix(in srgb, var(--g-accent-2, #22d3ee) 80%, #000));
}
.g-unblock .g-ub-block.is-key::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22%;
  width: 14%;
  aspect-ratio: 1;
  border-top: 3px solid rgba(255, 255, 255, 0.85);
  border-right: 3px solid rgba(255, 255, 255, 0.85);
  transform: translateY(-50%) rotate(45deg);
}
.g-unblock .g-ub-block.is-drag { transition: none; cursor: grabbing; z-index: 2; }
.g-unblock .g-ub-block.is-sel::before, .g-unblock .g-ub-block.is-drag::before { outline: 2px solid var(--g-text, #eef0ff); outline-offset: -2px; }
.g-unblock .g-ub-board.is-clear .g-ub-block.is-key { transition: left 0.45s ease-in; }

/* ---------- pipes ---------- */
.g-pipes .g-pp-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 3px; }
.g-pipes .g-pp-cell {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  background: var(--g-tile, #2a2e42);
  color: inherit;
}
.g-pipes .g-pp-cell.is-fixed { cursor: default; }
.g-pipes .g-pp-cell.is-cur { box-shadow: inset 0 0 0 3px var(--g-accent, #7c5cff); }
.g-pipes .g-pp-cell:focus-visible { outline: 2px solid var(--g-accent-2, #22d3ee); outline-offset: -2px; }
.g-pipes .g-pp-rot { display: block; width: 100%; height: 100%; transition: transform 0.16s ease; }
.g-pipes .g-pp-rot svg { display: block; width: 100%; height: 100%; }
.g-pipes .g-pp-casing { fill: none; stroke: color-mix(in srgb, var(--g-text, #eef0ff) 30%, var(--g-tile, #2a2e42)); stroke-width: 28; }
.g-pipes .g-pp-flow { fill: none; stroke: color-mix(in srgb, var(--g-muted, #8a8fa8) 35%, var(--g-tile, #2a2e42)); stroke-width: 13; transition: stroke 0.2s; }
.g-pipes .g-pp-joint { fill: color-mix(in srgb, var(--g-text, #eef0ff) 30%, var(--g-tile, #2a2e42)); }
.g-pipes .g-pp-lamp { fill: var(--g-tile, #2a2e42); stroke: color-mix(in srgb, var(--g-text, #eef0ff) 30%, var(--g-tile, #2a2e42)); stroke-width: 6; }
.g-pipes .g-pp-glow { fill: color-mix(in srgb, var(--g-muted, #8a8fa8) 45%, var(--g-tile, #2a2e42)); transition: fill 0.2s; }
.g-pipes .g-pp-src { fill: var(--g-accent, #7c5cff); }
.g-pipes .g-pp-srcdot { fill: var(--g-accent-2, #22d3ee); }
.g-pipes .g-pp-cell.is-lit .g-pp-flow { stroke: var(--g-accent-2, #22d3ee); }
.g-pipes .g-pp-cell.is-lit .g-pp-lamp { fill: var(--g-accent-2, #22d3ee); }
.g-pipes .g-pp-cell.is-lit .g-pp-glow { fill: #fff6d6; }
.g-pipes .g-f-board.is-clear .g-pp-cell.is-lit .g-pp-lamp { animation: g-f-blink 0.8s ease-out; }

/* ---------- lightsout ---------- */
.g-lightsout .g-lo-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.g-lightsout .g-lo-cell {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 16%;
  background: var(--g-tile, #2a2e42);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--g-text, #eef0ff) 10%, transparent), 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background-color 0.16s;
}
.g-lightsout .g-lo-lamp {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--g-muted, #8a8fa8) 28%, var(--g-tile, #2a2e42));
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18);
  transition: background-color 0.16s, box-shadow 0.16s;
}
.g-lightsout .g-lo-cell.is-on { background: var(--g-accent, #7c5cff); }
.g-lightsout .g-lo-cell.is-on .g-lo-lamp {
  background: var(--g-accent-2, #22d3ee);
  background: radial-gradient(circle at 40% 36%, #fff7dc, var(--g-accent-2, #22d3ee) 68%);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--g-accent-2, #22d3ee) 60%, transparent);
}
.g-lightsout .g-lo-cell.is-cur { outline: 3px solid var(--g-accent-2, #22d3ee); outline-offset: 2px; }
.g-lightsout .g-lo-cell:focus-visible { outline: 3px solid var(--g-text, #eef0ff); outline-offset: 2px; }
.g-lightsout .g-lo-cell.is-hit { animation: g-f-press 0.18s ease-out; }

/* ---------- fifteen ---------- */
.g-fifteen .g-ft-board { touch-action: none; }
.g-fifteen .g-ft-tray { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.g-fifteen .g-ft-tile {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: calc(var(--x) * 100% / var(--n, 4));
  top: calc(var(--y) * 100% / var(--n, 4));
  width: calc(100% / var(--n, 4));
  height: calc(100% / var(--n, 4));
  margin: 0;
  padding: 3px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  transition: left 0.11s ease, top 0.11s ease;
}
.g-fifteen .g-ft-tile span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: var(--g-tile, #2a2e42);
  color: var(--g-tile-text, var(--g-text, #eef0ff));
  font-size: 24px;
  font-size: calc(38cqw / var(--n, 4));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--g-text, #eef0ff) 12%, transparent), 0 2px 3px rgba(0, 0, 0, 0.16);
  transition: background-color 0.2s, color 0.2s;
}
.g-fifteen .g-ft-tile.is-home span { background: color-mix(in srgb, var(--g-accent, #7c5cff) 16%, var(--g-tile, #2a2e42)); color: var(--g-accent, #7c5cff); }
.g-fifteen .g-f-board.is-clear .g-ft-tile span { background: var(--g-accent, #7c5cff); color: #fff; }

/* ---------- keyframes ---------- */
@keyframes g-f-shake { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
@keyframes g-f-settle { 0% { transform: translateY(0); } 40% { transform: translateY(3px); } 100% { transform: translateY(0); } }
@keyframes g-f-press { 0% { transform: scale(1); } 45% { transform: scale(0.92); } 100% { transform: scale(1); } }
@keyframes g-f-blink { 0%, 100% { opacity: 1; } 40% { opacity: 0.45; } }
@keyframes g-f-glow { from { box-shadow: inset 0 0 0 3px var(--g-accent-2, #22d3ee), 0 0 0 color-mix(in srgb, var(--g-accent-2, #22d3ee) 0%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  .g-ballsort .g-bs-ball, .g-unblock .g-ub-block, .g-pipes .g-pp-rot, .g-fifteen .g-ft-tile { transition: none; }
  .g-f-board.is-clear, .g-f-shake, .g-lightsout .g-lo-cell.is-hit { animation: none; }
}

/*
 * P2E mini-games, set G (motorsport / garage) — traffic, pitstop, rally, invaders, slice.
 * 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;
 * set-G helpers use the .g-g- prefix and keyframes use g-g-.
 */

/* ---------- canvas stages ---------- */
.g-traffic .g-stage, .g-rally .g-stage, .g-invaders .g-stage, .g-slice .g-stage {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent);
}
.g-traffic .g-stage { max-width: 380px; margin: 0 auto; background: var(--g-panel, #1e2130); }
.g-traffic .g-stage::before { padding-top: 150%; }
.g-rally .g-stage { max-width: 440px; margin: 0 auto; background: var(--g-panel, #1e2130); }
.g-rally .g-stage::before { padding-top: 125%; }
.g-invaders .g-stage {
  max-width: 440px;
  margin: 0 auto;
  cursor: ew-resize;
  background: var(--g-bg, #14161f);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-accent-2, #22d3ee) 10%, var(--g-bg, #14161f)), var(--g-bg, #14161f) 70%);
}
.g-invaders .g-stage::before { padding-top: 130%; }
.g-slice .g-stage {
  cursor: crosshair;
  background: var(--g-panel, #1e2130);
  background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--g-accent, #7c5cff) 10%, var(--g-panel, #1e2130)), var(--g-panel, #1e2130) 70%);
}
.g-slice .g-stage::before { padding-top: 125%; }

/* ---------- chequered strip above the HUD ---------- */
.g-traffic .g-hud, .g-rally .g-hud, .g-pitstop .g-hud, .g-invaders .g-hud, .g-slice .g-hud { position: relative; padding-top: 8px; }
.g-traffic .g-hud::before, .g-rally .g-hud::before, .g-pitstop .g-hud::before, .g-invaders .g-hud::before, .g-slice .g-hud::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  opacity: 0.5;
  background: repeating-linear-gradient(90deg, var(--g-text, #eef0ff) 0 4px, transparent 4px 8px);
}
.g-invaders .g-stat { padding: 6px 8px; }

/* ---------- shared touch keys (rally) ---------- */
.g-rally .g-g-ctrl { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.g-rally .g-g-key {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  max-width: 120px;
  height: 56px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--g-radius, 18px) * 0.55);
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  touch-action: none;
  -webkit-touch-callout: none;
  transition: transform 0.06s ease, box-shadow 0.06s ease, background-color 0.1s;
}
.g-rally .g-g-key svg { width: 26px; height: 26px; display: block; }
.g-rally .g-g-flip svg { transform: scaleX(-1); }
.g-rally .g-g-wide { max-width: 104px; color: var(--g-bg, #14161f); background: var(--g-accent-2, #22d3ee); }
.g-rally .g-g-key.is-down, .g-rally .g-g-key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  background: color-mix(in srgb, var(--g-accent, #7c5cff) 40%, var(--g-tile, #2a2e42));
}
.g-rally .g-g-wide.is-down { background: var(--g-danger, #ff4d6d); }
.g-rally .g-g-key:focus-visible { outline: 3px solid var(--g-accent, #7c5cff); outline-offset: 2px; }
.g-rally .g-g-warn .g-stat-v { color: var(--g-accent-2, #22d3ee); }
.g-rally .g-stat-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- slice: dropped markers ---------- */
.g-slice .g-g-miss { display: flex; gap: 6px; align-items: center; height: 23px; }
.g-slice .g-g-miss i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--g-muted, #8a8fa8) 60%, transparent);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.g-slice .g-g-miss i.is-on { border-color: var(--g-danger, #ff4d6d); background: var(--g-danger, #ff4d6d); transform: scale(1.1); }

/* ---------- pitstop ---------- */
.g-pitstop .g-g-card {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: calc(var(--g-radius, 18px) * 0.6);
  background: var(--g-panel, #1e2130);
  border-left: 4px solid var(--g-accent, #7c5cff);
}
.g-pitstop .g-g-card.is-shake { animation: g-shake 0.3s ease; }
.g-pitstop .g-g-strip { display: flex; gap: 6px; justify-content: center; min-height: 52px; align-items: center; }
.g-pitstop .g-g-chip {
  flex: 0 1 46px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  transition: opacity 0.12s, transform 0.12s, background-color 0.12s;
}
.g-pitstop .g-g-chip svg { width: 26px; height: 32px; display: block; }
.g-pitstop .g-g-chip.is-next { color: var(--g-bg, #14161f); background: var(--g-accent, #7c5cff); transform: translateY(-3px); box-shadow: 0 4px 0 color-mix(in srgb, var(--g-accent, #7c5cff) 45%, #000); }
.g-pitstop .g-g-chip.is-done { opacity: 0.25; transform: scale(0.88); }
.g-pitstop .g-g-target { margin-top: 8px; text-align: center; font-size: 13px; color: var(--g-muted, #8a8fa8); }
.g-pitstop .g-g-target b { color: var(--g-text, #eef0ff); font-variant-numeric: tabular-nums; }

.g-pitstop .g-g-box {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--g-accent, #7c5cff) 22%, transparent) 0 10px, transparent 10px 20px) top / 100% 12px no-repeat,
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--g-accent, #7c5cff) 22%, transparent) 0 10px, transparent 10px 20px) bottom / 100% 12px no-repeat,
    var(--g-panel, #1e2130);
  touch-action: manipulation;
}
.g-pitstop .g-g-box::before { content: ""; display: block; padding-top: 112%; }
.g-pitstop .g-g-car {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 34%;
  height: 82%;
  transform: translateX(-50%);
  pointer-events: none;
}
.g-pitstop .g-g-car svg { width: 100%; height: 100%; display: block; }
.g-pitstop .g-g-body { fill: var(--g-accent, #7c5cff); }
.g-pitstop .g-g-glass { fill: rgba(10, 14, 22, 0.8); }
.g-pitstop .g-g-stripe { fill: var(--g-accent-2, #22d3ee); }
.g-pitstop .g-g-wing { fill: var(--g-tile, #2a2e42); }
.g-pitstop .g-g-box.is-arrive .g-g-car { animation: g-g-roll-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.g-pitstop .g-g-box.is-arrive .g-g-pad { opacity: 0.45; }

.g-pitstop .g-g-pad {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 2;
  width: 25%;
  height: 21%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  touch-action: manipulation;
  transition: transform 0.06s ease, opacity 0.2s, background-color 0.1s;
}
.g-pitstop .g-g-pad svg { width: 42%; height: 62%; display: block; }
.g-pitstop .g-g-pad:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.g-pitstop .g-g-pad:focus-visible { outline: 3px solid var(--g-accent, #7c5cff); outline-offset: 2px; }
.g-pitstop .g-g-pad-fl { left: 6%; top: 16%; }
.g-pitstop .g-g-pad-fr { right: 6%; top: 16%; }
.g-pitstop .g-g-pad-rl { left: 6%; bottom: 14%; }
.g-pitstop .g-g-pad-rr { right: 6%; bottom: 14%; }
.g-pitstop .g-g-pad-jack { left: 37.5%; top: 41%; background: color-mix(in srgb, var(--g-accent-2, #22d3ee) 70%, var(--g-tile, #2a2e42)); color: var(--g-bg, #14161f); }
.g-pitstop .g-g-key {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.55;
}
.g-pitstop .g-g-pad.is-ok { animation: g-g-ok 0.25s ease; }
.g-pitstop .g-g-pad.is-bad { animation: g-g-bad 0.35s ease; }
.g-pitstop .g-g-banner {
  position: absolute;
  z-index: 3;
  left: 14%;
  right: 14%;
  top: 41%;
  padding: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 12px;
}
.g-pitstop .g-g-banner:empty { display: none; }
.g-pitstop .g-g-banner small { display: block; font-size: 14px; font-weight: 700; text-transform: none; opacity: 0.8; font-variant-numeric: tabular-nums; }
.g-pitstop .g-g-box.is-arrive .g-g-banner { font-size: 13px; padding: 6px 10px; background: var(--g-danger, #ff4d6d); color: #fff; }
.g-pitstop .g-g-box.is-fast .g-g-banner, .g-pitstop .g-g-box.is-slow .g-g-banner { padding: 12px 14px; animation: g-pop-in 0.22s ease both; }
.g-pitstop .g-g-box.is-fast .g-g-banner { color: var(--g-bg, #14161f); background: var(--g-accent, #7c5cff); }
.g-pitstop .g-g-box.is-slow .g-g-banner { color: var(--g-text, #eef0ff); background: var(--g-tile, #2a2e42); box-shadow: inset 0 0 0 2px var(--g-muted, #8a8fa8); }
.g-pitstop .g-g-box.is-fast .g-g-pad, .g-pitstop .g-g-box.is-slow .g-g-pad { opacity: 0.4; }

/* ---------- small screens ---------- */
@media (max-width: 380px) {
  .g-rally .g-g-key { height: 50px; }
  .g-pitstop .g-g-strip { gap: 4px; }
  .g-pitstop .g-g-chip { height: 46px; border-radius: 8px; }
  .g-pitstop .g-g-chip svg { width: 22px; height: 28px; }
  .g-pitstop .g-g-banner { font-size: 18px; }
  .g-invaders .g-stat { padding: 5px 6px; }
  .g-invaders .g-life { width: 11px; height: 11px; }
}

/* ---------- keyframes (set G only) ---------- */
@keyframes g-g-roll-in { from { transform: translate(-50%, -110%); } to { transform: translate(-50%, 0); } }
@keyframes g-g-ok { 0% { background: var(--g-accent, #7c5cff); transform: scale(0.94); } 100% { transform: none; } }
@keyframes g-g-bad { 0%, 60% { background: var(--g-danger, #ff4d6d); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .g-pitstop .g-g-box.is-arrive .g-g-car { animation: none; }
  .g-pitstop .g-g-chip.is-next { transform: none; }
}

/*
 * P2E mini-games, set H (swing sports) — drive, tenpin, hoops, ropeswing, tennis.
 * 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;
 * set-H helpers use the .g-h- prefix and keyframes use g-h-.
 */

/* ---------- canvas stages ---------- */
.g-drive .g-stage, .g-tenpin .g-stage, .g-hoops .g-stage, .g-ropeswing .g-stage, .g-tennis .g-stage {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent, #38a8f0) 30%, transparent);
  background: var(--g-panel, #1e2130);
  touch-action: none;
}
.g-drive .g-stage { cursor: pointer; }
.g-drive .g-stage::before { padding-top: 84%; }
.g-tenpin .g-stage { max-width: 440px; margin: 0 auto; cursor: ew-resize; }
.g-tenpin .g-stage::before { padding-top: 120%; }
.g-hoops .g-stage { max-width: 500px; margin: 0 auto; cursor: crosshair; }
.g-hoops .g-stage::before { padding-top: 105%; }
.g-ropeswing .g-stage { cursor: pointer; }
.g-ropeswing .g-stage::before { padding-top: 95%; }
.g-tennis .g-stage { max-width: 420px; margin: 0 auto; cursor: ew-resize; }
.g-tennis .g-stage::before { padding-top: 138%; }

/* ---------- sunny strip above the HUD ---------- */
.g-drive .g-hud, .g-tenpin .g-hud, .g-hoops .g-hud, .g-ropeswing .g-hud, .g-tennis .g-hud { position: relative; padding-top: 7px; }
.g-drive .g-hud::before, .g-tenpin .g-hud::before, .g-hoops .g-hud::before, .g-ropeswing .g-hud::before, .g-tennis .g-hud::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--g-accent, #38a8f0), var(--g-accent-2, #9bdc28));
  opacity: 0.85;
}
.g-drive .g-stat, .g-tenpin .g-stat, .g-tennis .g-stat { padding: 6px 8px; }
.g-tennis .g-stat-v { font-size: 18px; }

/* ---------- per-shot / per-frame card (drive, tenpin) ---------- */
.g-drive .g-h-card, .g-tenpin .g-h-card { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: -2px 0 10px; }
.g-tenpin .g-h-card-5 { grid-template-columns: repeat(5, 1fr); }
.g-drive .g-h-card i, .g-tenpin .g-h-card i {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border-radius: 6px;
  color: var(--g-muted, #8a8fa8);
  background: var(--g-panel, #1e2130);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
.g-tenpin .g-h-card i { font-size: 12px; line-height: 22px; }
.g-drive .g-h-card i.is-low, .g-tenpin .g-h-card i.is-low { color: var(--g-text, #eef0ff); }
.g-drive .g-h-card i.is-par, .g-tenpin .g-h-card i.is-par { color: var(--g-text, #eef0ff); background: color-mix(in srgb, var(--g-accent, #38a8f0) 35%, var(--g-panel, #1e2130)); }
.g-drive .g-h-card i.is-big, .g-tenpin .g-h-card i.is-big { color: #fff; background: var(--g-accent-2, #9bdc28); animation: g-h-pop 0.3s ease-out; }
.g-drive .g-h-card i.is-miss { color: var(--g-danger, #ff4d6d); }
.g-drive .g-h-card i.is-now, .g-tenpin .g-h-card i.is-now { color: var(--g-text, #eef0ff); box-shadow: inset 0 0 0 2px var(--g-accent, #38a8f0); }

/* ---------- captions ---------- */
.g-drive .g-cap, .g-tenpin .g-cap, .g-hoops .g-cap, .g-ropeswing .g-cap, .g-tennis .g-cap { min-height: 17px; }

@keyframes g-h-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }

@media (max-width: 360px) {
  .g-drive .g-stat-v, .g-tenpin .g-stat-v, .g-tennis .g-stat-v { font-size: 16px; }
  .g-drive .g-h-card { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-drive .g-h-card i, .g-tenpin .g-h-card i { animation: none !important; transition: none; }
}

/*
 * P2E mini-games, set I (retro arcade duels) — connect4, reversi, dotsboxes,
 * bubbles, crossing. Load after games.css (shell, HUD, buttons, overlays and
 * .g-stage come from there). Theme with the same --g-* variables:
 * you = --g-accent, the machine = --g-accent-2. Every selector is scoped to
 * its game; set-I helpers use the .g-i- prefix and keyframes use g-i-.
 */

/* ---------- shared helpers ---------- */
.g-connect4 .g-hud, .g-reversi .g-hud, .g-dotsboxes .g-hud, .g-crossing .g-hud { gap: 6px; }
.g-connect4 .g-stat, .g-crossing .g-stat { padding: 6px 8px; }
.g-root .g-i-you { box-shadow: inset 0 -3px 0 var(--g-accent, #7c5cff); }
.g-root .g-i-cpu { box-shadow: inset 0 -3px 0 var(--g-accent-2, #22d3ee); }
.g-root .g-i-turn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 10px;
  width: max-content;
  max-width: 100%;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--g-panel, #1e2130);
  color: var(--g-muted, #8a8fa8);
}
.g-root .g-i-turn::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
}
.g-root .g-i-turn.is-you { color: var(--g-accent, #7c5cff); }
.g-root .g-i-turn.is-cpu { color: var(--g-accent-2, #22d3ee); }
.g-root .g-i-turn.is-cpu::before { animation: g-i-blink 0.8s steps(2, jump-none) infinite; }

/* pixel discs used by connect4 and reversi */
.g-root .g-i-p1, .g-root .g-i-p2 {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
}
.g-root .g-i-p1 {
  background: var(--g-accent, #7c5cff);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.3);
}
.g-root .g-i-p2 {
  background: var(--g-accent-2, #22d3ee);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.3);
}
/* a second cue besides colour: a square stud for you, a ring for the machine */
.g-root .g-i-p1::after, .g-root .g-i-p2::after {
  content: "";
  position: absolute;
  inset: 34%;
}
.g-root .g-i-p1::after { background: rgba(10, 6, 30, 0.28); }
.g-root .g-i-p2::after { border: 2px solid rgba(10, 6, 30, 0.35); border-radius: 50%; inset: 28%; }

/* ---------- connect4 ---------- */
.g-c4-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-width: 460px;
  margin: 0 auto;
  padding: 8px;
  border-radius: calc(var(--g-radius, 18px) * 0.6);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 35%, transparent);
  touch-action: manipulation;
}
.g-c4-col {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.g-c4-col:disabled { cursor: default; }
.g-c4-col.is-sel { background: color-mix(in srgb, var(--g-accent, #7c5cff) 18%, transparent); }
.g-c4-col:focus-visible { outline: 2px solid var(--g-text, #eef0ff); }
.g-c4-cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--g-bg, #14161f);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.45);
}
.g-c4-disc { animation: g-i-drop 0.32s cubic-bezier(0.5, 0, 0.8, 1) both; }
.g-c4-cell.is-win .g-c4-disc { animation: g-i-glow 0.7s steps(2, jump-none) infinite; }

/* ---------- reversi ---------- */
.g-rv-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  max-width: 460px;
  margin: 0 auto;
  padding: 6px;
  border-radius: calc(var(--g-radius, 18px) * 0.5);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}
.g-rv-sq {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--g-panel, #1e2130);
  cursor: default;
  font: inherit;
  color: inherit;
}
.g-rv-sq:nth-child(16n+1), .g-rv-sq:nth-child(16n+3), .g-rv-sq:nth-child(16n+5), .g-rv-sq:nth-child(16n+7),
.g-rv-sq:nth-child(16n+10), .g-rv-sq:nth-child(16n+12), .g-rv-sq:nth-child(16n+14), .g-rv-sq:nth-child(16n+16) {
  background: color-mix(in srgb, var(--g-panel, #1e2130) 80%, var(--g-bg, #14161f));
}
.g-rv-sq.is-legal { cursor: pointer; }
.g-rv-sq.is-legal::before {
  content: "";
  position: absolute;
  inset: 38%;
  background: var(--g-accent, #7c5cff);
  opacity: 0.55;
}
.g-rv-sq.is-legal:hover::before { inset: 26%; opacity: 0.85; }
.g-rv-sq.is-cur { box-shadow: inset 0 0 0 2px var(--g-text, #eef0ff); }
.g-rv-sq.is-last::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  background: var(--g-text, #eef0ff);
}
.g-rv-disc { transition: background-color 0.15s; }
.g-rv-disc.is-flip { animation: g-i-flip 0.34s ease-out both; }
.g-rv-sq:focus-visible { outline: 2px solid var(--g-text, #eef0ff); }

/* ---------- dotsboxes ---------- */
.g-db-board {
  max-width: 420px;
  margin: 0 auto;
  padding: 6px;
  border-radius: calc(var(--g-radius, 18px) * 0.6);
  background: var(--g-panel, #1e2130);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
}
.g-db-board svg { display: block; width: 100%; height: auto; }
.g-db-dot { fill: var(--g-text, #eef0ff); }
.g-db-line {
  stroke: var(--g-muted, #8a8fa8);
  stroke-opacity: 0.22;
  stroke-width: 3;
  stroke-dasharray: 4 6;
  stroke-linecap: square;
  transition: stroke 0.12s, stroke-opacity 0.12s;
}
.g-db-line.is-hint { stroke: var(--g-accent, #7c5cff); stroke-opacity: 0.75; stroke-width: 6; stroke-dasharray: none; }
.g-db-line.is-p1 { stroke: var(--g-accent, #7c5cff); stroke-opacity: 1; stroke-width: 7; stroke-dasharray: none; }
.g-db-line.is-p2 { stroke: var(--g-accent-2, #22d3ee); stroke-opacity: 1; stroke-width: 7; stroke-dasharray: none; }
.g-db-line.is-last { animation: g-i-blink 0.5s steps(2, jump-none) 3; }
.g-db-hit { fill: transparent; cursor: pointer; }
.g-db-hit.is-off { pointer-events: none; cursor: default; }
.g-db-box rect { fill: transparent; transition: fill 0.2s; }
.g-db-box.is-p1 rect { fill: color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent); }
.g-db-box.is-p2 rect { fill: color-mix(in srgb, var(--g-accent-2, #22d3ee) 30%, transparent); }
.g-db-mk { fill: none; stroke-width: 5; stroke-linecap: square; }
.g-db-box.is-p1 .g-db-mk { stroke: var(--g-accent, #7c5cff); }
.g-db-box.is-p2 .g-db-mk { stroke: var(--g-accent-2, #22d3ee); }
.g-db-box.is-p1, .g-db-box.is-p2 { animation: g-i-stamp 0.25s ease-out both; transform-box: fill-box; transform-origin: center; }

/* ---------- bubbles ---------- */
.g-bubbles .g-stage {
  max-width: 420px;
  margin: 0 auto;
  cursor: crosshair;
  background: var(--g-panel, #1e2130);
  background: linear-gradient(180deg, var(--g-panel, #1e2130), color-mix(in srgb, var(--g-accent-2, #22d3ee) 8%, var(--g-panel, #1e2130)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 25%, transparent);
}
.g-bubbles .g-stage::before { padding-top: 146%; }

/* ---------- crossing ---------- */
.g-crossing .g-stage {
  max-width: 400px;
  margin: 0 auto;
  background: var(--g-bg, #14161f);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 25%, transparent);
}
.g-crossing .g-stage::before { padding-top: 144%; }
.g-crossing .g-stage canvas { image-rendering: pixelated; }
.g-cr-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 10px auto 0;
  touch-action: manipulation;
}
.g-cr-key {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--g-text, #eef0ff);
  background: var(--g-panel, #1e2130);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent);
}
.g-cr-key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px var(--g-accent, #7c5cff); }
.g-cr-key:focus-visible { outline: 2px solid var(--g-text, #eef0ff); outline-offset: 2px; }
.g-cr-key svg { width: 22px; height: 22px; }
.g-cr-down svg { transform: rotate(180deg); }
.g-cr-left svg { transform: rotate(-90deg); }
.g-cr-right svg { transform: rotate(90deg); }

/* ---------- keyframes ---------- */
@keyframes g-i-drop {
  from { transform: translateY(calc(var(--fall, 1) * -118%)); }
  80% { transform: translateY(4%); }
  to { transform: translateY(0); }
}
@keyframes g-i-glow { 0%, 100% { filter: none; } 50% { filter: brightness(1.45); } }
@keyframes g-i-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes g-i-flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.08); } 100% { transform: scaleX(1); } }
@keyframes g-i-stamp { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .g-c4-disc, .g-rv-disc.is-flip, .g-db-box.is-p1, .g-db-box.is-p2 { animation: none !important; }
  .g-c4-cell.is-win .g-c4-disc, .g-db-line.is-last, .g-root .g-i-turn.is-cpu::before { animation: none !important; }
  .g-c4-cell.is-win .g-c4-disc { filter: brightness(1.35); }
}

/*
 * P2E mini-games, set J (classic retro arcade) — whack, jumper, numbers.
 * Load after games.css (shell, HUD, buttons, overlays and .g-stage come from
 * there). Themed with the same --g-* variables. Every selector is scoped to
 * its game; set-J helpers use the .g-j- prefix and keyframes use g-j-.
 */

/* ---------- shared helpers ---------- */
.g-whack .g-hud, .g-jumper .g-hud, .g-numbers .g-hud { gap: 6px; }
.g-whack .g-stat, .g-numbers .g-stat { padding: 6px 8px; }
.g-root.g-j-shake { animation: g-j-shake 0.32s steps(4, jump-none); }

/* ---------- whack ---------- */
.g-wk-field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px;
  border-radius: calc(var(--g-radius, 18px) * 0.6);
  background: var(--g-panel, #1e2130);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 6px),
    var(--g-panel, #1e2130);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent);
  touch-action: manipulation;
}
.g-wk-hole {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  font: inherit;
}
.g-wk-hole:focus-visible { outline: 2px solid var(--g-text, #eef0ff); outline-offset: 2px; }
/* the opening the sprite rises out of */
.g-wk-win {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 4%;
  bottom: 18%;
  overflow: hidden;
  z-index: 1;
}
.g-wk-win::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14%;
  height: 34%;
  border-radius: 50%;
  background: var(--g-bg, #14161f);
  z-index: -1;
}
.g-wk-rim {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8%;
  height: 20%;
  border-radius: 50%;
  z-index: 2;
  background: var(--g-tile, #2a2e42);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 color-mix(in srgb, var(--g-accent, #7c5cff) 25%, transparent);
}
.g-wk-key {
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 10px;
  font-weight: 800;
  color: var(--g-muted, #8a8fa8);
  opacity: 0.7;
}
.g-wk-pop {
  position: absolute;
  inset: 0;
  transform: translateY(105%);
  transition: transform 0.12s ease-in;
}
.g-wk-hole.is-up .g-wk-pop { transform: translateY(8%); transition: transform 0.1s ease-out; }
.g-wk-sprite { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-wk-flower { display: none; }
.g-wk-hole.is-flower .g-wk-mole { display: none; }
.g-wk-hole.is-flower .g-wk-flower { display: block; }
.g-wk-fur { fill: var(--g-accent, #7c5cff); }
.g-wk-belly { fill: color-mix(in srgb, var(--g-accent, #7c5cff) 55%, #ffffff); }
.g-wk-hi { fill: rgba(255, 255, 255, 0.55); }
.g-wk-eye { fill: #120c22; }
.g-wk-shut { fill: transparent; }
.g-wk-nose { fill: var(--g-accent-2, #22d3ee); }
.g-wk-tooth { fill: #ffffff; }
.g-wk-paw { fill: color-mix(in srgb, var(--g-accent, #7c5cff) 70%, #000000); }
.g-wk-stem { fill: #3ddc97; }
.g-wk-leaf { fill: #2fae78; }
.g-wk-petal { fill: #ffd23f; }
.g-wk-core { fill: var(--g-accent-2, #22d3ee); }
/* a bonked mole closes its eyes as it drops */
.g-wk-hole.is-hit .g-wk-eye { fill: transparent; }
.g-wk-hole.is-hit .g-wk-shut { fill: #120c22; }
.g-wk-hole.is-hit .g-wk-pop { transition-duration: 0.22s; }
.g-wk-hole.is-hit::after, .g-wk-hole.is-oops::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  animation: g-float 0.5s ease-out both;
  pointer-events: none;
}
.g-wk-hole.is-hit::after { content: "+1"; color: var(--g-accent, #7c5cff); }
.g-wk-hole.is-oops::after { content: "\2212 2s"; color: var(--g-danger, #ff4d6d); }

/* ---------- jumper ---------- */
.g-jumper .g-stage {
  max-width: 400px;
  margin: 0 auto;
  cursor: ew-resize;
  background: var(--g-bg, #14161f);
  background: linear-gradient(180deg, var(--g-bg, #14161f), color-mix(in srgb, var(--g-accent-2, #22d3ee) 10%, var(--g-bg, #14161f)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 25%, transparent);
}
.g-jumper .g-stage::before { padding-top: 150%; }
.g-jumper .g-stage canvas { image-rendering: pixelated; }
.g-jp-pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 400px;
  margin: 10px auto 0;
  touch-action: none;
}
.g-jp-key {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--g-text, #eef0ff);
  background: var(--g-panel, #1e2130);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent);
  -webkit-touch-callout: none;
}
.g-jp-key.is-down, .g-jp-key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px var(--g-accent, #7c5cff); }
.g-jp-key:focus-visible { outline: 2px solid var(--g-text, #eef0ff); outline-offset: 2px; }
.g-jp-key svg { width: 24px; height: 24px; }
.g-jp-right svg { transform: scaleX(-1); }

/* ---------- numbers ---------- */
.g-nb-next .g-stat-v { color: var(--g-accent-2, #22d3ee); }
.g-nb-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 420px;
  margin: 0 auto;
  padding: 8px;
  border-radius: calc(var(--g-radius, 18px) * 0.6);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px color-mix(in srgb, var(--g-accent, #7c5cff) 35%, transparent);
  touch-action: manipulation;
}
.g-nb-cell {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  font-size: clamp(16px, 6.4vw, 28px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--g-tile-text, var(--g-text, #eef0ff));
  background: var(--g-panel, #1e2130);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3);
}
.g-nb-grid.is-alt .g-nb-cell { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 2px color-mix(in srgb, var(--g-accent-2, #22d3ee) 35%, transparent); }
.g-nb-cell:focus-visible { outline: 2px solid var(--g-text, #eef0ff); outline-offset: 1px; z-index: 1; }
.g-nb-cell:disabled { cursor: default; }
.g-nb-cell.is-done {
  cursor: default;
  color: var(--g-muted, #8a8fa8);
  background: var(--g-bg, #14161f);
  background: color-mix(in srgb, var(--g-accent, #7c5cff) 22%, var(--g-bg, #14161f));
  box-shadow: none;
  opacity: 0.55;
}
.g-nb-cell.is-bad { animation: g-j-bad 0.35s steps(2, jump-none); }
.g-nb-grid.g-j-deal .g-nb-cell { animation: g-pop-in 0.2s ease-out both; }

/* ---------- keyframes ---------- */
@keyframes g-j-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes g-j-bad { 0%, 100% { background: var(--g-panel, #1e2130); } 50% { background: var(--g-danger, #ff4d6d); } }

@media (prefers-reduced-motion: reduce) {
  .g-root.g-j-shake, .g-nb-cell.is-bad, .g-nb-grid.g-j-deal .g-nb-cell { animation: none !important; }
  .g-wk-pop, .g-wk-hole.is-up .g-wk-pop { transition: none !important; }
  .g-wk-hole.is-hit::after, .g-wk-hole.is-oops::after { animation: none !important; opacity: 0; }
  .g-nb-cell.is-bad { box-shadow: inset 0 0 0 3px var(--g-danger, #ff4d6d); }
}

/*
 * P2E mini-games, set K (strategy room) — radarsweep, compasscall, zoneclock,
 * sectorscan, flagsignal. Load after games.css (shell, HUD, buttons, overlays
 * come from there). Themed with the same --g-* variables. Every selector is
 * scoped to .tk-game or a tk- class; keyframes use the tk- prefix.
 */

/* ---------- shared helpers ---------- */
.tk-game .g-hud { gap: 6px; }
.tk-game .g-stat { padding: 6px 8px; border-left: 3px solid var(--g-accent, #ff7a1f); }
.tk-game .g-ov-sub { line-height: 1.45; }
.tk-game .g-overlay { animation: none; background: rgba(18, 20, 12, 0.86); }
.tk-game .g-ov-card { animation: none; border: 2px solid var(--g-accent-2, #d9c58f); }
.g-root.tk-shake { animation: tk-shake 0.32s ease-in-out; }
@keyframes tk-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes tk-in { from { opacity: 0.2; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes tk-pop { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
@keyframes tk-spin { to { transform: rotate(360deg); } }
.tk-game button { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; touch-action: manipulation; }
.tk-game button:focus-visible { outline: 3px solid var(--g-text, #f1ead6); outline-offset: 2px; }

/* ---------- radarsweep ---------- */
.tk-rs-scope {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  touch-action: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--g-accent-2, #d9c58f) 10%, var(--g-panel, #343a24)) 0, var(--g-panel, #343a24) 70%);
  box-shadow: inset 0 0 0 3px var(--g-tile, #434a2e), inset 0 0 0 6px var(--g-bg, #262a1b), inset 0 0 0 7px color-mix(in srgb, var(--g-accent-2, #d9c58f) 45%, transparent);
}
.tk-rs-scope::before { content: ""; display: block; padding-top: 100%; }
.tk-rs-grid {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 0 18%, color-mix(in srgb, var(--g-accent-2, #d9c58f) 35%, transparent) 18% calc(18% + 1px), transparent calc(18% + 1px) 32%, color-mix(in srgb, var(--g-accent-2, #d9c58f) 35%, transparent) 32% calc(32% + 1px), transparent calc(32% + 1px) 46%, color-mix(in srgb, var(--g-accent-2, #d9c58f) 35%, transparent) 46% calc(46% + 1px), transparent calc(46% + 1px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--g-accent-2, #d9c58f) 40%, transparent) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--g-accent-2, #d9c58f) 40%, transparent) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.tk-rs-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--g-accent-2, #d9c58f) 34%, transparent), transparent 70deg, transparent);
  animation: tk-spin 3s linear infinite;
}
.tk-rs-q {
  position: absolute;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--g-muted, #b9b294);
  pointer-events: none;
}
.tk-rs-q1 { left: 22%; top: 22%; } .tk-rs-q2 { right: 22%; top: 22%; }
.tk-rs-q3 { left: 22%; bottom: 22%; } .tk-rs-q4 { right: 22%; bottom: 22%; }
.tk-rs-layer { position: absolute; inset: 0; }
.tk-rs-blip {
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.tk-rs-blip i {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--g-accent, #ff7a1f);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent, #ff7a1f) 35%, transparent), 0 0 14px var(--g-accent, #ff7a1f);
}
.tk-rs-blip.is-friend i {
  inset: 26%;
  border-radius: 2px;
  background: var(--g-accent-2, #d9c58f);
  box-shadow: 0 0 0 2px var(--g-bg, #262a1b);
}
.tk-rs-blip.is-hit, .tk-rs-blip.is-oops { animation: tk-pop 0.26s ease-out forwards; }
.tk-rs-blip.is-oops i { background: var(--g-danger, #ff5b4a); }

/* ---------- compasscall ---------- */
.tk-cc-call {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  margin-bottom: 10px;
  padding: 10px 12px 14px;
  border-radius: calc(var(--g-radius, 6px) * 0.6);
  background: var(--g-panel, #343a24);
  border: 2px dashed color-mix(in srgb, var(--g-accent-2, #d9c58f) 50%, transparent);
  text-align: center;
}
.tk-cc-call.is-new { animation: tk-in 0.18s ease-out; }
.tk-cc-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-muted, #b9b294); }
.tk-cc-word { font-size: clamp(24px, 7vw, 34px); font-weight: 800; line-height: 1.1; color: var(--g-text, #f1ead6); text-transform: uppercase; letter-spacing: 0.03em; }
.tk-cc-arrow svg { width: 46px; height: 46px; fill: var(--g-accent, #ff7a1f); transition: none; }
.tk-cc-timer { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--g-tile, #434a2e); overflow: hidden; }
.tk-cc-timer i { display: block; height: 100%; background: var(--g-accent-2, #d9c58f); transform-origin: left center; }
.tk-cc-rose {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--g-panel, #343a24);
  box-shadow: inset 0 0 0 2px var(--g-tile, #434a2e);
}
.tk-cc-rose::before { content: ""; display: block; padding-top: 100%; }
.tk-cc-ring {
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--g-accent-2, #d9c58f) 45%, transparent);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), color-mix(in srgb, var(--g-accent-2, #d9c58f) 45%, transparent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), color-mix(in srgb, var(--g-accent-2, #d9c58f) 45%, transparent) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.tk-cc-hub { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--g-accent, #ff7a1f); }
.tk-cc-pt {
  position: absolute;
  width: 21%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid var(--g-accent-2, #d9c58f);
  border-radius: 50%;
  background: var(--g-tile, #434a2e);
  color: var(--g-text, #f1ead6);
  font-size: clamp(13px, 4vw, 17px);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.tk-cc-pt.is-main { width: 23%; background: var(--g-bg, #262a1b); font-size: clamp(16px, 5vw, 22px); }
.tk-cc-pt:hover { border-color: var(--g-accent, #ff7a1f); }
.tk-cc-pt.is-ok { background: var(--g-accent, #ff7a1f); border-color: var(--g-accent, #ff7a1f); color: #17180f; }
.tk-cc-pt.is-bad { background: var(--g-danger, #ff5b4a); border-color: var(--g-danger, #ff5b4a); color: #17180f; }

/* ---------- zoneclock ---------- */
.tk-zc-dial {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.tk-zc-dial svg { display: block; width: 100%; height: auto; }
.tk-zc-face { fill: var(--g-panel, #343a24); stroke: var(--g-accent-2, #d9c58f); stroke-width: 4; }
.tk-zc-inner { fill: none; stroke: color-mix(in srgb, var(--g-accent-2, #d9c58f) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.tk-zc-tick { stroke: var(--g-muted, #b9b294); stroke-width: 1.2; }
.tk-zc-tick.is-big { stroke: var(--g-text, #f1ead6); stroke-width: 2.4; }
.tk-zc-zone { fill: none; stroke: var(--g-accent, #ff7a1f); stroke-width: 16; opacity: 0.85; }
.tk-zc-dial.is-in .tk-zc-zone { opacity: 1; stroke-width: 19; }
.tk-zc-hand line { stroke: var(--g-text, #f1ead6); stroke-width: 4; stroke-linecap: round; }
.tk-zc-hand circle { fill: var(--g-accent, #ff7a1f); stroke: var(--g-text, #f1ead6); stroke-width: 2; }
.tk-zc-read { font-size: 15px; font-weight: 800; letter-spacing: 0.14em; fill: var(--g-muted, #b9b294); font-family: inherit; }
.tk-zc-dial.is-ok .tk-zc-read { fill: var(--g-accent, #ff7a1f); }
.tk-zc-dial.is-bad .tk-zc-read { fill: var(--g-danger, #ff5b4a); }
.tk-zc-dial.is-bad .tk-zc-face { stroke: var(--g-danger, #ff5b4a); }

/* ---------- sectorscan ---------- */
.tk-ss-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-ss-board.is-new .tk-ss-dots { animation: tk-in 0.16s ease-out; }
.tk-ss-sector {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  aspect-ratio: 1 / 1.1;
  border: 2px solid var(--g-tile, #434a2e);
  border-radius: calc(var(--g-radius, 6px) * 0.6);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--g-accent-2, #d9c58f) 12%, transparent) 1px, transparent 1px) 0 0 / 20% 20%,
    linear-gradient(0deg, color-mix(in srgb, var(--g-accent-2, #d9c58f) 12%, transparent) 1px, transparent 1px) 0 0 / 20% 20%,
    var(--g-panel, #343a24);
  cursor: pointer;
  overflow: hidden;
}
.tk-ss-sector:hover { border-color: var(--g-accent-2, #d9c58f); }
.tk-ss-sector.is-ok { border-color: var(--g-accent, #ff7a1f); box-shadow: inset 0 0 0 3px var(--g-accent, #ff7a1f); }
.tk-ss-sector.is-bad { border-color: var(--g-danger, #ff5b4a); box-shadow: inset 0 0 0 3px var(--g-danger, #ff5b4a); }
.tk-ss-name {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 1;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-bg, #262a1b);
  background: var(--g-accent-2, #d9c58f);
  border-radius: 2px;
}
.tk-ss-dots { position: absolute; inset: 22px 4px 4px; }
.tk-ss-dots i {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  min-width: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--g-accent, #ff7a1f);
  box-shadow: 0 0 0 2px var(--g-bg, #262a1b);
}

/* ---------- flagsignal ---------- */
.tk-fs-mast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: calc(var(--g-radius, 6px) * 0.6);
  background: var(--g-panel, #343a24);
  border: 2px dashed color-mix(in srgb, var(--g-accent-2, #d9c58f) 50%, transparent);
}
.tk-fs-mast.is-new .tk-fs-big { animation: tk-in 0.18s ease-out; }
.tk-fs-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-muted, #b9b294); writing-mode: vertical-rl; transform: rotate(180deg); }
.tk-fs-big { display: block; width: min(52%, 200px); border-left: 4px solid var(--g-accent-2, #d9c58f); padding-left: 0; }
.tk-fs-big svg, .tk-fs-flag svg { display: block; width: 100%; height: auto; }
.tk-fs-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-fs-opts.is-six { grid-template-columns: 1fr 1fr 1fr; }
.tk-fs-flag {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 2px solid var(--g-tile, #434a2e);
  border-radius: calc(var(--g-radius, 6px) * 0.6);
  background: var(--g-panel, #343a24);
  cursor: pointer;
}
.tk-fs-opts.is-six .tk-fs-flag { padding: 7px; }
.tk-fs-flag:hover { border-color: var(--g-accent-2, #d9c58f); }
.tk-fs-flag.is-was { border-color: var(--g-accent, #ff7a1f); box-shadow: 0 0 0 3px var(--g-accent, #ff7a1f); }
.tk-fs-num {
  position: absolute;
  right: 3px;
  top: 2px;
  font-size: 10px;
  font-weight: 800;
  color: var(--g-muted, #b9b294);
}
.tk-fs-edge { fill: none; stroke: #17180f; stroke-width: 1.5; }
.tk-fc0 { fill: #ff7a1f; }
.tk-fc1 { fill: #e3cf94; }
.tk-fc2 { fill: #17180f; }
.tk-fc3 { fill: #ffffff; }
.tk-fc4 { fill: #3f8f5a; }

@media (max-width: 380px) {
  .tk-game .g-stat-v { font-size: 18px; }
  .tk-fs-opts.is-six { gap: 6px; }
  .tk-ss-board, .tk-fs-opts { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-rs-sweep { animation: none; opacity: 0.5; }
}

/*
 * P2E mini-games, set L (bright game portal) — colorgate, ringtoss, oddtile,
 * pinwheel, gapdrop. Load after games.css (HUD, buttons, overlays and
 * .g-stage come from there). Themed with the same --g-* variables plus an
 * optional --pl-lime. Every selector is scoped to a .pl- class.
 */

/* ---------- shared: canvas stages ---------- */
.g-root .pl-stage {
  border: 2px solid var(--g-text, #0b1033);
  background: var(--g-panel, #fff);
}
.g-root .pl-stage::before { padding-top: 125%; }
.pl-cg .g-stat, .pl-rt .g-stat, .pl-ot .g-stat, .pl-pw .g-stat, .pl-gd .g-stat { border: 2px solid var(--g-text, #0b1033); }
.pl-pw .g-hud { gap: 6px; }
.pl-pw .g-stat { padding: 6px 8px; }
.pl-pw .g-life { width: 12px; height: 12px; }

/* ---------- oddtile ---------- */
.pl-ot-board {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 12px;
  border: 2px solid var(--g-text, #0b1033);
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #fff);
  touch-action: manipulation;
}
.pl-ot-board::before { content: ""; display: block; padding-top: 100%; }
.pl-ot-grid {
  position: absolute;
  inset: 12px;
  display: grid;
  gap: 8px;
}
.pl-ot-n5 { gap: 6px; }
.pl-ot-n6, .pl-ot-n7 { gap: 5px; }
.pl-ot-tile {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  transition: transform 0.08s ease;
}
.pl-ot-n5 .pl-ot-tile { border-radius: 10px; }
.pl-ot-n6 .pl-ot-tile, .pl-ot-n7 .pl-ot-tile { border-radius: 8px; }
.pl-ot-tile:active { transform: scale(0.94); }
.pl-ot-tile:focus-visible, .pl-ot-tile.is-cur { outline: 3px solid var(--g-text, #0b1033); outline-offset: 2px; }
.pl-ot-tile.is-wrong { animation: pl-ot-no 0.3s ease; }
.pl-ot-tile.is-reveal { outline: 4px solid var(--g-text, #0b1033); outline-offset: -4px; animation: pl-pulse 0.8s ease-in-out 3; }
.pl-ot-board.is-ok { animation: pl-pop 0.22s ease; }
.pl-ot-board.is-bad { animation: pl-shake 0.3s ease; }

/* ---------- gapdrop pad ---------- */
.pl-gd-pad { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.pl-gd-key {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--g-text, #0b1033);
  border-radius: 999px;
  background: var(--g-tile, #eef1ff);
  color: var(--g-text, #0b1033);
  box-shadow: 3px 3px 0 var(--g-text, #0b1033);
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
}
.pl-gd-key svg { width: 26px; height: 26px; }
.pl-gd-right svg { transform: scaleX(-1); }
.pl-gd-key.is-down { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--g-text, #0b1033); background: var(--g-accent, #2346ff); color: #fff; }
.pl-gd-key:focus-visible { outline: 3px solid var(--g-accent, #2346ff); outline-offset: 2px; }

@keyframes pl-pop { 50% { transform: scale(1.015); } }
@keyframes pl-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes pl-ot-no { 50% { transform: scale(0.82); } }
@keyframes pl-pulse { 50% { transform: scale(0.9); } }
@media (prefers-reduced-motion: reduce) {
  .pl-ot-tile, .pl-ot-board, .pl-gd-key { animation: none !important; transition: none !important; }
}

/*
 * Games set M: rkshelf, rkdangle, rkglove, rktape, rkzamboni.
 * Every selector is scoped to .rk-g so other sites that load this file are untouched.
 * Colours inside the canvases are drawn by the scripts; this file styles the HUD and controls.
 */
.rk-g { max-width: 500px; background: var(--g-bg, #eef3f8); }

/* HUD as a small LED scoreboard */
.rk-g .g-hud { gap: 6px; }
.rk-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 8px 4px;
  border-radius: 6px;
  background-color: #0b0d10;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px);
  background-size: 5px 5px;
}
.rk-g .g-stat-l { color: #c3ccd8; font-size: 10px; }
.rk-g .g-stat-v {
  color: #ffb81c;
  font-family: var(--display, 'Arial Narrow', sans-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .04em;
  text-shadow: 0 0 10px rgba(255, 184, 28, .45);
}
.rk-g .g-bar { height: 6px; border-radius: 3px; background: #d5dde7; }
.rk-g .g-bar-fill { background: linear-gradient(90deg, #1d4fd8, #d21f3c); }
.rk-g .g-bar-fill.is-low { background: #d21f3c; }

/* puck "lives" */
.rk-pucks { display: flex; justify-content: center; gap: 5px; height: 30px; align-items: center; }
.rk-pucks i {
  width: 16px;
  height: 9px;
  border-radius: 50%;
  background: #ffb81c;
  box-shadow: 0 0 8px rgba(255, 184, 28, .5);
  transition: opacity .2s, transform .2s;
}
.rk-pucks i.is-off { opacity: .2; box-shadow: none; transform: scale(.8); }

/* the ice */
.rk-g .g-stage {
  cursor: crosshair;
  border-radius: 6px;
  background: #f3f7fb;
  box-shadow: inset 0 0 0 3px #11151c;
}
.rk-g .g-stage canvas { border-radius: 6px; }
.rk-shelf .g-stage::before { padding-top: 93.75%; }
.rk-glove .g-stage::before { padding-top: 93.75%; }
.rk-dangle .g-stage::before { padding-top: 137.5%; }
.rk-tape .g-stage::before { padding-top: 137.5%; }
.rk-zamboni .g-stage::before { padding-top: 100%; }
.rk-dangle .g-stage, .rk-zamboni .g-stage { cursor: grab; }

/* overlays */
.rk-g .g-overlay { background: rgba(238, 243, 248, .72); }
.rk-g .g-ov-card {
  max-width: 320px;
  border-radius: 8px;
  background: #fff;
  border-top: 6px solid #d21f3c;
  box-shadow: 0 0 0 2px #11151c, 0 18px 40px rgba(11, 16, 24, .25);
}
.rk-g .g-ov-title {
  font-family: var(--display, 'Arial Narrow', sans-serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #0b1018;
}
.rk-g .g-ov-sub { color: #46515f; font-size: 14px; line-height: 1.45; }
.rk-g .g-ov-score { color: #46515f; }
.rk-g .g-ov-score b {
  font-family: var(--display, 'Arial Narrow', sans-serif);
  font-weight: 500;
  font-size: 64px;
  color: #ffb81c;
  background: #0b0d10;
  border-radius: 6px;
  padding: 8px 0 2px;
  margin-top: 6px;
  text-shadow: 0 0 14px rgba(255, 184, 28, .45);
}
.rk-keys {
  display: inline-block;
  margin: -6px 0 16px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #eaf0f6;
  color: #253041;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rk-g .g-btn {
  border-radius: 4px;
  background: #d21f3c;
  color: #fff;
  box-shadow: 0 3px 0 #8f1027;
  font-family: var(--display, 'Arial Narrow', sans-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 10px 28px 7px;
}
.rk-g .g-btn:focus-visible { outline: 3px solid #1d4fd8; outline-offset: 2px; }

/* resurfacer tools */
.rk-tools { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.rk-tools .g-btn { font-size: 18px; padding: 8px 18px 5px; background: #fff; color: #0b1018; box-shadow: inset 0 0 0 2px #0b1018; }
.rk-tools .g-btn.rk-hot { background: #d21f3c; color: #fff; box-shadow: 0 3px 0 #8f1027; }
@media (prefers-reduced-motion: no-preference) {
  .rk-tools .g-btn.rk-hot { animation: rk-nudge 1s ease-in-out infinite; }
}
@keyframes rk-nudge { 50% { transform: translateY(-2px); } }

.rk-g .g-cap { color: #46515f; font-weight: 600; }
.rk-g .g-cap.g-cap-cta { color: #0b1018; }

@media (max-width: 380px) {
  .rk-g { padding: 8px; }
  .rk-g .g-stat-v { font-size: 26px; }
  .rk-g .g-ov-card { padding: 18px 14px; }
  .rk-g .g-ov-title { font-size: 32px; }
}

/*
 * Games set N: cncoco, cnvine, cnbalance, cncount, cntoucan (Canopy Play).
 * Every selector is scoped to .cn-g or a cn- class so other sites that load this file are untouched.
 * Scenes are plain DOM; sizes inside the scenes use container units (cqw) of each stage.
 */
.cn-g { max-width: 500px; background: #123a27; color: #fff8e6; border: 3px solid #0b2418; }
.cn-g .g-hud { gap: 6px; }
.cn-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 8px 5px;
  border-radius: 16px 4px 16px 4px;
  background: #1d5137;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.cn-g .g-stat-l { color: #cfe6c4; font-size: 10px; }
.cn-g .g-stat-v { color: #ffd45c; font-family: var(--display, sans-serif); font-size: 24px; font-weight: 800; line-height: 1.05; }
.cn-g .g-bar { height: 7px; border-radius: 4px; background: #0b2418; }
.cn-g .g-bar-fill { background: linear-gradient(90deg, #7fd15a, #ffc93c 70%, #ff6b4a); }
.cn-g .g-bar-fill.is-low { background: #ff6b4a; }
.cn-g .g-cap { color: #cfe6c4; font-size: 14px; min-height: 1.3em; }
.cn-g .g-cap.g-cap-cta { color: #fff8e6; }
.cn-g .g-btn { color: #2a0f06; background: #ff6b4a; box-shadow: 0 4px 0 #b23a1f, 0 10px 20px rgba(0, 0, 0, .25); border-radius: 999px; }
.cn-g .g-btn:active { box-shadow: 0 2px 0 #b23a1f; }
.cn-g .g-overlay { background: rgba(9, 32, 21, .72); }
.cn-g .g-ov-card {
  background: #fff4d6;
  color: #24160a;
  border-radius: 26px 6px 26px 6px;
  border: 3px solid #7a4a24;
  box-shadow: 0 8px 0 #4e2e14, 0 22px 44px rgba(0, 0, 0, .4);
}
.cn-g .g-ov-title { color: #173f2a; font-family: var(--display, sans-serif); font-size: 26px; }
.cn-g .g-ov-sub { color: #5a4630; }
.cn-g .g-ov-score { color: #7a5a34; }
.cn-g .g-ov-score b { color: #c23e1f; font-family: var(--display, sans-serif); }

/* leaves used as lives */
.cn-g .cn-lives { display: flex; gap: 4px; justify-content: center; align-items: center; height: 25px; }
.cn-leaf {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 0 100% 0 100%;
  background: #7fd15a;
  box-shadow: inset -2px 2px 0 rgba(255, 255, 255, .35);
  transition: opacity .2s, transform .2s;
}
.cn-leaf.is-off { opacity: .2; transform: scale(.7) rotate(40deg); }

.cn-shake { animation: cn-shake .38s ease; }
@keyframes cn-shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

/* shared stage frame */
.cn-ku-stage, .cn-vb-stage, .cn-bb-stage, .cn-mc-stage, .cn-tf-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px 6px 20px 6px;
  touch-action: none;
  container-type: inline-size;
  box-shadow: inset 0 0 0 3px rgba(11, 36, 24, .55);
}
.cn-ku-stage::before, .cn-vb-stage::before, .cn-bb-stage::before, .cn-mc-stage::before, .cn-tf-stage::before { content: ""; display: block; }

/* ---------------- Coconut Keepy-Up ---------------- */
.cn-ku-stage { cursor: none; background: #d8ec9e; }
.cn-ku-stage::before { padding-top: 133.333%; }
.cn-ku-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cn-ku-mult {
  position: absolute; left: 3%; top: 9%; padding: .6cqw 3cqw; border-radius: 6cqw 1.5cqw 6cqw 1.5cqw;
  font-family: var(--display, sans-serif); font-weight: 800; font-size: 7cqw; line-height: 1.2;
  color: #2a0f06; background: #ffc93c; box-shadow: 0 1cqw 0 #b88a17; opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.cn-ku-mult.is-on { opacity: 1; transform: none; }
.cn-ku-mult.is-m3 { background: #ff9a3c; box-shadow: 0 1cqw 0 #b25a17; }
.cn-ku-mult.is-m4 { background: #ff6b4a; color: #fff8e6; box-shadow: 0 1cqw 0 #b23a1f; }
.cn-ku-mult.is-pulse { animation: cn-ku-pulse .45s ease; }
.cn-ku-banner {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.7); white-space: nowrap;
  padding: 1.5cqw 5cqw; border-radius: 8cqw 2cqw 8cqw 2cqw; background: #173f2a; color: #ffd45c;
  font-family: var(--display, sans-serif); font-weight: 800; font-size: 6.4cqw; opacity: 0; pointer-events: none;
}
.cn-ku-banner.is-on { animation: cn-ku-banner 1.3s ease forwards; }
.cn-coco .cn-ku-combo.is-pulse .g-stat-v { animation: cn-ku-pulse .3s ease; }
@keyframes cn-ku-pulse { 40% { transform: scale(1.3); } }
@keyframes cn-ku-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cn-ku-banner.is-on { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .cn-ku-mult.is-pulse, .cn-coco .cn-ku-combo.is-pulse .g-stat-v { animation: none; }
}

/* ---------------- Vine Bridge ---------------- */
.cn-vb-stage { cursor: pointer; background: linear-gradient(180deg, #ffd27a 0%, #ffb36a 40%, #f08a57 66%, #8a3f2a 100%); }
.cn-vb-stage::before { padding-top: 100%; }
.cn-vb-stage.is-holding { cursor: grabbing; }
.cn-vb-sky { position: absolute; left: 50%; top: 18%; width: 34cqw; height: 34cqw; margin-left: -17cqw; border-radius: 50%; background: radial-gradient(circle, #fff3c4 0 45%, rgba(255, 230, 150, .4) 46% 62%, transparent 64%); }
.cn-vb-far {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
  background:
    radial-gradient(ellipse 30cqw 16cqw at 10% 40%, #2a5a32 0 98%, transparent 100%),
    radial-gradient(ellipse 34cqw 18cqw at 50% 34%, #23502c 0 98%, transparent 100%),
    radial-gradient(ellipse 30cqw 16cqw at 90% 42%, #2a5a32 0 98%, transparent 100%),
    linear-gradient(180deg, transparent 40%, #173f26 41%);
}
.cn-vb-world { position: absolute; inset: 0; }
.cn-vb-plat {
  position: absolute; top: 70%; bottom: 0;
  background: linear-gradient(90deg, #5a3417, #8a5a2e 45%, #6e4220);
}
.cn-vb-plat::before {
  content: ""; position: absolute; left: -1.6cqw; right: -1.6cqw; top: -2.4cqw; height: 5cqw;
  border-radius: 3cqw 3cqw 1.4cqw 1.4cqw;
  background: linear-gradient(180deg, #7fd15a, #3f9a43 70%, #2f8238);
}
.cn-vb-flower {
  position: absolute; left: 50%; top: -3.4cqw; width: 3.6cqw; height: 3.6cqw; margin-left: -1.8cqw;
  border-radius: 50%; background: #ffd45c; box-shadow: 0 0 0 1cqw #ff5a3c;
}
.cn-vb-vine {
  position: absolute; top: 70%; height: 1.6cqw; margin-top: -2.6cqw; z-index: 2;
  transform-origin: 0 50%;
  border-radius: 1cqw;
  background: repeating-linear-gradient(90deg, #2f8238 0 2.2cqw, #56b84a 2.2cqw 3.4cqw);
  box-shadow: 0 0 0 .3cqw #173f26;
}
.cn-vb-mk { position: absolute; bottom: 31.5%; width: 8cqw; z-index: 3; transform: translateX(-50%); }
.cn-vb-mk svg { width: 100%; height: auto; }
.cn-vb-pop {
  position: absolute; top: 46%; z-index: 4; transform: translate(-50%, 0); opacity: 0;
  font-family: var(--display, sans-serif); font-weight: 800; font-size: 6cqw; color: #fff8e6;
  text-shadow: 0 .5cqw 0 #8a3f2a; white-space: nowrap; pointer-events: none;
}
.cn-vb-pop.is-on { animation: cn-pop .7s ease-out both; }
@keyframes cn-pop { 0% { opacity: 0; transform: translate(-50%, 30%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }

/* ---------------- Branch Balance ---------------- */
.cn-bb-stage { cursor: pointer; background: linear-gradient(180deg, #fff1c2 0%, #dff0b0 48%, #9fd77d 100%); }
.cn-bb-stage::before { padding-top: 84%; }
.cn-bb-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 26cqw 16cqw at 0% 0%, #3f9a43 0 98%, transparent 100%),
    radial-gradient(ellipse 30cqw 18cqw at 100% 4%, #2f8238 0 98%, transparent 100%),
    radial-gradient(ellipse 22cqw 12cqw at 30% -4%, #49a849 0 98%, transparent 100%);
}
.cn-bb-trunk { position: absolute; left: 45%; width: 10%; top: 72%; bottom: 0; background: linear-gradient(90deg, #5a3417, #8a5a2e 50%, #5a3417); }
.cn-bb-fork {
  position: absolute; left: 50%; top: 67%; width: 12cqw; height: 9cqw; margin-left: -6cqw;
  background: #6e4220; clip-path: polygon(0 0, 22% 0, 50% 55%, 78% 0, 100% 0, 62% 100%, 38% 100%);
}
.cn-bb-beam {
  position: absolute; left: 8%; width: 84%; top: 66%; height: 3.4cqw; margin-top: -1.7cqw; z-index: 2;
  border-radius: 2cqw; transform-origin: 50% 50%;
}
.cn-bb-beam.is-tipped { transition: transform .35s ease-in; }
.cn-bb-wood {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, #a8703c, #7a4a24 60%, #5a3417);
  box-shadow: 0 .6cqw 0 rgba(0, 0, 0, .18);
}
.cn-bb-wood::before, .cn-bb-wood::after {
  content: ""; position: absolute; top: -2.4cqw; width: 6cqw; height: 4cqw; border-radius: 0 100% 0 100%;
  background: #3f9a43;
}
.cn-bb-wood::before { left: -2cqw; transform: rotate(-30deg); }
.cn-bb-wood::after { right: -2cqw; transform: scaleX(-1) rotate(-30deg); }
.cn-bb-bird, .cn-bb-hover, .cn-bb-falling { position: absolute; width: 9cqw; }
.cn-bb-bird svg, .cn-bb-hover svg, .cn-bb-falling svg { width: 100%; height: auto; display: block; }
.cn-bb-w1 { width: 9cqw; }
.cn-bb-w2 { width: 11.5cqw; }
.cn-bb-w3 { width: 14.5cqw; }
.cn-bb-bird { bottom: 80%; transform: translateX(-50%); transition: opacity .5s, transform .5s; }
.cn-bb-bird.is-restless { animation: cn-bb-flap .3s ease-in-out infinite alternate; }
.cn-bb-bird.is-off { opacity: 0; transform: translate(-50%, -260%) rotate(-18deg); animation: none; }
@keyframes cn-bb-flap { to { transform: translate(-50%, -12%); } }
.cn-bb-hover, .cn-bb-falling { top: 24%; transform: translate(-50%, -100%); z-index: 3; }
.cn-bb-hover { animation: cn-bb-bob .5s ease-in-out infinite alternate; }
@keyframes cn-bb-bob { to { margin-top: -1cqw; } }
.cn-bb-line { position: absolute; top: 24%; height: 41%; width: 0; border-left: .5cqw dashed rgba(23, 63, 42, .5); z-index: 1; }
.cn-bb-meter {
  position: absolute; left: 20%; right: 20%; bottom: 5%; height: 2.6cqw; border-radius: 2cqw; z-index: 2;
  background: linear-gradient(90deg, #ff5a3c 0 10%, #ffd45c 10% 24%, #6cc04a 24% 76%, #ffd45c 76% 90%, #ff5a3c 90%);
  box-shadow: 0 0 0 .5cqw #173f2a;
}
.cn-bb-needle {
  position: absolute; top: -1.6cqw; bottom: -1.6cqw; width: 1.4cqw; margin-left: -.7cqw; border-radius: 1cqw;
  background: #173f2a; transition: left .15s;
}
.cn-bb-needle.is-hot { background: #b31f0a; }

/* ---------------- Monkey Count ---------------- */
.cn-mc-stage { background: linear-gradient(180deg, #ffe9a8 0%, #cdeaa0 55%, #74bd55 86%, #4f9a3e 100%); }
.cn-mc-stage::before { padding-top: 72%; }
.cn-mc-sky { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: repeating-linear-gradient(90deg, #3f8f3a 0 3cqw, #4a9e42 3cqw 6cqw); }
.cn-mc-bush { position: absolute; bottom: 10%; width: 22cqw; height: 13cqw; border-radius: 12cqw 12cqw 2cqw 2cqw; background: #2f8238; }
.cn-mc-bush-l { left: -6%; }
.cn-mc-bush-r { right: -6%; }
.cn-mc-runners { position: absolute; inset: 0; z-index: 1; }
.cn-mc-mk { position: absolute; bottom: 8%; width: 12cqw; transform: translateX(-50%); }
.cn-mc-mk svg { width: 100%; height: auto; }
.cn-mc-mk.is-left svg { transform: scaleX(-1); }
.cn-mc-tree {
  position: absolute; left: 33%; width: 34%; top: 26%; bottom: 6%; z-index: 2;
  border-radius: 3cqw 3cqw 0 0;
  background: repeating-linear-gradient(90deg, #6e4220 0 3cqw, #87552b 3cqw 5cqw, #7a4a24 5cqw 7cqw);
  box-shadow: inset 1.4cqw 0 0 rgba(255, 255, 255, .1), inset -2cqw 0 0 rgba(0, 0, 0, .18);
}
.cn-mc-tree::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 12%; background: #5a3417; border-radius: 50% 50% 0 0; }
.cn-mc-crown {
  position: absolute; left: -40%; right: -40%; top: -62%; height: 80%;
  background:
    radial-gradient(circle at 25% 60%, #3f9a43 0 28%, transparent 29%),
    radial-gradient(circle at 75% 58%, #3f9a43 0 28%, transparent 29%),
    radial-gradient(circle at 50% 36%, #49a849 0 34%, transparent 35%),
    radial-gradient(circle at 50% 70%, #2f8238 0 30%, transparent 31%);
}
.cn-mc-peek {
  position: absolute; left: 34%; width: 32%; top: 34%; bottom: 14%; z-index: 3;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1cqw;
  opacity: 0; transition: opacity .2s;
}
.cn-mc-peek.is-on { opacity: 1; }
.cn-mc-peek i { width: 8cqw; animation: cn-mc-peek .3s calc(var(--i) * 40ms) ease-out both; }
.cn-mc-peek i svg { width: 100%; height: auto; }
.cn-mc-peek b { color: #fff4d6; font-size: 5cqw; font-family: var(--display, sans-serif); }
@keyframes cn-mc-peek { from { transform: scale(.3); opacity: 0; } }
.cn-mc-flag {
  position: absolute; left: 50%; top: 3%; z-index: 4; transform: translateX(-50%) translateY(-160%);
  padding: 1.4cqw 3.4cqw; border-radius: 3cqw 1cqw 3cqw 1cqw; white-space: nowrap;
  background: #fff4d6; color: #24160a; border: .6cqw solid #7a4a24;
  font-weight: 800; font-size: 4.2cqw; transition: transform .25s;
}
.cn-mc-flag.is-on { transform: translateX(-50%); }
.cn-mc-answers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.cn-mc-ans {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; font: inherit;
  min-height: 56px; font-family: var(--display, sans-serif); font-size: 28px; font-weight: 800;
  color: #24160a; background: #ffd45c; border-radius: 18px 4px 18px 4px; box-shadow: 0 4px 0 #b88a17;
  touch-action: manipulation;
}
.cn-mc-ans:disabled { cursor: default; background: #1d5137; color: #8fb38a; box-shadow: none; }
.cn-mc-ans.is-ok:disabled { background: #7fd15a; color: #102a10; }
.cn-mc-ans.is-bad:disabled { background: #ff6b4a; color: #2a0f06; }
.cn-mc-answers.is-open .cn-mc-ans:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 #b88a17; }
.cn-mc-ans:focus-visible { outline: 3px solid #fff8e6; outline-offset: 2px; }

/* ---------------- Toucan Feed ---------------- */
.cn-tf-stage { background: linear-gradient(180deg, #ffe39a 0%, #ffd27a 20%, #c9e79a 60%, #6fb553 100%); }
.cn-tf-stage::before { padding-top: 112%; }
.cn-tf-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30cqw 18cqw at 0% 2%, #2f8238 0 98%, transparent 100%),
    radial-gradient(ellipse 30cqw 18cqw at 100% 0%, #3f9a43 0 98%, transparent 100%),
    radial-gradient(ellipse 22cqw 10cqw at 50% -3%, #2f8238 0 98%, transparent 100%);
}
.cn-tf-vine { position: absolute; top: 0; width: 1.4cqw; height: 46%; background: repeating-linear-gradient(180deg, #2f8238 0 3cqw, #56b84a 3cqw 4.4cqw); border-radius: 1cqw; }
.cn-tf-vine-l { left: 22%; }
.cn-tf-vine-r { right: 20%; height: 34%; }
.cn-tf-chute { position: absolute; left: 50%; top: 0; height: 60%; width: 18cqw; margin-left: -9cqw; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); border-radius: 0 0 9cqw 9cqw; }
.cn-tf-fruits { position: absolute; inset: 0; z-index: 2; }
.cn-tf-fruit { position: absolute; top: -8%; left: 50%; width: 11cqw; transform: translate(-50%, -50%); }
.cn-tf-fruit svg { width: 100%; height: auto; display: block; }
.cn-tf-fruit.is-low::after {
  content: ""; position: absolute; inset: -2.4cqw; border-radius: 50%;
  border: .9cqw solid #fff8e6; box-shadow: 0 0 0 .6cqw rgba(255, 90, 60, .75);
  animation: cn-tf-ring .7s ease-in-out infinite alternate;
}
@keyframes cn-tf-ring { to { transform: scale(1.1); } }
.cn-tf-fruit.is-eaten { transition: top .16s ease-in, left .16s ease-in, transform .16s, opacity .2s .12s; transform: translate(-50%, -50%) scale(.5); opacity: 0; }
.cn-tf-fruit.is-splat { transition: transform .25s, opacity .3s; transform: translate(-50%, -20%) scale(1.4, .4); opacity: 0; }
.cn-tf-branch {
  position: absolute; left: 0; right: 0; top: 86%; height: 4cqw; z-index: 1;
  background: linear-gradient(180deg, #9a6232, #6e4220); border-radius: 2cqw;
}
.cn-tf-birds { position: absolute; inset: 0; z-index: 3; }
.cn-tf-bird {
  -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  position: absolute; top: 64%; width: 26cqw; transform: translateX(-50%);
  transition: left .35s ease-in-out; touch-action: manipulation;
}
.cn-tf-bird svg { width: 100%; height: auto; display: block; }
.cn-tf-bird:focus-visible { outline: .8cqw solid #fff8e6; outline-offset: 0; border-radius: 4cqw; }
.cn-tf-tag {
  position: absolute; left: 4%; top: 6%; width: 9cqw; height: 9cqw; padding: 1cqw;
  border-radius: 50%; background: #fff4d6; box-shadow: 0 0 0 .5cqw #7a4a24;
}
.cn-tf-key {
  position: absolute; right: 18%; bottom: -1cqw; min-width: 5cqw; padding: 0 1cqw; border-radius: 1.4cqw;
  background: #173f2a; color: #fff8e6; font-size: 3.4cqw; font-weight: 800; line-height: 5cqw; text-align: center;
}
.cn-tf-bird.is-chomp svg { animation: cn-tf-chomp .2s ease-out; }
.cn-tf-bird.is-no svg { animation: cn-tf-no .3s ease-in-out; }
@keyframes cn-tf-chomp { 50% { transform: translateY(-6%) rotate(-6deg); } }
@keyframes cn-tf-no { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.cn-tf-pop {
  position: absolute; top: 42%; z-index: 4; transform: translate(-50%, 0); opacity: 0; pointer-events: none;
  font-family: var(--display, sans-serif); font-weight: 800; font-size: 6.4cqw; color: #fff8e6; white-space: nowrap;
  text-shadow: 0 .5cqw 0 #8a3f2a;
}
.cn-tf-pop.is-on { animation: cn-pop .65s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .cn-g *, .cn-g { animation: none !important; transition: none !important; }
}

/*
 * P2E mini-games, set O (zen garden) — znbamboo, znblossom, znscoop, znkoi,
 * znlantern. Load after games.css (shell, HUD, buttons, overlays and .g-stage
 * come from there). Every selector is scoped to .zn-g or a zn- class, so the
 * other sites that load this file are untouched. Scene colours are drawn by
 * the scripts; this file styles the paper HUD, lives, overlays and buttons.
 */
.zn-g {
  max-width: 500px;
  padding: 14px;
  border-radius: 4px;
  background: #f3ecdd;
  color: #171512;
  box-shadow: inset 0 0 0 1px #d8ccb4;
}

/* HUD: paper cells on hairlines */
.zn-g .g-hud { gap: 6px; }
.zn-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 6px 5px;
  border-radius: 3px;
  background: #fffcf5;
  box-shadow: inset 0 0 0 1px #d8ccb4;
}
.zn-g .g-stat-l { color: #5c554b; font-size: 10px; letter-spacing: .12em; }
.zn-g .g-stat-v { color: #171512; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }

/* lives: three small brush rings, filled while you still have them */
.zn-lives { display: flex; justify-content: center; align-items: center; gap: 6px; height: 25px; }
.zn-lives i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c4361c;
  box-shadow: 0 0 0 2px #fffcf5, 0 0 0 3px #c4361c;
  transition: background .2s, box-shadow .2s;
}
.zn-lives i.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px #a99d88; }

.zn-g .g-bar { height: 4px; border-radius: 0; margin: 0 0 10px; background: #e2d7c2; }
.zn-g .g-bar-fill { background: #171512; }
.zn-g .g-bar-fill.is-low { background: #c4361c; }

/* the scene */
.zn-g .g-stage {
  border-radius: 3px;
  background: #ece3d0;
  box-shadow: 0 0 0 1px #171512;
}
.zn-g .g-stage canvas { border-radius: 3px; }
.zn-koi .g-stage::before, .zn-lantern .g-stage::before, .zn-bamboo .g-stage::before,
.zn-blossom .g-stage::before, .zn-scoop .g-stage::before { padding-top: 125%; }
.zn-koi .g-stage, .zn-blossom .g-stage { cursor: crosshair; }
.zn-lantern .g-stage, .zn-bamboo .g-stage { cursor: pointer; }
.zn-scoop .g-stage { cursor: crosshair; }
.zn-bamboo .g-stage, .zn-blossom .g-stage, .zn-scoop .g-stage { touch-action: none; -webkit-user-select: none; user-select: none; }

/* Blossom Chain: sparks are pale rings that refill */
.zn-sparks i { background: #e3909c; box-shadow: 0 0 0 2px #fffcf5, 0 0 0 3px #c4361c; }

.zn-g .g-cap { color: #4f4940; font-size: 14px; min-height: 1.4em; }
.zn-g .g-cap.g-cap-cta { color: #171512; }

/* overlays: a sheet of rice paper with a vermilion hairline */
.zn-g .g-overlay { background: rgba(243, 236, 221, .78); }
.zn-g .g-ov-card {
  max-width: 320px;
  border-radius: 3px;
  background: #fffcf5;
  border-top: 4px solid #c4361c;
  box-shadow: 0 0 0 1px #171512, 0 20px 40px rgba(23, 21, 18, .2);
}
.zn-g .g-ov-title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #171512; }
.zn-g .g-ov-sub { color: #4f4940; font-size: 14px; line-height: 1.5; }
.zn-g .g-ov-score { color: #4f4940; }
.zn-g .g-ov-score b { color: #c4361c; font-weight: 600; }
.zn-keys { margin: -6px 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b6458; }
.zn-g .g-btn {
  min-height: 48px;
  padding: 12px 30px;
  border-radius: 3px;
  background: #c4361c;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 0 #8a2412;
}
.zn-g .g-btn:hover { background: #a82c15; }
.zn-g .g-btn:focus-visible { outline: 3px solid rgba(196, 54, 28, .45); outline-offset: 2px; }

@media (max-width: 400px) {
  .zn-g { padding: 10px; }
  .zn-g .g-stat { padding: 5px 3px 4px; }
  .zn-g .g-stat-l { font-size: 9px; letter-spacing: .06em; }
  .zn-g .g-stat-v { font-size: 19px; }
  .zn-lives { gap: 4px; }
  .zn-lives i { width: 11px; height: 11px; }
}

/*
 * 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;
  }
}

/* theme (after base so overrides win) */

/* Sora ships here as one variable file; declare it as a weight range so 400/500 render light instead of falling back to the 600 face */
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/sora-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}
:root{--bg:#f6f1e7;--bg-2:#eee6d6;--card:#fffcf5;--text:#2a2622;--head:#171512;--muted:#5c554b;--nav:#2f2a25;--link:#a82c15;
--accent:#c4361c;--accent-2:#7f9c7f;--on-accent:#fff;--on-accent-2:#171512;--accent-soft:rgba(196,54,28,.09);--accent-text:#a82c15;
--line:#e2d8c6;--line-strong:#c9bba2;--chip:#efe7d7;--track:#e5dbc8;--ok:#3d7448;--danger:#b42d17;--input-bg:#fffdf8;
--header-bg:rgba(246,241,231,.93);--r:4px;--btn-r:3px;--maxw:1180px;--head-weight:400;--head-track:-.03em;--brand-track:.01em;
--btn-shadow:0 3px 0 #8a2412;--card-shadow:none;--mock-shadow:0 0 0 1px #171512,0 30px 60px rgba(23,21,18,.12);
--sand-lines:repeating-linear-gradient(180deg,transparent 0 13px,rgba(150,128,92,.16) 13px 14px);
--cta-bg:repeating-linear-gradient(180deg,transparent 0 13px,rgba(246,241,231,.06) 13px 14px),#1b1916;
--cta-text:#f6f1e7;--cta-btn:#c4361c;--cta-btn-text:#fff;--toast-bg:#1b1916;
--mock-bg:#fffcf5;--row-bg:#f6f0e4;--marquee-bg:#171512;--marquee-text:#f6f1e7;--est-bg:#1b1916;--foot-bg:#1b1916;--game-host-bg:#eee6d6;
--gart-bg:repeating-linear-gradient(180deg,#efe7d7 0 9px,#ddd0b6 9px 10px);
--g-bg:#f3ecdd;--g-panel:#fffcf5;--g-tile:#fffcf5;--g-tile-text:#171512;--g-accent:#c4361c;--g-accent-2:#7f9c7f;--g-text:#171512;--g-muted:#5c554b;--g-danger:#c4361c;--g-radius:4px;--g-font:var(--font)}

body{font-weight:400}
h1,h2,h3{font-weight:400}
.btn{font-weight:600;letter-spacing:.01em}
.btn.ghost{border:1.5px solid var(--head);color:var(--head)}
.btn.ghost:hover{background:var(--head);color:var(--bg)}
.btn.alt{box-shadow:0 3px 0 #56735a}
.eyebrow{font-weight:600;letter-spacing:.2em;color:var(--accent-text)}
.eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--head);vertical-align:middle;margin:-3px 12px 0 0}
a{text-underline-offset:3px}

/* header: paper with a single hairline */
.top{border-bottom:1px solid var(--line-strong)}
.brand{font-weight:600;font-size:22px}
.site-nav a{font-weight:500;border-radius:0;padding:8px 10px;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current]{background:none;color:var(--head);border-bottom-color:var(--accent)}
.bal-pill{border-radius:3px;background:var(--card);border:1px solid var(--line-strong);font-weight:600}
.menu-btn{border-radius:3px;border-color:var(--head);color:var(--head)}
@media (max-width:980px){.site-nav{border-bottom:1px solid var(--line-strong)}.site-nav a{border-bottom:0;border-left:2px solid transparent}.site-nav a[aria-current]{border-left-color:var(--accent)}}

/* hero: raked sand behind, enso garden on the right */
.hero{background:var(--sand-lines),linear-gradient(180deg,#f6f1e7,#f1eadc);padding-bottom:clamp(56px,7vw,96px);border-bottom:1px solid var(--line-strong)}
.hero h1{font-size:clamp(46px,6.6vw,88px);line-height:1;letter-spacing:-.045em;margin-bottom:.3em}
.hero h1 .hl{color:var(--accent);font-weight:500}
.hero-sub{display:inline-block;margin:0 0 20px;padding:9px 0;border-block:1px solid var(--head);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--head);background:transparent}
.hero .lead{color:#4a443b;font-size:clamp(17px,1.5vw,19px)}
.badge{border-radius:3px;background:var(--card);border:1px solid var(--line-strong);font-weight:600;font-size:13px;letter-spacing:.04em}
.badge i{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.checks{color:#4a443b;font-weight:600}
.checks li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid var(--accent);margin:0 9px 1px 0;vertical-align:middle}
.hero-art-img{display:block;width:min(430px,100%);height:auto;margin:-10px 0 0 auto;position:relative;z-index:0}
.mock{z-index:1;max-width:320px;margin:-150px auto 0 0}
.example-tag{background:var(--accent);color:#fff;border:0;border-radius:2px;letter-spacing:.12em}
.mock-card{border:0;border-radius:4px}
.mock-bal b{font-weight:500;letter-spacing:-.02em}
.mock-bal span{border-radius:2px}
.mock-row{border-radius:3px;border:1px solid var(--line)}
.mock-row .ico{background:var(--card);border:1px solid var(--line);border-radius:3px}
.mock-row em{border-radius:2px}
@media (max-width:900px){.hero-art-img{width:280px;margin:0 auto}.mock{margin:-80px auto 0}}

/* the three key blocks: columns divided by hairlines, an enso around each icon */
.pillars-sec{padding:0;background:var(--card);border-bottom:1px solid var(--line-strong)}
.pillars{gap:0}
.pillar{background:none;border:0;border-radius:0;padding:38px 32px 36px;border-left:1px solid var(--line-strong)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar .fi{width:58px;height:58px;border-radius:0;background:url(/assets/img/enso-red.svg) center/contain no-repeat;color:var(--head);margin-bottom:14px}
.pillar h3{font-size:26px;letter-spacing:-.02em;margin-bottom:8px}
.pillar p{color:#4a443b}
@media (max-width:820px){.pillar{border-left:0;border-top:1px solid var(--line-strong);padding:28px 0}.pillar:first-child{border-top:0}}

/* sections */
.sec-title h2{font-size:clamp(34px,4.6vw,58px);line-height:1.05}
.sec-title p{color:var(--muted)}
.sec + .sec{border-top:1px solid var(--line)}

/* how it works: numbers inside brush circles */
.steps{gap:0}
.step{background:none;border:0;border-radius:0;border-left:1px solid var(--line-strong);padding:6px 30px 10px}
.step:first-child{border-left:0;padding-left:0}
.step::before{content:counter(st);display:grid;place-items:center;width:74px;height:74px;margin-bottom:18px;background:url(/assets/img/enso.svg) center/contain no-repeat;color:var(--head);font-size:26px;font-weight:500;line-height:1}
.step:last-child::before{background-image:url(/assets/img/enso-red.svg)}
.step h3{font-size:24px;letter-spacing:-.02em}
.step p{color:#4a443b}
@media (max-width:860px){.step{border-left:0;border-top:1px solid var(--line-strong);padding:26px 0}.step:first-child{border-top:0;padding-top:0}}

/* stats: hairline columns, vermilion figures */
.stats{gap:0;border-block:1px solid var(--head)}
.stat{background:none;border:0;border-radius:0;border-left:1px solid var(--line-strong);padding:26px 24px}
.stat:first-child{border-left:0}
.stat b{color:var(--accent);font-weight:400;font-size:clamp(38px,4.6vw,56px);letter-spacing:-.03em}
.stat span{color:#4a443b;font-weight:500}
@media (max-width:860px){.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line-strong)}}

/* tabs + big numbers inside an enso */
.tablist{border-radius:3px;background:var(--chip);border:1px solid var(--line)}
.tablist [role=tab]{border-radius:2px;font-weight:600}
.tablist [role=tab][aria-selected=true]{background:var(--head);color:var(--bg)}
.panel-grid h3{letter-spacing:-.02em}
.big-num{background:url(/assets/img/enso.svg) center/100% no-repeat;border-radius:0;padding:56px}
.big-num b{font-weight:400;letter-spacing:-.04em}
.big-num em{display:inline-block;max-width:170px;font-weight:600;font-size:16px;line-height:1.3;color:var(--accent-text)}

/* tables, levels, features, faq */
.rates{border-radius:3px;border-color:var(--line-strong)}
.rates th{background:var(--bg-2);color:#4a443b}
.rates td{border-color:var(--line)}
.rates td b{font-weight:600}
.levels{gap:0;border-block:1px solid var(--line-strong)}
.lvl{background:none;border:0;border-radius:0;border-left:1px solid var(--line-strong);padding:26px 24px}
.lvl:first-child{border-left:0}
.lvl .num{width:54px;height:54px;border-radius:0;background:url(/assets/img/enso.svg) center/contain no-repeat;color:var(--head);font-weight:500;font-size:20px}
.lvl:last-child .num{background-image:url(/assets/img/enso-red.svg)}
.lvl h3{font-size:22px}
.lvl p{color:#4a443b}
@media (max-width:900px){.lvl:nth-child(3){border-left:0}.lvl:nth-child(n+3){border-top:1px solid var(--line-strong)}}
@media (max-width:520px){.lvl{border-left:0!important;border-top:1px solid var(--line-strong)}.lvl:first-child{border-top:0}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:3px}
.feat .fi{border-radius:50%;background:rgba(127,156,127,.2);color:#35553c}
.feat h3{font-weight:500}
.feat p{color:#4a443b}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{font-weight:500}
.faq details p{color:#4a443b}

/* estimator: dark ink panel */
.est{border-radius:3px}
.est-out{border-radius:3px;background:var(--cta-bg)}
.est-out small{color:#cfc6b6}
.est-out b{color:#fffcf5;font-weight:400}
.est-out em{color:#f39a80}

/* closing call to action: ink with raked lines and a red enso */
.cta{border-radius:4px;text-align:left;padding:clamp(40px,6vw,76px)}
.cta::after{content:"";position:absolute;right:-50px;top:50%;width:300px;height:300px;margin-top:-150px;background:url(/assets/img/enso-red.svg) center/contain no-repeat;opacity:.85;pointer-events:none}
.cta h2,.cta p,.cta .btn{position:relative;z-index:1}
.cta h2{font-weight:400;max-width:640px}
.cta p{margin-left:0;max-width:520px;color:#e6dece;opacity:1}
.cta .btn{box-shadow:0 3px 0 #8a2412}
@media (max-width:700px){.cta::after{width:180px;height:180px;right:-60px;top:24px;margin-top:0;opacity:.5}}

.note{border-radius:3px;background:var(--card);border-left:3px solid var(--accent)}

/* footer: ink */
.foot{border-top:0;color:#d9d0c0}
.foot .brand{display:flex;color:#fffcf5}
.foot h4{color:#b9ae9b;letter-spacing:.16em}
.foot a{color:#ece4d4;font-weight:500}
.foot a:hover{color:#fff}
.foot .muted,.foot p.muted{color:#b9ae9b}
.foot .legal{color:#b0a592;border-top-color:#3a3530}
.foot .legal a{display:inline;color:#fffcf5;text-decoration:underline}
.age{color:#fffcf5;border-color:var(--accent)}

/* inner pages */
.page-head{border-bottom:1px solid var(--line);background:var(--sand-lines);padding-bottom:30px;margin-bottom:10px}
.page-head h1{font-size:clamp(40px,5.6vw,72px);letter-spacing:-.04em}
.prose h2{font-size:30px;letter-spacing:-.02em}
.gcard{border-radius:3px;border-color:var(--line-strong)}
.gcard:hover{border-color:var(--head)}
.gcard .g-art{border-bottom:1px solid var(--line-strong)}
.gcard .g-art svg{filter:drop-shadow(0 3px 0 rgba(23,21,18,.08))}
.gcard h3{font-weight:500;letter-spacing:-.02em}
.gcard .g-tiers span{border-radius:2px;background:var(--bg);border:1px solid var(--line-strong)}
.game-host{border-radius:3px;border-color:var(--line-strong)}
.play-side{border-top:3px solid var(--accent)}
.milestones li{border-radius:3px}
.auth-box{border-radius:3px;border-color:var(--line-strong);border-top:3px solid var(--accent)}
.auth-box h1{font-size:38px;letter-spacing:-.03em}
.form input,.form select,.form textarea{border-radius:3px}
.card{border-radius:3px;border-color:var(--line-strong)}
.card.d-bal{background:var(--cta-bg);border:0;color:#fffcf5}
.d-bal b{color:#fffcf5;font-weight:400}
.d-bal small,.d-bal p.muted{color:#cfc6b6}
.d-bal p{color:#fffcf5}
.d-bal a:not(.btn){color:#f39a80}
.days li{border-radius:3px}
.ms-card{border-radius:3px;background:var(--card);border-color:var(--line-strong)}
.st{border-radius:2px}
.toast{border-radius:3px}

@media (max-width:560px){.hero h1{font-size:44px}.sec-title h2{font-size:34px}.hero-sub{font-size:12px;letter-spacing:.1em}.pillar h3{font-size:23px}}