/* Tactical Win */
@font-face{font-family:'Saira Stencil One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sairastencilone-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500.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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-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:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-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}
:root{--font:'Barlow',system-ui,sans-serif;--display:'Saira Stencil One','Arial Black',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; }
}

/*
 * 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) */

:root{--bg:#e8dfc8;--bg-2:#ddd2b5;--card:#f4eedf;--text:#23251b;--head:#15160f;--muted:#55553f;--nav:#d8cfb4;--link:#a8430a;
--accent:#ec6a1e;--accent-2:#4a5228;--on-accent:#15160f;--on-accent-2:#f4eedf;--accent-soft:rgba(236,106,30,.16);--accent-text:#a8430a;
--line:#cfc3a2;--line-strong:#a99c78;--chip:#e2d8bd;--track:#d3c8a8;--ok:#2f7d3a;--danger:#b42318;--input-bg:#fffaf0;
--header-bg:#1d1f15;--r:2px;--btn-r:2px;--maxw:1180px;--head-weight:400;--head-track:.01em;--brand-track:.03em;--mq-size:22px;
--btn-shadow:3px 3px 0 #15160f;--card-shadow:none;--mock-shadow:9px 9px 0 #ec6a1e;
--cta-bg:linear-gradient(rgba(227,207,148,.12) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(227,207,148,.12) 1px,transparent 1px) 0 0/28px 28px,#2c311f;
--cta-text:#f4eedf;--cta-btn:#ec6a1e;--cta-btn-text:#15160f;--toast-bg:#15160f;
--mock-bg:#f4eedf;--row-bg:#e8dfc8;--marquee-bg:#15160f;--marquee-text:#e8dfc8;--est-bg:#2c311f;--foot-bg:#15160f;
--gart-bg:linear-gradient(rgba(21,22,15,.08) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(21,22,15,.08) 1px,transparent 1px) 0 0/18px 18px,#d9cda9;
--game-host-bg:#1d1f15;
--g-bg:#262a1b;--g-panel:#343a24;--g-tile:#434a2e;--g-tile-text:#f1ead6;--g-accent:#ff7a1f;--g-accent-2:#d9c58f;--g-text:#f1ead6;--g-muted:#bdb697;--g-danger:#ff6b57;--g-radius:4px;--g-font:var(--font)}

/* paper with a faint map grid */
body{background:linear-gradient(rgba(21,22,15,.05) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(21,22,15,.05) 1px,transparent 1px) 0 0/32px 32px,#e8dfc8}
h1,h2,.brand,.stat b,.big-num b,.est-out b,.d-bal b,.lvl .num{text-transform:uppercase}
h3,h4{font-family:var(--font);font-weight:700;letter-spacing:.01em}
.brand{font-weight:400}
.btn{text-transform:uppercase;letter-spacing:.07em;font-weight:700;border-color:#15160f}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #15160f}
.btn.ghost{border-color:#15160f;color:#15160f;background:transparent}
.btn.alt{border-color:#15160f}

/* header: dark command bar with an orange rule */
.top{background:#1d1f15;backdrop-filter:none;border-bottom:3px solid #ec6a1e}
.top .brand{color:#f4eedf}
.site-nav a{color:#d8cfb4;border-radius:2px;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
.site-nav a:hover,.site-nav a[aria-current]{color:#fff;background:rgba(244,238,223,.1);box-shadow:inset 0 -2px 0 #ec6a1e}
.top .btn{box-shadow:none}
.top .btn.ghost{color:#f4eedf;border-color:rgba(244,238,223,.55)}
.top .btn:not(.ghost){border-color:#ec6a1e}
.menu-btn{color:#f4eedf;border-color:rgba(244,238,223,.45);border-radius:2px}
.bal-pill{border-radius:2px;background:#e3cf94;color:#15160f}
.bal-pill i{background:#ec6a1e;box-shadow:0 0 0 3px rgba(236,106,30,.3)}
@media (max-width:980px){.site-nav{background:#1d1f15;border-bottom:3px solid #ec6a1e}}

/* stamped labels */
.eyebrow{display:inline-block;padding:3px 10px;border:2px solid currentColor;color:var(--accent-text);font-size:12px;letter-spacing:.2em;transform:rotate(-1.5deg);font-weight:800}
.sec-title h2::after{content:"";display:block;width:min(220px,70%);height:10px;margin-top:14px;
  background:repeating-linear-gradient(90deg,#15160f 0 2px,transparent 2px 11px) left bottom/100% 7px no-repeat,linear-gradient(#15160f,#15160f) left bottom/100% 2px no-repeat}
.sec-title.center h2::after{margin-inline:auto}

/* hero: tactics board on olive with coordinate rulers */
.hero{background:linear-gradient(rgba(227,207,148,.08) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(227,207,148,.08) 1px,transparent 1px) 0 0/40px 40px,#2c311f;padding-bottom:clamp(80px,9vw,120px);padding-top:clamp(60px,8vw,100px)}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:20px;border-bottom:1px solid rgba(227,207,148,.45);
  background:repeating-linear-gradient(90deg,rgba(227,207,148,.55) 0 1px,transparent 1px 10px) left bottom/100% 6px no-repeat,repeating-linear-gradient(90deg,rgba(227,207,148,.9) 0 2px,transparent 2px 100px) left bottom/100% 14px no-repeat}
.hero::after{content:"";position:absolute;left:0;top:20px;bottom:0;width:18px;border-right:1px solid rgba(227,207,148,.45);
  background:repeating-linear-gradient(0deg,rgba(227,207,148,.55) 0 1px,transparent 1px 10px) right top/6px 100% no-repeat,repeating-linear-gradient(0deg,rgba(227,207,148,.9) 0 2px,transparent 2px 100px) right top/14px 100% no-repeat}
.hero h1{font-size:clamp(42px,6.4vw,84px);line-height:.98;color:#f4eedf}
.hero h1 .hl{color:#ff7a1f;display:inline-block;margin-top:.08em}
.hero .badge{background:transparent;color:#e3cf94;border:2px solid #e3cf94;border-radius:2px;text-transform:uppercase;letter-spacing:.12em;font-size:12px;transform:rotate(-1.5deg)}
.hero .badge i{background:#ff7a1f;box-shadow:none;border-radius:0}
.hero-sub{color:#e3cf94;text-transform:uppercase;letter-spacing:.12em;font-size:14px;font-weight:700;margin:4px 0 16px;padding-left:12px;border-left:4px solid #ff7a1f}
.hero .lead{color:#d6cdb0}
.hero .checks{color:#d6cdb0}
.hero .checks li::before{content:"+";color:#ff7a1f}
.hero .btn{box-shadow:4px 4px 0 #e3cf94}
.hero .btn.ghost{color:#f4eedf;border-color:#e3cf94;box-shadow:none}
.hero-art-img{position:absolute;right:-30px;top:-70px;width:440px;max-width:none;z-index:0}
.mock{z-index:1;max-width:330px;margin:200px 0 0 0}
.mock-card{border-radius:2px;border:2px solid #15160f}
.mock-row,.mock-row .ico{border-radius:2px}
.mock-bal span,.mock-row em{border-radius:2px;color:#8a3507;background:rgba(236,106,30,.18)}
.example-tag{border-radius:2px;background:#15160f;color:#e3cf94;border-color:#15160f}
@media (max-width:900px){.hero-art-img{position:relative;right:auto;top:auto;width:min(340px,100%);margin:0 auto;display:block}.mock{margin:-70px auto 0}}

/* mission cards: corner brackets */
.pillar,.step,.feat,.lvl,.stat,.gcard,.card,.ms-card{--bk:#15160f;background:
  linear-gradient(var(--bk),var(--bk)) left top/16px 3px no-repeat,linear-gradient(var(--bk),var(--bk)) left top/3px 16px no-repeat,
  linear-gradient(var(--bk),var(--bk)) right top/16px 3px no-repeat,linear-gradient(var(--bk),var(--bk)) right top/3px 16px no-repeat,
  linear-gradient(var(--bk),var(--bk)) left bottom/16px 3px no-repeat,linear-gradient(var(--bk),var(--bk)) left bottom/3px 16px no-repeat,
  linear-gradient(var(--bk),var(--bk)) right bottom/16px 3px no-repeat,linear-gradient(var(--bk),var(--bk)) right bottom/3px 16px no-repeat,var(--card);
  border:1px solid var(--line);border-radius:2px}
.ms-card{--card:#f4eedf}

/* the three key blocks overlap the bottom of the hero */
.pillars-sec{padding:0 0 10px;margin-top:-56px;position:relative;z-index:2}
.pillars{counter-reset:pl;gap:16px}
.pillar{position:relative;padding:26px 24px 24px;box-shadow:6px 6px 0 #15160f}
.pillar::after{counter-increment:pl;content:"CARD " counter(pl,upper-alpha);position:absolute;right:14px;top:14px;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--accent-text);border:2px solid currentColor;padding:1px 7px;transform:rotate(3deg)}
.pillar .fi{background:#2c311f;color:#ff7a1f;border-radius:2px}
.pillar h3{font-family:var(--display);font-weight:400;font-size:24px;text-transform:uppercase;letter-spacing:.02em}
.pillar p{color:var(--muted)}

/* steps as numbered moves */
.step{padding:30px 26px 28px}
.step::before{content:"MOVE 0" counter(st);display:inline-block;font-size:18px;font-weight:400;padding:3px 10px;border:2px solid var(--accent-text);color:var(--accent-text);transform:rotate(-2deg);margin-bottom:16px}
.step h3{font-size:22px}

/* marquee */
.marquee{border-block:0}
.marquee-track{font-weight:400}
.marquee-track span::after{content:"+";color:#ec6a1e}

/* tabs, panels */
.tablist{border-radius:2px;background:#15160f}
.tablist [role=tab]{border-radius:2px;color:#e3cf94;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.tablist [role=tab][aria-selected=true]{background:#ec6a1e;color:#15160f}
.big-num{border-radius:2px;background:#2c311f;box-shadow:8px 8px 0 #ec6a1e}
.big-num b{color:#f4eedf}
.big-num em{color:#ffa05c}

/* tables */
.rates{border:2px solid #15160f;border-radius:2px}
.rates th{background:#2c311f;color:#e3cf94;letter-spacing:.12em}
.rates td{color:var(--text)}
.rates td b{color:var(--accent-text)}

/* stats */
.stat{border-top:4px solid #ec6a1e}
.stat b{color:var(--head)}

/* estimator */
.est-out{border-radius:2px}
.est-out small{color:#e3cf94}.est-out b{color:#f4eedf}.est-out em{color:#ffa05c}
.est label output{color:var(--accent-text)}

/* levels and features */
.lvl .num{background:#15160f;color:#ff7a1f;border-radius:2px;font-weight:400}
.feat .fi{background:#2c311f;color:#ff7a1f;border-radius:2px}

/* faq */
.faq details{border-bottom:1px dashed var(--line-strong)}
.faq summary::after{color:var(--accent-text)}

/* final call */
.cta{border-radius:2px;border:2px solid #15160f;box-shadow:10px 10px 0 #ec6a1e}
.cta h2{color:#f4eedf}
.cta p{color:#d6cdb0;opacity:1}
.cta .btn{border-color:#15160f;box-shadow:4px 4px 0 #e3cf94}

/* notes, forms, dashboard */
.note{border-radius:2px;border-left:4px solid #ec6a1e}
.form input,.form select,.form textarea{border-radius:2px;border-color:var(--line-strong)}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(236,106,30,.3);border-color:#a8430a}
.days li{border-radius:2px}
.days li.got{background:rgba(236,106,30,.16);border-color:#a8430a}
.days li.now{border-color:#a8430a}
.milestones li{border-radius:2px}
.milestones li.hit{border-color:#a8430a;background:rgba(236,106,30,.14)}
.st{border-radius:2px}
.st-paid{color:#1f5f29;background:rgba(47,125,58,.16)}
.st-pending{color:#8a3507}
.tbl .pos{color:#1f5f29}
.form-msg.ok{color:#1f5f29}
.page-head h1{font-size:clamp(34px,5vw,58px)}
.auth-box h1{font-size:30px}
.toast{border-radius:2px}
.admin-stats div{border-radius:2px}

/* games */
.gcard{background:linear-gradient(var(--bk),var(--bk)) left bottom/16px 3px no-repeat,linear-gradient(var(--bk),var(--bk)) left bottom/3px 16px no-repeat,linear-gradient(var(--bk),var(--bk)) right bottom/16px 3px no-repeat,linear-gradient(var(--bk),var(--bk)) right bottom/3px 16px no-repeat,var(--card)}
.gcard .g-art{border-bottom:2px solid #15160f}
.gcard h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.gcard .g-tiers span{border-radius:2px;background:#15160f;color:#e3cf94}
.game-host{border-radius:2px;border:2px solid #15160f}
.tk-game .g-btn{background:#ff7a1f;color:#15160f;border-radius:2px;box-shadow:3px 3px 0 #000;text-transform:uppercase;letter-spacing:.06em}
.tk-game .g-ov-title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em}

/* footer: dark */
.foot{border-top:3px solid #ec6a1e}
.foot .brand{color:#f4eedf}
.foot .muted{color:#bdb697}
.foot h4{color:#ff8a3d}
.foot a{color:#e3dac0}
.foot a:hover{color:#ff8a3d}
.foot .legal{color:#bdb697;border-top-color:rgba(227,207,148,.25)}
.foot .legal a{display:inline;color:#e3cf94;font-weight:600;margin:0}
.age{color:#f4eedf;border-color:#ff7a1f}

@media (max-width:560px){.pillars-sec{margin-top:-40px}.pillar{box-shadow:4px 4px 0 #15160f}.cta{box-shadow:6px 6px 0 #ec6a1e}}