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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * P2E mini-games, set D (ice / hockey) — penalty, airhockey, slide, blocks, glide.
 * Load after games.css (shell, HUD, buttons, overlays and .g-stage come from there).
 * Theme with the same --g-* variables. Every selector is scoped to its game;
 * set-D helpers use the .g-d- prefix and keyframes use g-d-.
 */

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

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

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

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

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

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

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

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

/*
 * P2E mini-games, set E (cricket & target sports) — batting, bowling, runout, darts, putt.
 * Load after games.css (shell, HUD, buttons, overlays and .g-stage come from there).
 * Theme with the same --g-* variables. Every selector is scoped to its game;
 * set-E helpers use the .g-e- prefix and keyframes use g-e-.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * P2E mini-games, set FK (Footy King matchday) — fkfoos, fkbar, fktackle, fkwall, fkhead.
 * Load after games.css. Every selector is scoped to .fkg or an fkg- class so other sites that load this file
 * are untouched. Scenes are drawn on canvas; this file styles the matchday frame (royal purple with a gold trim),
 * glossy HUD pills, the timer bar, touch pads and the sticker-style start / full-time cards.
 */
.fkg {
  --fkg-ink: #ffffff;
  --fkg-muted: #d9ccff;
  --fkg-gold: #ffc531;
  --fkg-gold2: #ffe27a;
  --fkg-purple: #5b2bd1;
  --fkg-deep: #24104f;
  --fkg-grass: #2bb35f;
  --fkg-red: #ff4b5c;
  max-width: 560px;
  padding: 14px 12px 12px;
  border-radius: 28px;
  border: 0;
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(138, 92, 255, .55), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(43, 179, 95, .35), transparent 60%),
    linear-gradient(165deg, #3a1a92 0%, #24104f 60%, #1b0c3e 100%);
  color: var(--fkg-ink);
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: 0 0 0 3px #ffc531, 0 0 0 6px #24104f, 0 28px 60px rgba(36, 16, 79, .45);
  line-height: 1.35;
}
.fkg:focus-visible { box-shadow: 0 0 0 3px #ffe27a, 0 0 0 6px #5cf0b0, 0 28px 60px rgba(36, 16, 79, .45); }

/* HUD: glossy pills */
.fkg .fkg-hud { gap: 6px; margin-bottom: 9px; }
.fkg .fkg-st {
  position: relative;
  align-items: center;
  text-align: center;
  min-height: 52px;
  padding: 6px 4px 8px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px rgba(10, 0, 30, .3);
  overflow: hidden;
}
.fkg .fkg-st::after { content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 42%; border-radius: 16px 16px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .24), rgba(255, 255, 255, 0)); pointer-events: none; }
.fkg .fkg-st .g-stat-l { color: var(--fkg-muted); font-size: 9.5px; letter-spacing: .14em; font-weight: 800; }
.fkg .fkg-st .g-stat-v { color: #fff; font-size: 21px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(20, 0, 60, .35); }
.fkg .fkg-st-score { background: linear-gradient(165deg, #ffe27a 0%, #ffc531 45%, #f39a12 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(150, 80, 0, .25), 0 8px 18px rgba(255, 170, 0, .35); }
.fkg .fkg-st-score .g-stat-l { color: #5a2c00; }
.fkg .fkg-st-score .g-stat-v { color: #24104f; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.fkg .fkg-st.is-hot { background: linear-gradient(180deg, rgba(92, 240, 176, .5), rgba(43, 179, 95, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 18px rgba(92, 240, 176, .55); }
.fkg .fkg-st.is-hot .g-stat-v { color: #fff; text-shadow: 0 0 12px rgba(92, 240, 176, .95); }
.fkg .fkg-st.is-low { background: linear-gradient(180deg, rgba(255, 75, 92, .6), rgba(255, 75, 92, .25)); }
.fkg .fkg-cm { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.fkg .fkg-cm i { display: block; height: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #5cf0b0, #ffe27a, #ffc531); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); box-shadow: 0 0 8px rgba(255, 197, 49, .8); }
.fkg .fkg-icons { display: flex; justify-content: center; align-items: center; gap: 3px; height: 24px; }
.fkg .fkg-icons i { display: block; width: 18px; height: 18px; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 2px 2px rgba(10, 0, 30, .35)); }
.fkg .fkg-icons svg { display: block; width: 100%; height: 100%; fill: #fff; }
.fkg .fkg-icons-card svg { fill: #ffe14a; }
.fkg .fkg-icons-glove svg { fill: #5cf0b0; }
.fkg .fkg-icons i.is-off { opacity: .22; transform: scale(.72); filter: none; }
.fkg .fkg-icons i.is-off svg { fill: rgba(255, 255, 255, .6); }

/* timer bar */
.fkg .fkg-tbar { height: 9px; margin: 0 2px 10px; border-radius: 9px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; }
.fkg .fkg-tbar .g-bar-fill { border-radius: 9px; background: linear-gradient(90deg, #2bb35f, #5cf0b0 45%, #ffe27a 80%, #ffc531); box-shadow: 0 0 10px rgba(92, 240, 176, .7); transition: none; }
.fkg .fkg-tbar .g-bar-fill.is-low { background: linear-gradient(90deg, #ff4b5c, #ff9a3c); animation: fkg-blink .55s ease-in-out infinite alternate; }
@keyframes fkg-blink { to { opacity: .55; } }

/* stage */
.fkg .fkg-stage {
  border-radius: 20px;
  background: #0c6a35;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 26px rgba(10, 0, 30, .45);
}
.fkg .fkg-stage::before { padding-top: var(--fkg-ar, 120%); }
.fkg .fkg-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), inset 0 0 36px rgba(20, 0, 50, .35); pointer-events: none; }
.fkg .fkg-cap { color: var(--fkg-muted); font-size: 13.5px; min-height: 1.5em; margin-top: 9px; }
.fkg .fkg-cap.g-cap-cta { color: #fff; }

/* touch pad under the stage */
.fkg-pad { display: flex; gap: 8px; align-items: stretch; justify-content: space-between; margin-top: 10px; }
.fkg-pad button {
  -webkit-appearance: none; appearance: none; flex: 1 1 0; min-height: 52px; min-width: 0; padding: 6px 4px; border: 0; border-radius: 16px; cursor: pointer;
  font: 900 13px/1.1 'Rubik', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 6px 12px rgba(10, 0, 30, .3);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.fkg-pad button svg { width: 22px; height: 22px; fill: currentColor; display: block; margin: 0 auto; }
.fkg-pad button.is-down, .fkg-pad button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(10, 0, 30, .3); }
.fkg-pad button.fkg-hot { background: linear-gradient(165deg, #ffe27a, #ffc531 55%, #f39a12); color: #24104f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(150, 80, 0, .3), 0 6px 14px rgba(255, 170, 0, .35); }
.fkg-pad button:focus-visible { outline: 3px solid #5cf0b0; outline-offset: 2px; }

/* overlays: sticker cards */
.fkg .fkg-ov {
  background: radial-gradient(90% 60% at 50% 40%, rgba(91, 43, 209, .38), rgba(20, 6, 46, .74) 72%);
  -webkit-backdrop-filter: blur(5px) saturate(1.2);
  backdrop-filter: blur(5px) saturate(1.2);
  overflow-y: auto;
  align-items: flex-start;
  padding: 14px;
}
.fkg .fkg-ov > .fkg-card { margin: auto; }
.fkg .fkg-card {
  position: relative;
  max-width: 320px;
  padding: 20px 20px 20px;
  border-radius: 24px;
  color: #24104f;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 226, 122, .55), transparent 62%),
    linear-gradient(175deg, #ffffff, #f6f1ff);
  box-shadow: 0 0 0 4px #ffc531, 0 0 0 7px #ffffff, 0 26px 60px rgba(10, 0, 30, .55);
}
.fkg .fkg-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; border-radius: 0 0 24px 0; background: linear-gradient(135deg, transparent 50%, #e9e2fb 50%, #d2c6f3); box-shadow: -2px -2px 4px rgba(36, 16, 79, .12); }
.fkg .fkg-sticker { width: 84px; height: 84px; margin: -2px auto 8px; border-radius: 22px; padding: 7px; background: linear-gradient(150deg, #5b2bd1, #24104f); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ffc531, 0 10px 20px rgba(36, 16, 79, .35); transform: rotate(-4deg); }
.fkg .fkg-sticker svg { display: block; width: 100%; height: 100%; }
.fkg .fkg-tag { display: inline-block; margin-bottom: 6px; padding: 4px 12px; border-radius: 99px; background: #24104f; color: #ffe27a; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.fkg .fkg-tag-ft { background: #2bb35f; color: #fff; }
.fkg .g-ov-title { font-size: 30px; font-weight: 900; letter-spacing: -.01em; line-height: 1.05; color: #24104f; text-transform: uppercase; }
.fkg .g-ov-sub { color: #4a3a78; font-size: 14px; margin: 8px 0 12px; }
.fkg .fkg-keys { margin: 0 0 16px; font-size: 12.5px; color: #5d4d8c; line-height: 2.05; }
.fkg .fkg-keys kbd { display: inline-block; min-width: 23px; padding: 0 6px; margin: 0 1px; border: 0; border-radius: 7px; background: linear-gradient(180deg, #ffffff, #ece6fb); box-shadow: inset 0 -2px 0 rgba(36, 16, 79, .18), 0 0 0 1px rgba(36, 16, 79, .16); color: #24104f; font: 900 11px/21px 'Rubik', system-ui, sans-serif; }
.fkg .fkg-go {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 210px;
  padding: 15px 30px;
  border-radius: 99px;
  overflow: hidden;
  color: #24104f;
  font-size: 18px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(165deg, #ffe27a 0%, #ffc531 50%, #f39a12 100%);
  box-shadow: 0 10px 24px rgba(243, 154, 18, .45), inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -4px 0 rgba(150, 80, 0, .3);
}
.fkg .fkg-go svg { width: 20px; height: 20px; fill: #24104f; flex: 0 0 auto; }
.fkg .fkg-go::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40px; left: -60px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: fkg-shine 2.6s ease-in-out infinite; }
@keyframes fkg-shine { 0%, 55% { left: -60px; } 100% { left: 120%; } }
.fkg .fkg-go:focus-visible { outline: 3px solid #5b2bd1; outline-offset: 3px; }
.fkg .fkg-final { color: #6a5a99; margin: 4px 0 4px; }
.fkg .fkg-final b { color: #5b2bd1; font-size: 56px; font-weight: 900; }
.fkg .fkg-best { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; color: #4a3a78; }
.fkg .fkg-best span { display: inline-flex; align-items: center; gap: 4px; }
.fkg .fkg-best svg { width: 16px; height: 16px; fill: #f39a12; }
.fkg .fkg-best b { color: #24104f; }
.fkg .fkg-best em { font-style: normal; padding: 2px 9px; border-radius: 99px; background: #2bb35f; color: #fff; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fkg .fkg-sum { font-size: 13px; }

@media (max-width: 420px) {
  .fkg { padding: 10px 8px 8px; border-radius: 22px; }
  .fkg .fkg-st { min-height: 46px; border-radius: 14px; }
  .fkg .fkg-st .g-stat-v { font-size: 17px; }
  .fkg .fkg-st .g-stat-l { font-size: 8.5px; letter-spacing: .08em; }
  .fkg .fkg-icons i { width: 14px; height: 14px; }
  .fkg .fkg-card { padding: 16px 14px; }
  .fkg .g-ov-title { font-size: 25px; }
  .fkg .fkg-sticker { width: 66px; height: 66px; }
  .fkg .fkg-keys { margin-bottom: 12px; line-height: 1.9; }
  .fkg .fkg-go { min-width: 180px; padding: 13px 22px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .fkg .fkg-go::after { animation: none; display: none; } .fkg .fkg-tbar .g-bar-fill.is-low { animation: none; } }

/* ---- fkfoos ---- */
@media (max-width: 440px) {
  .fkg-foos .fkg-sticker { display: none; }
  .fkg-foos .fkg-card { padding: 14px 12px; }
  .fkg-foos .g-ov-sub { margin: 6px 0 8px; font-size: 13px; }
  .fkg-foos .fkg-keys { margin-bottom: 10px; font-size: 11.5px; }
}
.fkg.fkg-foos, .fkg.fkg-head { max-width: 680px; }

/* ---- fkbar ---- */
.fkg-bar .fkg-stage { cursor: crosshair; background: #170a3a; }

/* ---- fktackle ---- */
.fkg-tackle .fkg-stage { cursor: pointer; background: #239f52; }
.fkg-tackle .fkg-icons-card i { width: 17px; height: 20px; }
.fkg-tackle .fkg-st-cards.is-low { background: linear-gradient(180deg, rgba(255, 212, 0, .55), rgba(255, 154, 60, .25)); }

/* ---- fkwall ---- */
.fkg-wall .fkg-stage { cursor: grab; background: #1f9a4f; }
.fkg-wall .fkg-stage:active { cursor: grabbing; }

/* ---- fkhead ---- */
.fkg-head .fkg-pad button { font-size: 14px; }
.fkg-head .fkg-pad button[data-k="l"], .fkg-head .fkg-pad button[data-k="r"] { flex: 0.8 1 0; }
.fkg-head .fkg-pad button.fkh-jump { background: linear-gradient(165deg, #8a5cff, #5b2bd1 60%, #3a1a92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(20, 0, 60, .35), 0 6px 14px rgba(91, 43, 209, .4); }
.fkg-head .fkg-pad button.fkg-hot { flex: 1.3 1 0; font-size: 16px; }
.fkg-head .fkg-st-match .g-stat-v { letter-spacing: .02em; }
@media (max-width: 420px) {
  .fkg-head .fkg-pad { gap: 6px; margin-top: 8px; }
  .fkg-head .fkg-pad button { min-height: 50px; font-size: 12px; border-radius: 14px; }
  .fkg-head .fkg-card .g-ov-sub { font-size: 13px; margin: 6px 0 8px; }
  .fkg-head .fkg-sticker { width: 58px; height: 58px; margin-bottom: 6px; }
}

/*
 * 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 JF (Janfutb street football) — jfbank, jfnut, jfrush, jfcans,
 * jfflick. Load after games.css. Every selector is scoped to .jfg or a jfg- class.
 * Look: a die-cut sticker on sunny concrete — off-white card, ink outline with a
 * hard offset shadow, glossy tangerine / electric-blue pills, Permanent Marker titles.
 */
.jfg {
  --jf-ink: #16151c;
  --jf-off: #fbf7ef;
  --jf-tang: #ff6b1a;
  --jf-tang2: #ffa04d;
  --jf-blue: #1f4bff;
  --jf-blue2: #4f86ff;
  --jf-yellow: #ffd23f;
  --jf-mark: "Permanent Marker", "Nunito Sans", system-ui, cursive;
  max-width: 470px;
  padding: 12px 12px 10px;
  border-radius: 26px;
  border: 3px solid var(--jf-ink);
  background:
    radial-gradient(rgba(22, 21, 28, .07) 1px, transparent 1.4px) 0 0 / 9px 9px,
    linear-gradient(170deg, #fffaf1 0%, #f3ead9 100%);
  color: var(--jf-ink);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 7px 0 var(--jf-ink), 0 26px 50px rgba(120, 60, 20, .22);
  line-height: 1.4;
}
.jfg:focus-visible { box-shadow: 0 0 0 4px var(--jf-blue2), 0 7px 0 var(--jf-ink), 0 26px 50px rgba(120, 60, 20, .22); }
.jfg-bank, .jfg-nut, .jfg-rush { max-width: 430px; }

/* HUD: glossy sticker pills */
.jfg .jfg-hud { gap: 7px; margin-bottom: 9px; }
.jfg .jfg-st {
  position: relative;
  align-items: center;
  text-align: center;
  min-height: 52px;
  padding: 6px 4px 9px;
  border-radius: 16px;
  border: 2.5px solid var(--jf-ink);
  background: linear-gradient(180deg, #ffffff, #efe7d8);
  box-shadow: 0 3px 0 var(--jf-ink);
  overflow: hidden;
}
.jfg .jfg-st::after { content: ""; position: absolute; left: 7%; right: 7%; top: 2px; height: 42%; border-radius: 12px 12px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); pointer-events: none; }
.jfg .jfg-st .g-stat-l { color: #5a5348; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; }
.jfg .jfg-st .g-stat-v { color: var(--jf-ink); font-size: 21px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jfg .jfg-st-score { background: linear-gradient(180deg, #ffb26b 0%, var(--jf-tang) 70%, #f05a0a 100%); }
.jfg .jfg-st-score .g-stat-l { color: #3a1806; }
.jfg .jfg-st-time { background: linear-gradient(180deg, var(--jf-blue2) 0%, var(--jf-blue) 75%); }
.jfg .jfg-st-time .g-stat-l { color: #e3eaff; }
.jfg .jfg-st-time .g-stat-v { color: #fff; }
.jfg .jfg-st.is-hot { background: linear-gradient(180deg, #fff3a6, var(--jf-yellow)); }
.jfg .jfg-st.is-low { background: linear-gradient(180deg, #ff8a96, #ff3b4f); }
.jfg .jfg-st.is-low .g-stat-v, .jfg .jfg-st.is-low .g-stat-l { color: #fff; }
.jfg .jfg-cm { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 4px; background: rgba(22, 21, 28, .18); overflow: hidden; }
.jfg .jfg-cm i { display: block; height: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--jf-tang), var(--jf-blue)); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.jfg .jfg-icons { display: flex; justify-content: center; align-items: center; gap: 3px; height: 25px; }
.jfg .jfg-icons i { display: block; width: 19px; height: 19px; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1), filter .25s; }
.jfg .jfg-icons svg { display: block; width: 100%; height: 100%; }
.jfg .jfg-icons i.is-off { opacity: .22; transform: scale(.72); filter: grayscale(1); }

/* timer bar */
.jfg .jfg-tbar { height: 10px; margin: 0 2px 10px; border-radius: 10px; background: var(--jf-ink); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); overflow: hidden; border: 2px solid var(--jf-ink); }
.jfg .jfg-tbar .g-bar-fill { border-radius: 8px; background: linear-gradient(90deg, var(--jf-yellow), var(--jf-tang) 60%, var(--jf-tang)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); transition: none; }
.jfg .jfg-tbar .g-bar-fill.is-low { background: linear-gradient(90deg, #ff3b4f, #ff8a3d); animation: jfg-blink .6s ease-in-out infinite alternate; }

/* stage */
.jfg .jfg-stage {
  border-radius: 18px;
  border: 3px solid var(--jf-ink);
  background: #e2d9c7;
  box-shadow: 0 4px 0 rgba(22, 21, 28, .25);
  cursor: crosshair;
  touch-action: none;
}
.jfg-nut .jfg-stage, .jfg-rush .jfg-stage, .jfg-flick .jfg-stage { cursor: pointer; }
.jfg-bank .jfg-stage::before { padding-top: 137.5%; }
.jfg-nut .jfg-stage::before { padding-top: 131.25%; }
.jfg-rush .jfg-stage::before { padding-top: 143.75%; }
.jfg-cans .jfg-stage::before { padding-top: 88.89%; }
.jfg-flick .jfg-stage::before { padding-top: 83.34%; }
.jfg .g-cap { color: #3d382f; font-size: 13.5px; font-weight: 700; min-height: 1.5em; margin-top: 9px; }
.jfg .g-cap.g-cap-cta { color: var(--jf-ink); }

/* overlays: taped sticker cards */
.jfg .jfg-ov { background: radial-gradient(80% 60% at 50% 45%, rgba(255, 214, 160, .35), rgba(22, 21, 28, .55) 80%); -webkit-backdrop-filter: blur(4px) saturate(1.1); backdrop-filter: blur(4px) saturate(1.1); }
.jfg .jfg-card {
  position: relative;
  max-width: 318px;
  padding: 22px 20px 20px;
  border-radius: 22px;
  border: 3px solid var(--jf-ink);
  background: linear-gradient(170deg, #fffdf8, #f6eddc);
  box-shadow: 0 6px 0 var(--jf-ink), 0 24px 44px rgba(0, 0, 0, .35);
  color: var(--jf-ink);
  transform: rotate(-1.2deg);
}
.jfg .jfg-card::before, .jfg .jfg-card::after { content: ""; position: absolute; top: -12px; width: 74px; height: 24px; background: rgba(255, 210, 63, .82); border: 1px solid rgba(22, 21, 28, .15); box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.jfg .jfg-card::before { left: -16px; transform: rotate(-24deg); }
.jfg .jfg-card::after { right: -16px; transform: rotate(22deg); background: rgba(79, 134, 255, .78); }
.jfg .jfg-ov-end .jfg-card { transform: rotate(1deg); }
.jfg .jfg-emblem { width: 78px; height: 78px; margin: -2px auto 8px; border-radius: 22px; padding: 7px; border: 3px solid var(--jf-ink); background: linear-gradient(160deg, #ffffff, #ffe7cf); box-shadow: 0 4px 0 var(--jf-ink); transform: rotate(4deg); }
.jfg .jfg-emblem svg { display: block; width: 100%; height: 100%; }
.jfg .jfg-tag { display: inline-block; margin-bottom: 6px; padding: 3px 11px; border-radius: 99px; background: var(--jf-blue); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.jfg .g-ov-title { font-family: var(--jf-mark); font-size: 33px; font-weight: 400; letter-spacing: .01em; line-height: 1.05; color: var(--jf-ink); text-shadow: 3px 3px 0 var(--jf-tang2); }
.jfg .g-ov-sub { color: #3d382f; font-size: 14.5px; font-weight: 700; margin: 9px 0 10px; }
.jfg .jfg-keys { margin: 0 0 16px; font-size: 12.5px; font-weight: 700; color: #5a5348; line-height: 2.05; }
.jfg .jfg-keys kbd { display: inline-block; min-width: 23px; padding: 0 6px; margin: 0 1px; border: 2px solid var(--jf-ink); border-radius: 7px; background: #fff; box-shadow: 0 2px 0 var(--jf-ink); color: var(--jf-ink); font: 900 11px/18px "Nunito Sans", system-ui, sans-serif; }
.jfg .jfg-go {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 210px;
  padding: 14px 28px;
  border-radius: 99px;
  border: 3px solid var(--jf-ink);
  background: linear-gradient(180deg, #ffb26b, var(--jf-tang) 65%);
  color: var(--jf-ink);
  font-family: var(--jf-mark);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .04em;
  box-shadow: 0 5px 0 var(--jf-ink), inset 0 2px 0 rgba(255, 255, 255, .55);
  overflow: hidden;
}
.jfg .jfg-go svg { width: 21px; height: 21px; fill: var(--jf-ink); flex: 0 0 auto; }
.jfg .jfg-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: jfg-shine 2.6s ease-in-out infinite; }
.jfg .jfg-go:hover { filter: brightness(1.05); }
.jfg .jfg-go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--jf-ink), inset 0 2px 0 rgba(255, 255, 255, .55); }
.jfg .jfg-go:focus-visible { outline: 3px solid var(--jf-blue); outline-offset: 3px; }
.jfg .jfg-final { margin: 8px 0 2px; color: #5a5348; }
.jfg .jfg-final b { font-family: var(--jf-mark); font-size: 62px; font-weight: 400; color: var(--jf-tang); -webkit-text-stroke: 2px var(--jf-ink); text-shadow: 4px 4px 0 var(--jf-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.jfg .jfg-best { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 14px; font-weight: 800; color: #3d382f; }
.jfg .jfg-best b { color: var(--jf-ink); }
.jfg .jfg-best em { font-style: normal; padding: 2px 10px; border-radius: 99px; background: var(--jf-yellow); border: 2px solid var(--jf-ink); color: var(--jf-ink); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-4deg); }
.jfg .jfg-sum { font-size: 13.5px; margin: 8px 0 16px; color: #3d382f; }

@keyframes jfg-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes jfg-blink { from { opacity: 1; } to { opacity: .55; } }
@media (max-width: 420px) {
  .jfg { padding: 9px 8px 8px; border-radius: 20px; }
  .jfg .jfg-hud { gap: 4px; }
  .jfg .jfg-st { min-height: 46px; border-radius: 13px; padding: 5px 2px 8px; }
  .jfg .jfg-st .g-stat-v { font-size: 17px; }
  .jfg .jfg-st .g-stat-l { font-size: 8.5px; letter-spacing: .05em; }
  .jfg .jfg-icons i { width: 15px; height: 15px; }
  .jfg .jfg-card { padding: 18px 14px 16px; }
  .jfg .g-ov-title { font-size: 27px; }
  .jfg .jfg-emblem { width: 60px; height: 60px; border-radius: 18px; }
  .jfg .jfg-go { min-width: 0; width: 100%; padding: 12px 18px; font-size: 19px; }
  .jfg .jfg-keys { line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) {
  .jfg .jfg-go::after, .jfg .jfg-tbar .g-bar-fill.is-low { animation: none; }
  .jfg .jfg-card, .jfg .jfg-emblem { transform: none; }
}

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

/*
 * P2E mini-games, set LL (Layup League) — llloop, llrebound, llpass, llblock,
 * lldribble. Load after games.css. Every selector is scoped to .llg or an
 * llg- class, so the other sites that load this file are untouched. Scenes are
 * drawn on canvas; this file styles the glossy teal frame, the HUD pills, the
 * timer bar, the touch pad and the cream start / end cards.
 */
.llg {
  --llg-orange: #ff7a1a;
  --llg-orange-d: #c2410c;
  --llg-teal: #0f766e;
  --llg-teal-d: #0b4f4a;
  --llg-cream: #fff6e6;
  --llg-ink: #22140c;
  max-width: 480px;
  padding: 14px 12px 12px;
  border-radius: 28px;
  border: 0;
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(255, 122, 26, .38), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(45, 212, 191, .28), transparent 60%),
    linear-gradient(165deg, #138a80 0%, #0f766e 40%, #0b4f4a 100%);
  color: var(--llg-cream);
  font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 26px 54px rgba(11, 79, 74, .38), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .08);
  line-height: 1.4;
}
.llg:focus-visible { box-shadow: 0 0 0 3px #ffcf4a, 0 26px 54px rgba(11, 79, 74, .38); }

/* HUD: glossy pills */
.llg .llg-hud { gap: 6px; margin-bottom: 9px; }
.llg .llg-pill {
  position: relative;
  align-items: center;
  text-align: center;
  min-height: 52px;
  padding: 6px 4px 7px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 14px rgba(4, 40, 37, .3);
  overflow: hidden;
}
.llg .llg-pill::after { content: ""; position: absolute; left: 10%; right: 10%; top: 3px; height: 38%; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.llg .llg-pill .g-stat-l { color: #c9f2ec; font-size: 9.5px; letter-spacing: .14em; font-weight: 800; }
.llg .llg-pill .g-stat-v { color: #fff; font-family: "Russo One", system-ui, sans-serif; font-weight: 400; font-size: 20px; line-height: 1.15; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(4, 40, 37, .35); }
.llg .llg-pill-score { flex: 1.35 1 0; background: linear-gradient(170deg, #ffb15c 0%, #ff7a1a 50%, #e0560c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 7px 0 #b8440b, 0 12px 20px rgba(194, 65, 12, .35); }
.llg .llg-pill-score .g-stat-l { color: rgba(255, 255, 255, .9); }
.llg .llg-pill-score .g-stat-v { font-size: 23px; text-shadow: 0 2px 0 rgba(120, 40, 0, .45); }
.llg .llg-cm { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .25); overflow: hidden; }
.llg .llg-cm i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #ffcf4a, #ff7a1a); transition: transform .2s ease; }
.llg .llg-pill.is-hot { background: linear-gradient(170deg, #ffd66b, #ff9a3d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 18px rgba(255, 207, 74, .55); }
.llg .llg-pill.is-hot .g-stat-l { color: #6b2a05; }
.llg .llg-pill.is-hot .g-stat-v { color: #fff; text-shadow: 0 2px 0 rgba(150, 60, 0, .5); }
.llg .llg-icons { display: flex; justify-content: center; align-items: center; gap: 3px; height: 26px; }
.llg .llg-icons i { display: block; width: 19px; height: 19px; transition: opacity .25s, transform .25s, filter .25s; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.llg .llg-icons i svg { display: block; width: 100%; height: 100%; }
.llg .llg-icons i.is-off { opacity: .28; transform: scale(.72); filter: grayscale(1); }

.llg .llg-tbar { height: 8px; margin: 0 2px 10px; border-radius: 8px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.llg .llg-tbar .g-bar-fill { border-radius: 8px; background: linear-gradient(90deg, #ffcf4a, #ff7a1a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.llg .llg-tbar .g-bar-fill.is-low { background: linear-gradient(90deg, #ff8a8a, #ff4d5e); animation: llg-blink .8s ease-in-out infinite; }
@keyframes llg-blink { 50% { opacity: .55; } }

.llg .llg-stage {
  border-radius: 20px;
  background: #d99a5c;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 230, .55), 0 8px 18px rgba(4, 40, 37, .35);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.llg .llg-stage::before { padding-top: 125%; }
.llg .llg-stage canvas { border-radius: 20px; }

.llg .llg-cap { color: #d4f5f0; font-size: 13.5px; font-weight: 700; min-height: 1.5em; margin-top: 9px; }
.llg .llg-cap.g-cap-cta { color: #ffcf4a; }

/* touch pad (rebound, swat) */
.llg-pad { display: flex; gap: 8px; margin-top: 10px; }
.llg-pad button {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 5px 0 rgba(4, 40, 37, .45);
  color: #fff;
  font: 400 15px/1 "Russo One", system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.llg-pad button.llg-jump { flex: 1.5 1 0; background: linear-gradient(180deg, #ffb15c, #ff7a1a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 5px 0 #b8440b; }
.llg-pad button:active, .llg-pad button.is-on { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 rgba(4, 40, 37, .45); }
.llg-pad button:focus-visible { outline: 3px solid #ffcf4a; outline-offset: 2px; }

/* overlays: cream cards */
.llg .llg-ov { background: rgba(8, 52, 49, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.llg .llg-card {
  max-width: 318px;
  padding: 24px 22px 22px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fffaf1, #fff0d9);
  color: var(--llg-ink);
  box-shadow: 0 0 0 4px rgba(255, 246, 230, .35), 0 24px 50px rgba(4, 30, 28, .5);
}
.llg-emblem { width: 84px; height: 84px; margin: -2px auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #20b3a6, #0f766e 60%, #0b4f4a); box-shadow: 0 0 0 5px #fff6e6, 0 0 0 8px #ff7a1a, 0 10px 22px rgba(11, 79, 74, .35); }
.llg-emblem svg { width: 62px; height: 62px; }
.llg-tag { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 99px; background: #0f766e; color: #fff6e6; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.llg .llg-card .g-ov-title { font-family: "Russo One", system-ui, sans-serif; font-weight: 400; font-size: 29px; line-height: 1.1; color: #22140c; letter-spacing: .01em; }
.llg .llg-card .g-ov-sub { color: #5c4636; font-size: 14.5px; font-weight: 600; margin: 8px 0 12px; }
.llg-keys { margin: 0 0 16px; font-size: 12.5px; color: #6b5444; line-height: 1.9; font-weight: 600; }
.llg-keys kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin: 0 1px; border-radius: 6px; background: #fff; border: 1px solid #e7cfae; border-bottom-width: 3px; color: #22140c; font: 700 11px/18px "Mulish", system-ui, sans-serif; }
.llg .llg-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffa64d, #ff7a1a 55%, #ec6510);
  color: #fff;
  font-family: "Russo One", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .04em;
  text-shadow: 0 2px 0 rgba(120, 40, 0, .4);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 6px 0 #b8440b, 0 14px 24px rgba(194, 65, 12, .35);
}
.llg .llg-go svg { width: 20px; height: 20px; fill: currentColor; }
.llg .llg-go:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 #b8440b; }
.llg .llg-go:focus-visible { outline: 3px solid #0f766e; outline-offset: 3px; }
.llg .llg-final { color: #7a6250; margin: 8px 0 6px; }
.llg .llg-final b { font-family: "Russo One", system-ui, sans-serif; font-weight: 400; font-size: 58px; color: #ff7a1a; text-shadow: 0 3px 0 #ffd9b0; }
.llg-best { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 800; color: #0b4f4a; }
.llg-best span { padding: 3px 12px; border-radius: 99px; background: rgba(15, 118, 110, .12); }
.llg-best em { font-style: normal; padding: 3px 10px; border-radius: 99px; background: #ffcf4a; color: #4a2a00; animation: llg-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes llg-pop { from { transform: scale(.4); } }
.llg .llg-sum { font-size: 13.5px; }

@media (max-width: 360px) {
  .llg { padding: 10px 8px 8px; border-radius: 22px; }
  .llg .llg-pill { min-height: 46px; border-radius: 14px; }
  .llg .llg-pill .g-stat-v { font-size: 17px; }
  .llg .llg-pill-score .g-stat-v { font-size: 19px; }
  .llg .llg-pill .g-stat-l { font-size: 8.5px; letter-spacing: .08em; }
  .llg .llg-icons i { width: 15px; height: 15px; }
  .llg .llg-card { padding: 18px 14px 16px; }
  .llg .llg-card .g-ov-title { font-size: 24px; }
  .llg-emblem { width: 66px; height: 66px; }
  .llg-emblem svg { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .llg .llg-tbar .g-bar-fill.is-low { animation: none; }
  .llg-best em { animation: none; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * P2E mini-games, set NF (Newsfee broadsheet): nfpaper, nfsort, nfhop, nfmaze, nfpress, nfweather, nfproof,
 * nfticker, nfscoop, nfswitch. Load after games.css (shell, HUD, overlays, .g-stage come from there). Every
 * selector is scoped to .nfg-g or an nfg- class, so other sites that load this file are untouched.
 * Look: newsprint panel with a black double rule on top, square HUD cells, a red spot colour, Playfair headlines.
 */
.nfg-g {
  max-width: 440px;
  padding: 14px 12px 12px;
  border-radius: 0;
  border: 1px solid #161512;
  border-top: 5px double #161512;
  background: #f6f2e8;
  color: #161512;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  line-height: 1.4;
}
.nfg-g .g-hud { gap: 0; border: 1px solid #161512; margin-bottom: 8px; }
.nfg-g .g-stat { border-radius: 0; background: #fffdf8; border-left: 1px solid #cbc2ad; padding: 5px 6px 4px; align-items: center; text-align: center; }
.nfg-g .g-stat:first-child { border-left: 0; background: #161512; }
.nfg-g .g-stat-l { color: #57524a; font-size: 9.5px; letter-spacing: .1em; font-weight: 600; }
.nfg-g .g-stat:first-child .g-stat-l { color: #d8d0bf; }
.nfg-g .g-stat-v { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: 19px; color: #161512; font-variant-numeric: lining-nums tabular-nums; }
.nfg-g .g-stat:first-child .g-stat-v { color: #f6f2e8; }
.nfg-pips { display: flex; justify-content: center; align-items: center; gap: 4px; height: 25px; flex-wrap: wrap; }
.nfg-pips i { display: block; width: 9px; height: 9px; background: #b3121f; transition: opacity .2s, transform .2s; }
.nfg-pips i.is-off { opacity: .2; transform: scale(.6); background: #57524a; }
.nfg-g .g-bar { height: 4px; margin: 0 0 8px; border-radius: 0; background: #ddd5c2; }
.nfg-g .g-bar-fill { background: #161512; }
.nfg-g .g-bar-fill.is-low { background: #b3121f; }
.nfg-g .g-stage { border-radius: 0; border: 1px solid #161512; background: #f6f2e8; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.nfg-g .g-stage::before { padding-top: var(--nfg-r, 125%); }
.nfg-maze .g-stage, .nfg-scoop .g-stage { cursor: crosshair; }
.nfg-weather .g-stage, .nfg-switch .g-stage { cursor: grab; }
.nfg-g .g-cap { color: #57524a; font-size: 13px; min-height: 1.4em; }
.nfg-g .g-cap.g-cap-cta { color: #161512; }
.nfg-g .g-overlay { background: rgba(246, 242, 232, .8); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.nfg-g .g-ov-card { border-radius: 0; background: #fffdf8; border: 1px solid #161512; border-top: 5px double #161512; box-shadow: 8px 8px 0 rgba(22, 21, 18, .12); max-width: 320px; }
.nfg-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #a1101c; margin-bottom: 4px; }
.nfg-g .g-ov-title { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: 28px; color: #161512; line-height: 1.05; }
.nfg-g .g-ov-sub { color: #3d3a33; font-size: 14px; margin: 8px 0 10px; }
.nfg-keys { font-size: 12px; color: #57524a; margin: 0 0 14px; line-height: 1.7; }
.nfg-keys kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid #161512; background: #f6f2e8; font: 600 11px/18px "IBM Plex Sans", system-ui, sans-serif; color: #161512; text-align: center; }
.nfg-g .g-btn { border-radius: 0; background: #b3121f; color: #fff; box-shadow: none; font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: .03em; padding: 12px 30px; border: 2px solid #b3121f; }
.nfg-g .g-btn:hover { background: #8f0e18; filter: none; }
.nfg-g .g-btn:focus-visible { outline: 3px solid #161512; outline-offset: 2px; }
.nfg-g .g-ov-score { color: #57524a; }
.nfg-g .g-ov-score b { font-family: "Playfair Display", Georgia, serif; font-weight: 900; color: #161512; }
.nfg-pad { display: flex; gap: 6px; margin-top: 8px; }
.nfg-pb {
  -webkit-appearance: none; appearance: none; flex: 1 1 0; min-width: 0; min-height: 46px; padding: 6px 4px;
  border: 1px solid #161512; border-radius: 0; background: #fffdf8; color: #161512;
  font: 600 14px/1.1 "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .1s, color .1s;
}
.nfg-hop .nfg-pb { font-size: 22px; }
.nfg-pb:focus-visible { outline: 2px solid #b3121f; outline-offset: 2px; }
.nfg-pb.is-on, .nfg-pb:active { background: #161512; color: #f6f2e8; }
@media (max-width: 360px) { .nfg-g { padding: 10px 6px 8px; } .nfg-g .g-stat-v { font-size: 16px; } .nfg-pb { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .nfg-g .g-cap.g-cap-cta { animation: none; } .nfg-pips i { transition: none; } }

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

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

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

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

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

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

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

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

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

/*
 * Games set P (Jajfutb, night-match football): fbcurl, fbkeeper, fbdribble,
 * fbheader, fbrondo. Load after games.css. Every selector is scoped to .fb-g or
 * an fb- class, so the other sites that load this file are untouched. Scenes are
 * drawn on canvas by the scripts; this file styles the scoreboard HUD, the
 * lives, the overlays and the buttons.
 */
.fb-g {
  max-width: 500px;
  padding: 12px;
  border-radius: 6px;
  background: #07130b;
  color: #f4f7ef;
  box-shadow: inset 0 0 0 2px #1d3a26;
  font-family: var(--font, system-ui, sans-serif);
}
.fb-g:focus-visible { box-shadow: inset 0 0 0 2px #1d3a26, 0 0 0 3px #d7ff3a; }

/* HUD: four scoreboard cells with LED-style digits */
.fb-g .g-hud { gap: 5px; }
.fb-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 5px 4px 4px;
  border-radius: 3px;
  background: #000;
  box-shadow: inset 0 0 0 1px #24412d;
}
.fb-g .g-stat-l { color: #a9c4ae; font-size: 9.5px; letter-spacing: .1em; }
.fb-g .g-stat-v {
  color: #d7ff3a;
  font-family: var(--display, "Arial Narrow", sans-serif);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(215, 255, 58, .35);
}
.fb-lives { display: flex; justify-content: center; align-items: center; gap: 5px; height: 25px; }
.fb-lives i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #07130b 0 28%, #f4f7ef 30%);
  box-shadow: 0 0 0 1.5px #f4f7ef;
  transition: opacity .2s, transform .2s;
}
.fb-lives i.is-off { opacity: .22; transform: scale(.7); }

.fb-g .g-bar { height: 5px; border-radius: 0; margin: 0 0 8px; background: #1d3a26; }
.fb-g .g-bar-fill { background: #d7ff3a; }
.fb-g .g-bar-fill.is-low { background: #e8323c; }
.fb-g .g-cap { color: #a9c4ae; font-size: 14px; min-height: 1.3em; }
.fb-g .g-cap.g-cap-cta { color: #f4f7ef; }

/* stage: 4:5 pitch with a chalk frame */
.fb-g .fb-stage { border-radius: 3px; background: #0d4f27; box-shadow: inset 0 0 0 2px rgba(244, 247, 239, .25); cursor: crosshair; }
.fb-g .fb-stage::before { padding-top: 125%; }

/* buttons + overlays */
.fb-g .g-btn {
  color: #07130b;
  background: #d7ff3a;
  border-radius: 3px;
  font-family: var(--display, "Arial Narrow", sans-serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 28px 8px;
  box-shadow: 0 4px 0 #7f9a12, 0 10px 22px rgba(0, 0, 0, .35);
}
.fb-g .g-btn:active { box-shadow: 0 2px 0 #7f9a12; }
.fb-g .g-btn:focus-visible { outline: 3px solid #f4f7ef; }
.fb-g .g-overlay { background: rgba(4, 12, 7, .74); }
.fb-g .g-ov-card {
  max-width: 320px;
  background: #f4f7ef;
  color: #07130b;
  border-radius: 4px;
  border-top: 8px solid #d7ff3a;
  box-shadow: 0 0 0 2px #07130b, 0 22px 44px rgba(0, 0, 0, .45);
  padding: 18px 18px 20px;
}
.fb-ov-kick {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px 2px;
  background: #07130b;
  color: #d7ff3a;
  font-family: var(--display, "Arial Narrow", sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fb-g .g-ov-title { color: #07130b; font-family: var(--display, "Arial Narrow", sans-serif); font-size: 32px; font-weight: 900; text-transform: uppercase; line-height: 1; }
.fb-g .g-ov-sub { color: #33463a; font-size: 14px; line-height: 1.45; }
.fb-keys { margin: -6px 0 16px; font-size: 12px; font-weight: 700; color: #4d6253; letter-spacing: .02em; }
.fb-g .g-ov-score { color: #4d6253; }
.fb-g .g-ov-score b { color: #07130b; font-family: var(--display, "Arial Narrow", sans-serif); font-size: 64px; font-weight: 900; }

@media (max-width: 380px) {
  .fb-g { padding: 8px; }
  .fb-g .g-stat-v { font-size: 21px; }
  .fb-g .g-stat-l { font-size: 8.5px; letter-spacing: .06em; }
  .fb-g .g-ov-title { font-size: 27px; }
  .fb-g .g-ov-sub { font-size: 13px; }
}

/*
 * Games set Q: alavalanche, algoat, alcable, altobog, alcheese (Swiss Gaming Zone, "alpine").
 * Every selector is scoped to .al-g so other sites that load this file are untouched.
 * Canvases are drawn by the scripts; this file styles the HUD, overlays and controls.
 */
.al-g { max-width: 500px; background: #f4f8fb; border: 1px solid #c9d6e1; border-radius: 4px; color: #0b2235; }

/* HUD: hairline cells like a timetable */
.al-g .g-hud { gap: 0; border: 1px solid #0b3a5b; border-radius: 2px; background: #fff; overflow: hidden; }
.al-g .g-stat { border-radius: 0; background: #fff; padding: 6px 8px 5px; border-left: 1px solid #c9d6e1; }
.al-g .g-stat:first-child { border-left: 0; }
.al-g .g-stat-l { color: #4a6378; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.al-g .g-stat-v { color: #0b2235; font-family: var(--display, system-ui, sans-serif); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.al-g .g-stat:first-child .g-stat-v { color: #d7261e; }
.al-g .g-stat.al-warn { background: #d7261e; }
.al-g .g-stat.al-warn .g-stat-l, .al-g .g-stat.al-warn .g-stat-v { color: #fff; }
.al-g .g-bar { height: 4px; border-radius: 0; background: #dfe8ef; margin: 8px 0 10px; }
.al-g .g-bar-fill { background: #0b3a5b; }
.al-g .g-bar-fill.is-low { background: #d7261e; }

/* lives as three small signal squares */
.al-lives { display: flex; gap: 4px; height: 23px; align-items: center; }
.al-lives i { width: 12px; height: 12px; background: #d7261e; border-radius: 1px; transform: rotate(45deg) scale(.85); transition: background .2s, transform .2s; }
.al-lives i.is-off { background: #c9d6e1; transform: rotate(45deg) scale(.6); }

/* stage aspect ratios match the canvas sizes in the scripts */
.al-g .g-stage { border-radius: 2px; background: #eaf3fa; border: 1px solid #c9d6e1; }
.al-g .al-stage-tall::before { padding-top: 125%; }
.al-g .al-stage-cliff::before, .al-g .al-stage-valley::before { padding-top: 131.25%; }
.al-g .g-cap { color: #4a6378; font-weight: 600; }
.al-g .g-cap.g-cap-cta { color: #0b2235; }

/* overlays: white card with a red top rule and a yellow trail-sign kicker */
.al-g .al-ov { background: rgba(11, 34, 53, .55); }
.al-g .g-ov-card { background: #fff; color: #0b2235; border-radius: 2px; border-top: 6px solid #d7261e; box-shadow: 0 18px 40px rgba(11, 34, 53, .35); }
.al-g .g-ov-title { font-family: var(--display, system-ui, sans-serif); font-weight: 700; font-size: 21px; color: #0b2235; letter-spacing: -.01em; }
.al-g .g-ov-sub { color: #3d5468; line-height: 1.45; }
.al-g .g-ov-score { color: #4a6378; }
.al-g .g-ov-score b { color: #0b2235; font-family: var(--display, system-ui, sans-serif); font-weight: 800; }
.al-ov-kicker { display: inline-block; position: relative; margin: 0 0 10px; padding: 4px 18px 4px 10px; background: #f6c400; color: #0b2235; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.al-keys { margin: -6px 0 16px; font-size: 12px; font-weight: 700; color: #0b3a5b; letter-spacing: .02em; }
.al-g .g-btn { background: #d7261e; color: #fff; border-radius: 2px; font-family: var(--display, system-ui, sans-serif); font-weight: 700; letter-spacing: .02em; box-shadow: 0 3px 0 #8f1913; }
.al-g .g-btn:focus-visible { outline-color: #0b3a5b; }

/* goat: three jump buttons under the cliff */
.al-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.al-pad-b { -webkit-appearance: none; appearance: none; border: 1px solid #0b3a5b; background: #fff; color: #0b3a5b; font: inherit; font-size: 24px; font-weight: 800; line-height: 1; padding: 12px 0; border-radius: 2px; cursor: pointer; touch-action: manipulation; }
.al-pad-b:active { background: #0b3a5b; color: #fff; }
.al-pad-b:focus-visible { outline: 3px solid #f6c400; outline-offset: 1px; }

@media (max-width: 380px) {
  .al-g .g-stat { padding: 5px 5px 4px; }
  .al-g .g-stat-l { font-size: 8.5px; letter-spacing: .04em; }
  .al-g .g-stat-v { font-size: 16px; }
  .al-lives i { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-lives i { transition: none; }
}

/*
 * P2E mini-games, set R (spell-casting league) — sprune, spshield, spbroom,
 * spcauldron, spcrystal. Load after games.css (shell, HUD, overlays, .g-stage
 * come from there). Every selector is scoped to .sp-g or an sp- class, so the
 * other sites that load this file are untouched. Scenes are drawn on canvas;
 * this file styles the violet frame, translucent HUD, hearts, pads, white overlays.
 */
.sp-g {
  max-width: 470px;
  padding: 12px;
  border-radius: 26px;
  background: linear-gradient(180deg, #2a1d78 0%, #1d1550 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(22, 18, 46, .06), 0 24px 50px rgba(40, 20, 120, .22);
  word-break: keep-all;
  line-height: 1.45;
}

/* HUD: soft translucent chips, white numbers */
.sp-g .g-hud { gap: 6px; }
.sp-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
  box-shadow: none;
}
.sp-g .g-stat-l { color: rgba(255, 255, 255, .72); font-size: 11.5px; letter-spacing: 0; font-weight: 700; }
.sp-g .g-stat-v { color: #ffffff; font-size: 20px; font-weight: 800; font-family: inherit; font-variant-numeric: tabular-nums; }
.sp-g .g-stat.is-hot { background: #3ee8b5; }
.sp-g .g-stat.is-hot .g-stat-l, .sp-g .g-stat.is-hot .g-stat-v { color: #0d3d30; }

.sp-hearts { display: flex; justify-content: center; align-items: center; gap: 5px; height: 26px; }
.sp-hearts i {
  width: 12px; height: 12px; display: block;
  background: #ff7aa8;
  transform: rotate(45deg);
  border-radius: 3px 0 3px 3px;
  box-shadow: 0 0 6px rgba(255, 122, 168, .7);
  transition: opacity .2s, transform .2s;
}
.sp-hearts i.is-off { opacity: .2; box-shadow: none; transform: rotate(45deg) scale(.7); background: rgba(255, 255, 255, .5); }

.sp-g .g-bar { height: 6px; margin: 0 0 10px; background: rgba(255, 255, 255, .14); }
.sp-g .g-bar-fill { background: linear-gradient(90deg, #3ee8b5, #8fd3ff); }
.sp-g .g-bar-fill.is-low { background: #ff7aa8; }
.sp-g.sp-crystal .sp-mana { height: 9px; }

.sp-g .g-stage {
  border-radius: 18px;
  background: #141a46;
  box-shadow: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.sp-rune .g-stage::before { padding-top: 137.5%; }
.sp-shield .g-stage::before { padding-top: 125%; }
.sp-broom .g-stage::before { padding-top: 112.5%; }
.sp-cauldron .g-stage::before { padding-top: 131.25%; }
.sp-crystal .g-stage::before { padding-top: 118.75%; }
.sp-rune .g-stage, .sp-crystal .g-stage { cursor: crosshair; }
.sp-shield .g-stage { cursor: grab; }
.sp-broom .g-stage { cursor: ns-resize; }

/* on-screen pads */
.sp-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.sp-pad.sp-pad-2 { grid-template-columns: 1fr 1fr; }
.sp-pad-b {
  -webkit-appearance: none; appearance: none;
  min-height: 48px; border: 0; border-radius: 14px; cursor: pointer;
  font: 800 22px/1 system-ui, sans-serif;
  color: #4b25d6; background: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  touch-action: manipulation;
}
.sp-pad-b:active { transform: translateY(1px); box-shadow: none; background: #e1f7ef; }
.sp-pad-b:focus-visible { outline: 3px solid #3ee8b5; outline-offset: 2px; }

.sp-g .g-cap { color: rgba(255, 255, 255, .78); font-size: 13.5px; min-height: 1.5em; word-break: keep-all; }
.sp-g .g-cap.g-cap-cta { color: #3ee8b5; font-weight: 700; }

/* overlays: a clean white card with a violet start button */
.sp-g .g-overlay { background: rgba(22, 14, 60, .45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sp-g .g-ov-card {
  max-width: 330px;
  border-radius: 22px;
  background: #ffffff;
  color: #16122e;
  border: 0;
  box-shadow: 0 24px 50px rgba(10, 6, 40, .4);
}
.sp-g .g-ov-title { font-size: 23px; font-weight: 800; color: #16122e; letter-spacing: -.03em; }
.sp-g .g-ov-sub { color: #5b5776; font-size: 14.5px; line-height: 1.65; word-break: keep-all; text-align: left; }
.sp-g .g-ov-score { color: #6a6684; letter-spacing: 0; }
.sp-g .g-ov-score b { color: #4b25d6; font-family: inherit; font-weight: 800; }
.sp-ov-rune { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; color: #4b25d6; font: 800 18px/1 system-ui, sans-serif; letter-spacing: .1em; }
.sp-ov-rune i { width: 14px; height: 14px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(22, 18, 46, .15); }
.sp-keys { margin: -6px 0 16px; padding: 6px 10px; border-radius: 10px; background: #f3f0ff; font-size: 12.5px; font-weight: 700; color: #4b25d6; word-break: keep-all; }
.sp-g .g-btn { min-width: 160px; border-radius: 14px; background: #5b34e8; color: #ffffff; font-weight: 800; box-shadow: 0 8px 18px rgba(91, 52, 232, .35); }

@media (max-width: 380px) {
  .sp-g { padding: 9px; }
  .sp-g .g-stat-v { font-size: 17px; }
  .sp-g .g-stat-l { font-size: 10px; }
  .sp-pad-b { min-height: 42px; }
}
.sp-g .g-overlay, .sp-g .g-ov-card { animation: none; }

/*
 * P2E mini-games, set RN (The Power of Running) — rnpace, rnbaton, rnorient, rnhurdle, rnlast.
 * Load after games.css. Every selector is scoped to .rng-g or an rng- class, so the other sites that load
 * this file are untouched. Scenes are drawn on canvas; this file styles the sunrise frame, the glossy HUD
 * pills, the stamina gauge, the race-bib start / finish cards and the touch pads.
 */
.rng-g {
  --rng-navy: #16245e;
  --rng-ink: #1b1747;
  --rng-coral: #ff6f61;
  --rng-hot: #ff4a2e;
  --rng-orange: #ff9a1f;
  --rng-sun: #ffd23f;
  --rng-sky: #38b0ff;
  --rng-mint: #22d99a;
  max-width: 480px;
  padding: 14px 12px 12px;
  border-radius: 28px;
  border: 0;
  color: var(--rng-navy);
  font-family: Kanit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.35;
  background:
    repeating-linear-gradient(-12deg, transparent 0 34px, rgba(255, 255, 255, .13) 34px 37px, transparent 37px 70px),
    radial-gradient(120% 70% at 100% 0%, rgba(255, 210, 63, .55), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(56, 176, 255, .55), transparent 62%),
    linear-gradient(160deg, #ff8a5c 0%, #ff6f61 38%, #ff5c8a 70%, #7a7cff 100%);
  box-shadow: 0 26px 56px -18px rgba(255, 74, 46, .55), 0 2px 0 rgba(255, 255, 255, .35) inset, 0 0 0 1px rgba(255, 255, 255, .2) inset;
}
.rng-g:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rng-navy), 0 26px 56px -18px rgba(255, 74, 46, .55); }

/* HUD: glossy white pills, score pill in sunrise orange */
.rng-g .rng-hud { gap: 6px; margin-bottom: 9px; }
.rng-g .rng-st {
  position: relative;
  align-items: center;
  text-align: center;
  min-height: 52px;
  padding: 6px 4px 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #eef3ff);
  box-shadow: inset 0 -3px 0 rgba(22, 36, 94, .08), 0 6px 14px rgba(120, 20, 40, .22);
  overflow: hidden;
}
.rng-g .rng-st::after { content: ""; position: absolute; left: 10%; right: 10%; top: 2px; height: 38%; border-radius: 16px 16px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); pointer-events: none; }
.rng-g .rng-st .g-stat-l { color: #5a6597; font-size: 9.5px; letter-spacing: .14em; font-weight: 700; font-style: italic; }
.rng-g .rng-st .g-stat-v { color: var(--rng-navy); font-size: 21px; font-weight: 800; font-style: italic; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rng-g .rng-st-score { background: linear-gradient(160deg, #ffd23f 0%, #ff9a1f 55%, #ff4a2e 100%); box-shadow: inset 0 -3px 0 rgba(150, 30, 0, .18), 0 8px 18px rgba(255, 74, 46, .4); }
.rng-g .rng-st-score .g-stat-l { color: rgba(80, 20, 0, .8); }
.rng-g .rng-st-score .g-stat-v { color: #fff; text-shadow: 0 2px 0 rgba(160, 40, 0, .45); }
.rng-g .rng-st.is-hot { background: linear-gradient(180deg, #d9fff0, #a6f5d6); box-shadow: inset 0 -3px 0 rgba(0, 120, 80, .15), 0 0 0 2px #22d99a, 0 6px 16px rgba(34, 217, 154, .45); }
.rng-g .rng-st.is-hot .g-stat-v { color: #057a55; }
.rng-g .rng-st.is-low { background: linear-gradient(180deg, #fff1ee, #ffd2ca); box-shadow: 0 0 0 2px #ff4a2e, 0 6px 14px rgba(255, 74, 46, .4); }
.rng-g .rng-st.is-low .g-stat-v { color: #c62a12; }
.rng-g .rng-cm { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 4px; border-radius: 4px; background: rgba(22, 36, 94, .12); overflow: hidden; }
.rng-g .rng-cm i { display: block; height: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #22d99a, #38b0ff); transition: transform .2s ease-out; }
.rng-g .rng-gauge { display: block; width: 84%; height: 12px; margin: 5px auto 2px; border-radius: 12px; background: #dfe5f6; box-shadow: inset 0 1px 2px rgba(22, 36, 94, .25); overflow: hidden; }
.rng-g .rng-gauge i { display: block; height: 100%; border-radius: 12px; transform-origin: left center; transform: scaleX(1); background: linear-gradient(90deg, #22d99a, #9be15d 60%, #ffd23f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.rng-g .rng-st.is-low .rng-gauge i { background: linear-gradient(90deg, #ff4a2e, #ff9a1f); }
.rng-g .rng-icons { display: flex; justify-content: center; align-items: center; gap: 3px; height: 24px; }
.rng-g .rng-icons i { display: block; width: 18px; height: 18px; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.rng-g .rng-icons svg { display: block; width: 100%; height: 100%; fill: var(--rng-hot); filter: drop-shadow(0 1px 0 rgba(120, 20, 0, .3)); }
.rng-g .rng-icons i.is-off { opacity: .22; transform: scale(.7) rotate(-20deg); }
.rng-g .rng-icons i.is-off svg { fill: #6c76a8; }

/* time bar: a running track with a finish flag */
.rng-g .rng-tbar { position: relative; height: 10px; margin: 0 2px 10px; border-radius: 10px; overflow: visible; background: rgba(22, 36, 94, .28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.rng-g .rng-tbar .g-bar-fill { border-radius: 10px; transition: none; background: repeating-linear-gradient(90deg, #fff 0 10px, #ffe9c2 10px 20px); box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.rng-g .rng-tbar .g-bar-fill.is-low { background: repeating-linear-gradient(90deg, #ffd23f 0 10px, #ff9a1f 10px 20px); animation: rng-blink .5s ease-in-out infinite alternate; }
.rng-g .rng-tbar-flag { position: absolute; right: -2px; top: -5px; width: 14px; height: 20px; border-radius: 3px; background: conic-gradient(#16245e 25%, #fff 0 50%, #16245e 0 75%, #fff 0) 0 0 / 7px 7px; box-shadow: 0 0 0 2px #fff; }

/* stage */
.rng-g .rng-stage { border-radius: 20px; background: #4fb6ff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 12px 26px rgba(120, 20, 40, .35); cursor: pointer; }
.rng-g .rng-stage::before { padding-top: 116.6667%; }
.rng-g .rng-cap { color: #fff; font-size: 13.5px; font-weight: 500; min-height: 1.5em; margin-top: 10px; text-shadow: 0 1px 2px rgba(120, 20, 40, .45); }
.rng-g .rng-cap.g-cap-cta { color: #fff; font-weight: 700; }

/* touch pads (Baton Pass, Last Mile) */
.rng-pad { display: flex; gap: 8px; margin-top: 10px; }
.rng-pad button {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 0; min-height: 52px; padding: 6px 8px;
  border: 0; border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #e9efff);
  color: var(--rng-navy, #16245e);
  font: italic 800 15px/1.1 Kanit, system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: inset 0 -4px 0 rgba(22, 36, 94, .14), 0 6px 14px rgba(120, 20, 40, .25);
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
}
.rng-pad button:active, .rng-pad button.is-on { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(22, 36, 94, .14), 0 3px 8px rgba(120, 20, 40, .25); }
.rng-pad button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rng-pad .rng-pad-main { flex: 1.5 1 0; color: #fff; background: linear-gradient(150deg, #ffd23f, #ff9a1f 45%, #ff4a2e); text-shadow: 0 1px 0 rgba(140, 30, 0, .45); box-shadow: inset 0 -4px 0 rgba(140, 30, 0, .25), 0 8px 18px rgba(255, 74, 46, .45); }
.rng-pad small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; opacity: .75; }

/* overlays: race-bib cards */
.rng-g .rng-ov { background: radial-gradient(90% 60% at 50% 35%, rgba(255, 210, 63, .35), rgba(22, 36, 94, .55) 75%); -webkit-backdrop-filter: blur(4px) saturate(1.2); backdrop-filter: blur(4px) saturate(1.2); }
.rng-g .rng-card {
  position: relative;
  max-width: 318px;
  padding: 0 20px 20px;
  border-radius: 20px;
  overflow: hidden;
  background: #fffdf8;
  color: var(--rng-navy);
  box-shadow: 0 26px 56px rgba(22, 36, 94, .5), 0 0 0 1px rgba(22, 36, 94, .08);
}
.rng-card-band {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -20px 12px; padding: 10px 22px 8px;
  background: linear-gradient(100deg, #ff4a2e, #ff9a1f 55%, #ffd23f);
  color: #fff; text-align: left;
}
.rng-card-band span { font-size: 11px; font-weight: 700; font-style: italic; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(140, 30, 0, .4); }
.rng-card-band b { font-size: 40px; line-height: .9; font-weight: 900; font-style: italic; letter-spacing: -.02em; text-shadow: 0 3px 0 rgba(140, 30, 0, .35); }
.rng-pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 1px 2px rgba(22, 36, 94, .4), 0 0 0 2px rgba(22, 36, 94, .12); z-index: 2; }
.rng-pin-a { left: 9px; top: 9px; } .rng-pin-b { right: 9px; top: 9px; } .rng-pin-c { left: 9px; bottom: 9px; } .rng-pin-d { right: 9px; bottom: 9px; }
.rng-emblem { width: 72px; height: 72px; margin: 2px auto 6px; padding: 8px; border-radius: 22px; background: linear-gradient(160deg, #eaf6ff, #ffe9de); box-shadow: inset 0 -3px 0 rgba(22, 36, 94, .08); }
.rng-emblem svg { display: block; width: 100%; height: 100%; }
.rng-g .rng-card .g-ov-title { font-size: 31px; font-weight: 900; font-style: italic; letter-spacing: -.015em; line-height: 1.05; color: var(--rng-navy); }
.rng-g .rng-card .g-ov-sub { color: #47527f; font-size: 14px; margin: 8px 0 10px; }
.rng-keys { margin: 0 0 16px; font-size: 12px; color: #5a6597; line-height: 2; }
.rng-keys kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin: 0 1px; border-radius: 7px; background: #eef2ff; box-shadow: inset 0 -2px 0 rgba(22, 36, 94, .18); color: var(--rng-navy); font: 700 11px/20px Kanit, system-ui, sans-serif; }
.rng-g .rng-go {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 210px; padding: 14px 30px;
  border-radius: 999px; overflow: hidden;
  color: #fff; font-size: 18px; font-weight: 800; font-style: italic; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(120deg, #ff4a2e 0%, #ff7a3d 45%, #ff9a1f 100%);
  box-shadow: 0 10px 24px rgba(255, 74, 46, .5), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(140, 30, 0, .3);
  text-shadow: 0 1px 1px rgba(140, 30, 0, .5);
}
.rng-g .rng-go svg { width: 20px; height: 20px; fill: #fff; flex: 0 0 auto; }
.rng-g .rng-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: rng-shine 2.4s ease-in-out infinite; }
.rng-g .rng-go:hover { filter: brightness(1.06) saturate(1.1); }
.rng-g .rng-go:focus-visible { outline: 3px solid var(--rng-navy); outline-offset: 3px; }
.rng-g .rng-final { margin: 6px 0 2px; color: #5a6597; }
.rng-g .rng-final b { font-size: 60px; font-weight: 900; font-style: italic; color: var(--rng-hot); background: linear-gradient(180deg, #ff9a1f 10%, #ff4a2e 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.rng-best { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: #47527f; }
.rng-best b { color: var(--rng-navy, #16245e); }
.rng-best em { font-style: italic; padding: 2px 10px; border-radius: 99px; background: linear-gradient(90deg, #22d99a, #38b0ff); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rng-g .rng-sum { font-size: 13px; margin: 8px 0 16px; color: #47527f; }

/* stage proportions */
.rng-orient .rng-stage { cursor: grab; }
.rng-orient .rng-stage:active { cursor: grabbing; }

@keyframes rng-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes rng-blink { from { opacity: 1; } to { opacity: .55; } }
@media (max-width: 360px) {
  .rng-g { padding: 10px 8px 8px; border-radius: 22px; }
  .rng-g .rng-hud { gap: 4px; }
  .rng-g .rng-st { min-height: 46px; border-radius: 14px; }
  .rng-g .rng-st .g-stat-v { font-size: 17px; }
  .rng-g .rng-st .g-stat-l { font-size: 8.5px; letter-spacing: .06em; }
  .rng-g .rng-icons i { width: 14px; height: 14px; }
  .rng-g .rng-card { padding: 0 14px 16px; }
  .rng-card-band { margin: 0 -14px 10px; padding: 8px 18px 6px; }
  .rng-card-band b { font-size: 32px; }
  .rng-g .rng-card .g-ov-title { font-size: 25px; }
  .rng-emblem { width: 56px; height: 56px; border-radius: 16px; padding: 6px; }
  .rng-g .rng-go { min-width: 0; width: 100%; padding: 12px 16px; font-size: 16px; }
  .rng-pad button { min-height: 46px; font-size: 13px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rng-g .rng-go::after, .rng-g .rng-tbar .g-bar-fill.is-low { animation: none; }
  .rng-g .rng-cm i { transition: none; }
}

/*
 * P2E mini-games, set S (candy-pop arcade) — gsorbit, gsflip, gsgobble, gstwin,
 * gsbounce. Load after games.css (shell, HUD, overlays, .g-stage come from there).
 * Every selector is scoped to .gs-g or a gs- class, so the other sites that load
 * this file are untouched. Scenes are drawn on canvas; this file styles the deep
 * teal cabinet, cream HUD chips, hearts, touch pads, the size bar and overlays.
 */
.gs-g {
  max-width: 460px;
  padding: 12px 12px 10px;
  border-radius: 30px;
  background: linear-gradient(180deg, #0f5260 0%, #0a3a45 100%);
  color: #fff4dc;
  box-shadow: 0 0 0 4px #06232b, 0 14px 0 #06232b, 0 26px 44px rgba(6, 35, 43, .35);
  line-height: 1.4;
}

/* HUD: cream candy chips with ink numbers */
.gs-g .g-hud { gap: 6px; }
.gs-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 16px;
  background: #fff4dc;
  color: #06232b;
  box-shadow: inset 0 -3px 0 rgba(6, 35, 43, .14);
}
.gs-g .g-stat-l { color: #2f6b74; font-size: 10.5px; letter-spacing: .08em; font-weight: 800; }
.gs-g .g-stat-v { color: #06232b; font-size: 20px; font-weight: 800; font-family: var(--display, inherit); font-variant-numeric: tabular-nums; }
.gs-g .g-stat.is-hot { background: #ffd45e; }
.gs-g .g-stat.is-hot .g-stat-l { color: #6b4a00; }
.gs-g .g-stat.is-low { background: #ffd2d9; }
.gs-g .g-stat.is-low .g-stat-l { color: #9b1f3a; }

.gs-hearts { display: flex; justify-content: center; align-items: center; gap: 5px; height: 26px; }
.gs-hearts i {
  width: 13px; height: 13px; display: block;
  background: #ff5e78;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: inset -2px 2px 0 rgba(255, 255, 255, .45);
  transition: opacity .2s, transform .2s;
}
.gs-hearts i.is-off { opacity: .22; transform: rotate(-45deg) scale(.7); background: #2f6b74; box-shadow: none; }

.gs-g .g-bar { height: 8px; margin: 0 0 10px; background: rgba(255, 244, 220, .16); }
.gs-g .g-bar-fill { background: linear-gradient(90deg, #5ee6c8, #ffd45e); }
.gs-g .g-bar-fill.is-low { background: #ff5e78; }

.gs-g .g-stage {
  border-radius: 22px;
  background: #08323d;
  box-shadow: inset 0 0 0 3px rgba(255, 244, 220, .12);
  cursor: pointer;
}
.gs-g .g-stage::before { padding-top: 125%; }
.gs-gobble .g-stage { cursor: crosshair; }
.gs-bounce .g-stage { cursor: crosshair; }

.gs-g .g-cap { color: rgba(255, 244, 220, .82); font-size: 13.5px; margin-top: 9px; min-height: 1.4em; }
.gs-g .g-cap.g-cap-cta { color: #ffd45e; }

/* touch pads under the table (pinball, twin twirl) */
.gs-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.gs-pad {
  -webkit-appearance: none; appearance: none;
  min-height: 52px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 16px/1 var(--display, system-ui), sans-serif; letter-spacing: .01em;
  color: #06232b; background: #fff4dc;
  box-shadow: 0 5px 0 #c9b48f;
  touch-action: none; -webkit-user-select: none; user-select: none;
  transition: transform .06s, box-shadow .06s, background .1s;
}
.gs-pad.is-on { background: #ffd45e; transform: translateY(4px); box-shadow: 0 1px 0 #c9a23a; }
.gs-pad:focus-visible { outline: 3px solid #ffd45e; outline-offset: 2px; }

/* size bar (gobble) */
.gs-grow { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; font: 800 11px/1 var(--display, system-ui), sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 244, 220, .8); }
.gs-grow i { flex: 1; height: 10px; border-radius: 99px; background: rgba(255, 244, 220, .16); overflow: hidden; }
.gs-grow b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff5e78, #ffd45e); transform-origin: left center; transform: scaleX(.02); transition: transform .15s; }

/* overlays: cream cards, coral/butter/mint dots */
.gs-g .g-overlay { background: rgba(6, 35, 43, .62); }
.gs-g .g-ov-card {
  max-width: 310px;
  border-radius: 26px;
  background: #fff4dc;
  color: #06232b;
  box-shadow: 0 0 0 3px #06232b, 0 9px 0 #06232b, 0 22px 40px rgba(0, 0, 0, .35);
}
.gs-g .g-ov-title { font-family: var(--display, inherit); font-size: 26px; font-weight: 800; color: #06232b; letter-spacing: -.02em; }
.gs-g .g-ov-sub { color: #2b5a62; font-size: 14.5px; line-height: 1.5; }
.gs-g .g-ov-score { color: #2f6b74; }
.gs-g .g-ov-score b { color: #ff5e78; font-family: var(--display, inherit); }
.gs-ov-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.gs-ov-dots i { width: 16px; height: 16px; border-radius: 50%; display: block; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .15), inset 2px 2px 0 rgba(255, 255, 255, .5); }
.gs-ov-dots i:nth-child(1) { background: #ff5e78; }
.gs-ov-dots i:nth-child(2) { background: #ffd45e; }
.gs-ov-dots i:nth-child(3) { background: #5ee6c8; }
.gs-keys { margin: -6px 0 16px; font-size: 12.5px; font-weight: 700; color: #2f6b74; }
.gs-g .g-btn {
  color: #ffffff;
  background: #ff5e78;
  box-shadow: 0 5px 0 #b8304c, 0 10px 24px rgba(255, 94, 120, .45);
  font-family: var(--display, inherit);
  padding: 13px 30px;
}
.gs-g .g-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b8304c; }
.gs-g .g-btn:focus-visible { outline: 3px solid #06232b; }

@media (max-width: 380px) {
  .gs-g { padding: 9px 9px 8px; border-radius: 24px; }
  .gs-g .g-stat-v { font-size: 17px; }
  .gs-g .g-stat-l { font-size: 9.5px; letter-spacing: .04em; }
  .gs-hearts i { width: 11px; height: 11px; }
  .gs-pad { min-height: 48px; font-size: 15px; }
}

/*
 * P2E mini-games, set T (good-vibes festival) — vbphoto, vbbumper, vbvolley,
 * vbfloor, vblaser. Load after games.css (shell, HUD, overlays, .g-stage come
 * from there). Every selector is scoped to .vb-g or a vb- class, so the other
 * sites that load this file are untouched. Scenes are drawn on canvas; this
 * file styles the ink frame with its sunset stripe, the HUD chips, life dots,
 * cannon charges and the cream overlay cards with a sticker tag.
 */
.vb-g {
  max-width: 480px;
  padding: 14px 12px 12px;
  border-radius: 22px;
  border: 1px solid #120c1a;
  background: linear-gradient(90deg, #ff2e88, #ff7a2f 55%, #ffc23d) top / 100% 5px no-repeat, #120c1a;
  color: #fff6e8;
  font-family: "DM Sans", system-ui, sans-serif;
  box-shadow: 0 18px 40px rgba(18, 12, 26, .22);
  line-height: 1.4;
}

.vb-g .g-hud { gap: 6px; }
.vb-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 12px;
  background: rgba(255, 246, 232, .08);
  border: 1px solid rgba(255, 246, 232, .12);
}
.vb-g .g-stat-l { color: rgba(255, 246, 232, .7); font-size: 10.5px; letter-spacing: .08em; font-weight: 700; }
.vb-g .g-stat-v { color: #fff6e8; font-family: "Syne", "DM Sans", sans-serif; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.vb-dots { display: flex; justify-content: center; align-items: center; gap: 5px; height: 26px; }
.vb-dots i {
  width: 11px; height: 11px; display: block; border-radius: 50%;
  background: #ffc23d;
  box-shadow: 0 0 0 2px rgba(255, 194, 61, .25);
  transition: opacity .2s, transform .2s;
}
.vb-hearts i { background: #ff2e88; box-shadow: 0 0 0 2px rgba(255, 46, 136, .25); }
.vb-dots i.is-off { opacity: .18; transform: scale(.7); box-shadow: none; }

.vb-g .g-bar { height: 6px; margin: 0 0 10px; background: rgba(255, 246, 232, .12); }
.vb-g .g-bar-fill { background: linear-gradient(90deg, #ff2e88, #ff7a2f, #ffc23d); }
.vb-g .g-bar-fill.is-low { background: #ff2e88; }

.vb-g .g-stage {
  border-radius: 16px;
  background: #1d1229;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.vb-photo .g-stage::before { padding-top: 112.5%; }
.vb-laser .g-stage::before { padding-top: 112.5%; }
.vb-volley .g-stage::before { padding-top: 112.5%; }
.vb-floor .g-stage::before { padding-top: 100%; }
.vb-bumper .g-stage::before { padding-top: 106.25%; }
.vb-photo .g-stage { cursor: crosshair; }
.vb-bumper .g-stage, .vb-volley .g-stage, .vb-laser .g-stage { cursor: grab; }

.vb-g .g-cap { color: rgba(255, 246, 232, .78); font-size: 13.5px; min-height: 1.5em; }
.vb-g .g-cap.g-cap-cta { color: #ffc23d; font-weight: 700; }

/* overlays: cream card, ink type, a rotated gradient sticker on top */
.vb-g .g-overlay { background: rgba(18, 12, 26, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.vb-g .g-ov-card {
  position: relative;
  max-width: 330px;
  padding: 30px 22px 22px;
  border-radius: 20px;
  background: #fff6e8;
  color: #120c1a;
  border: 1px solid #120c1a;
  box-shadow: 6px 6px 0 #ff2e88;
}
.vb-ov-tag {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  padding: 5px 14px 4px;
  border-radius: 999px;
  border: 1px solid #120c1a;
  background: linear-gradient(90deg, #ff2e88, #ff7a2f 55%, #ffc23d);
  color: #120c1a;
  font: 800 12px/1.2 "Syne", "DM Sans", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vb-g .g-ov-title { font-family: "Syne", "DM Sans", sans-serif; font-size: 25px; font-weight: 800; color: #120c1a; letter-spacing: -.01em; }
.vb-g .g-ov-sub { color: #4a3f55; font-size: 14.5px; line-height: 1.6; text-align: left; }
.vb-g .g-ov-score { color: #6b5f78; }
.vb-g .g-ov-score b { color: #120c1a; font-family: "Syne", "DM Sans", sans-serif; font-weight: 800; }
.vb-keys {
  margin: -6px 0 16px; padding: 6px 10px; border-radius: 10px;
  background: #ffe9d2; border: 1px dashed #ff7a2f;
  font-size: 12.5px; font-weight: 700; color: #7a2a00;
}
.vb-g .g-btn {
  min-width: 160px;
  border-radius: 999px;
  border: 1px solid #120c1a;
  background: #120c1a;
  color: #fff6e8;
  font-family: "Syne", "DM Sans", sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 0 #ff7a2f;
}
.vb-g .g-btn:focus-visible { outline: 3px solid #ff2e88; outline-offset: 2px; }

@media (max-width: 380px) {
  .vb-g { padding: 12px 8px 9px; border-radius: 18px; }
  .vb-g .g-stat-v { font-size: 17px; }
  .vb-g .g-stat-l { font-size: 9.5px; letter-spacing: .04em; }
  .vb-g .g-ov-card { padding: 26px 16px 18px; }
  .vb-g .g-ov-sub { font-size: 13.5px; }
}
/* the shared fade/rise intro can leave the card half-transparent over a busy canvas; keep it solid */
.vb-g .g-overlay, .vb-g .g-ov-card { animation: none; }

/*
 * P2E mini-games, set TR (Titans Racket clubhouse) — trsquash, trshuttle,
 * trdrill, trdink, trserve. Every selector is scoped to .trg-g or a trg-
 * class so other sites that load this file are untouched. Scenes are drawn
 * on canvas; this file styles the scorecard frame, glossy HUD pills, the
 * timer bar, shot buttons and the ticket-style start / end cards.
 */
.trg-g {
  --trg-navy: #13294b;
  --trg-ink: #0b1a33;
  --trg-clay: #c9573b;
  --trg-clay-l: #ec8d61;
  --trg-grass: #2f8a4c;
  --trg-grass-l: #82c86c;
  --trg-chalk: #fffaf0;
  --trg-cream: #f4ead6;
  --trg-gold: #f4b93a;
  max-width: 500px;
  padding: 14px 12px 12px;
  border-radius: 28px;
  border: 0;
  color: var(--trg-navy);
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(19, 41, 75, .07) calc(50% - 1px), rgba(19, 41, 75, .07) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(120% 70% at 0% 0%, rgba(236, 141, 97, .28), transparent 60%),
    radial-gradient(100% 70% at 100% 100%, rgba(130, 200, 108, .3), transparent 60%),
    linear-gradient(170deg, #fffaf0 0%, #f6ecd8 100%);
  box-shadow: 0 0 0 1px rgba(19, 41, 75, .12), 0 0 0 7px #fffaf0, 0 0 0 9px rgba(19, 41, 75, .85), 0 30px 60px -18px rgba(19, 41, 75, .45);
}
.trg-g:focus-visible { box-shadow: 0 0 0 1px rgba(19, 41, 75, .12), 0 0 0 7px #fffaf0, 0 0 0 10px var(--trg-clay), 0 30px 60px -18px rgba(19, 41, 75, .45); }

/* HUD: glossy pills */
.trg-g .trg-hud { gap: 7px; margin-bottom: 10px; }
.trg-g .trg-st {
  position: relative;
  align-items: center;
  text-align: center;
  min-height: 54px;
  padding: 7px 4px 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f1e6cf);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(19, 41, 75, .14), 0 6px 14px -6px rgba(19, 41, 75, .35);
  overflow: hidden;
}
.trg-g .trg-st::after { content: ""; position: absolute; left: 10%; right: 10%; top: 3px; height: 38%; border-radius: 14px 14px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none; }
.trg-g .trg-st .g-stat-l { color: #55627a; font-size: 9.5px; letter-spacing: .16em; font-weight: 700; font-family: "Josefin Sans", "Libre Franklin", system-ui, sans-serif; }
.trg-g .trg-st .g-stat-v { color: var(--trg-navy); font-size: 21px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; font-family: "Josefin Sans", "Libre Franklin", system-ui, sans-serif; }
.trg-g .trg-st-score { background: linear-gradient(160deg, #f19a6c 0%, #c9573b 55%, #a5402a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -6px rgba(201, 87, 59, .65); }
.trg-g .trg-st-score .g-stat-l { color: rgba(255, 250, 240, .92); }
.trg-g .trg-st-score .g-stat-v { color: #fff; text-shadow: 0 2px 0 rgba(110, 30, 10, .35); }
.trg-g .trg-st.is-hot { background: linear-gradient(160deg, #a6dd8e, #2f8a4c 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 18px rgba(130, 200, 108, .65); }
.trg-g .trg-st.is-hot .g-stat-l, .trg-g .trg-st.is-hot .g-stat-v { color: #fff; }
.trg-g .trg-st.is-low { background: linear-gradient(160deg, #ff9a86, #e0473b); }
.trg-g .trg-st.is-low .g-stat-l, .trg-g .trg-st.is-low .g-stat-v { color: #fff; }
.trg-g .trg-cm { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 4px; border-radius: 4px; background: rgba(19, 41, 75, .14); overflow: hidden; }
.trg-g .trg-cm i { display: block; height: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--trg-gold), var(--trg-clay-l), #fff); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.trg-g .trg-icons { display: flex; justify-content: center; align-items: center; gap: 4px; height: 25px; }
.trg-g .trg-icons i { display: block; width: 18px; height: 18px; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 2px 2px rgba(19, 41, 75, .3)); }
.trg-g .trg-icons svg { display: block; width: 100%; height: 100%; fill: #c6e03a; }
.trg-g .trg-icons i.is-off { opacity: .25; transform: scale(.7); filter: none; }
.trg-g .trg-icons i.is-off svg { fill: #8a93a6; }

/* timer bar: a striped tape */
.trg-g .trg-tbar { height: 9px; margin: 0 4px 10px; border-radius: 9px; background: rgba(19, 41, 75, .12); box-shadow: inset 0 1px 2px rgba(19, 41, 75, .25); overflow: hidden; }
.trg-g .trg-tbar .g-bar-fill { border-radius: 9px; transition: none; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px), linear-gradient(90deg, #2f8a4c, #82c86c 60%, #f4b93a); }
.trg-g .trg-tbar .g-bar-fill.is-low { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px), linear-gradient(90deg, #e0473b, #ec8d61); animation: trg-blink .6s ease-in-out infinite alternate; }

/* stage */
.trg-g .trg-stage { border-radius: 20px; background: #2f8a4c; box-shadow: 0 0 0 3px #fffaf0, 0 0 0 5px rgba(19, 41, 75, .85), 0 14px 28px -10px rgba(19, 41, 75, .5); touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.trg-g .trg-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 30px rgba(11, 26, 51, .25); pointer-events: none; }
.trg-g .trg-stage::before { padding-top: 125%; }
.trg-shuttle .trg-stage::before { padding-top: 83.34%; }
.trg-g .g-cap { color: #44506a; font-size: 13.5px; min-height: 1.5em; margin-top: 11px; }
.trg-g .g-cap.g-cap-cta { color: var(--trg-navy); font-weight: 700; }

/* shot buttons (Shuttle Smash) */
.trg-pad { display: flex; gap: 8px; margin-top: 12px; }
.trg-pad button {
  -webkit-appearance: none; appearance: none; flex: 1 1 0; min-height: 50px; border: 0; border-radius: 16px; cursor: pointer;
  font: 700 14px/1.1 "Josefin Sans", "Libre Franklin", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 6px; touch-action: none; -webkit-user-select: none; user-select: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 6px 14px -6px rgba(19, 41, 75, .5);
}
.trg-pad button b { font-size: 18px; }
.trg-pad button:nth-child(1) { background: linear-gradient(160deg, #3d5a8c, #13294b); }
.trg-pad button:nth-child(2) { background: linear-gradient(160deg, #a6dd8e, #2f8a4c); }
.trg-pad button:nth-child(3) { background: linear-gradient(160deg, #f19a6c, #c9573b); }
.trg-pad button:active { transform: translateY(2px); filter: brightness(1.06); }
.trg-pad button:focus-visible { outline: 3px solid var(--trg-gold); outline-offset: 2px; }

/* overlays: ticket cards */
.trg-g .trg-ov { background: radial-gradient(90% 70% at 50% 40%, rgba(255, 250, 240, .35), rgba(11, 26, 51, .55) 75%); -webkit-backdrop-filter: blur(4px) saturate(1.1); backdrop-filter: blur(4px) saturate(1.1); }
.trg-g .trg-card {
  position: relative;
  max-width: 320px;
  padding: 24px 22px 22px;
  border-radius: 24px;
  color: var(--trg-navy);
  background:
    radial-gradient(circle at 0 92px, transparent 11px, transparent 11px) ,
    linear-gradient(180deg, #fffdf7 0%, #f6ecd8 100%);
  box-shadow: 0 0 0 1.5px rgba(19, 41, 75, .14), 0 26px 60px -12px rgba(11, 26, 51, .6);
  -webkit-mask: radial-gradient(circle 11px at 0 104px, transparent 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 104px, transparent 98%, #000) top right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 104px, transparent 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 104px, transparent 98%, #000) top right / 51% 100% no-repeat;
}
.trg-g .trg-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 104px; border-top: 2px dashed rgba(19, 41, 75, .2); }
.trg-g .trg-ov-end .trg-card::before { display: none; }
.trg-g .trg-ov-end .trg-card { -webkit-mask: none; mask: none; border-top: 8px solid var(--trg-clay); }
.trg-emblem { width: 74px; height: 74px; margin: -4px auto 10px; border-radius: 22px; padding: 4px; background: linear-gradient(150deg, #13294b, #2d4f86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -6px rgba(19, 41, 75, .6); }
.trg-emblem svg { display: block; width: 100%; height: 100%; }
.trg-tag { display: inline-block; margin: 8px 0 6px; padding: 4px 12px; border-radius: 99px; background: var(--trg-navy); color: #fffaf0; font: 700 10.5px/1.4 "Josefin Sans", "Libre Franklin", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.trg-g .g-ov-title { font-family: "Josefin Sans", "Libre Franklin", system-ui, sans-serif; font-size: 31px; font-weight: 700; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--trg-navy); }
.trg-g .g-ov-sub { color: #3c4862; font-size: 14px; margin: 9px 0 12px; }
.trg-keys { margin: 0 0 16px; font-size: 12px; color: #55627a; line-height: 2; }
.trg-keys kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin: 0 1px; border-radius: 7px; background: #fff; box-shadow: inset 0 -2px 0 rgba(19, 41, 75, .2), 0 0 0 1px rgba(19, 41, 75, .2); color: var(--trg-navy); font: 700 11px/20px "Libre Franklin", system-ui, sans-serif; }
.trg-g .trg-go {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 210px; padding: 15px 30px;
  border-radius: 99px; overflow: hidden; color: #fff;
  font: 700 17px/1 "Josefin Sans", "Libre Franklin", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(135deg, #82c86c 0%, #2f8a4c 55%, #1d5e33 100%);
  box-shadow: 0 12px 24px -8px rgba(47, 138, 76, .8), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(10, 50, 20, .35);
  text-shadow: 0 1px 2px rgba(10, 50, 20, .5);
}
.trg-g .trg-go svg { width: 20px; height: 20px; fill: #fff; flex: 0 0 auto; }
.trg-g .trg-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: trg-shine 2.6s ease-in-out infinite; }
.trg-g .trg-go:hover { filter: brightness(1.06) saturate(1.1); }
.trg-g .trg-go:focus-visible { outline: 3px solid var(--trg-clay); outline-offset: 3px; }
.trg-g .trg-final { margin: 8px 0 2px; color: #55627a; font-family: "Josefin Sans", system-ui, sans-serif; }
.trg-g .trg-final b { font-family: "Josefin Sans", "Libre Franklin", system-ui, sans-serif; font-size: 62px; font-weight: 700; color: var(--trg-clay); font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(201, 87, 59, .15); }
.trg-best { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #3c4862; }
.trg-best b { color: var(--trg-navy); }
.trg-best em { font-style: normal; padding: 3px 10px; border-radius: 99px; background: linear-gradient(90deg, #f4b93a, #ec8d61); color: #fff; font: 700 11px/1.3 "Josefin Sans", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.trg-g .trg-sum { font-size: 13px; margin: 8px 0 16px; color: #3c4862; }

@keyframes trg-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes trg-blink { from { opacity: 1; } to { opacity: .55; } }
@media (max-width: 380px) {
  .trg-g { padding: 10px 8px 9px; border-radius: 22px; }
  .trg-g .trg-hud { gap: 4px; }
  .trg-g .trg-st { min-height: 48px; border-radius: 14px; }
  .trg-g .trg-st .g-stat-v { font-size: 17px; }
  .trg-g .trg-st .g-stat-l { font-size: 8.5px; letter-spacing: .08em; }
  .trg-g .trg-icons i { width: 14px; height: 14px; }
  .trg-g .trg-card { padding: 18px 14px 16px; }
  .trg-g .g-ov-title { font-size: 25px; }
  .trg-emblem { width: 58px; height: 58px; border-radius: 18px; }
  .trg-g .trg-go { min-width: 0; width: 100%; padding: 13px 18px; font-size: 15px; }
  .trg-pad button { min-height: 46px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .trg-g .trg-go::after, .trg-g .trg-tbar .g-bar-fill.is-low { animation: none; } }

/*
 * P2E mini-games, set U (creative studio / paint & make) — cvroller, cvramp,
 * cvmix, cvtrace, cvstamp. Load after games.css (shell, HUD, overlays and
 * .g-stage come from there). Every selector is scoped to .cv-g or a cv- class,
 * so the other sites that load this file are untouched. Scenes are drawn on
 * canvas, except Mix Master (DOM tickets, pot and tubes). This file styles
 * the white "canvas board" frame with its three-colour paint stripe, the
 * swatch HUD chips, heart / spill dots, the ink meter and the overlay cards.
 */
.cv-g {
  max-width: 480px;
  padding: 18px 12px 12px;
  border-radius: 22px;
  border: 2px solid #141a33;
  background:
    linear-gradient(90deg, #2340d8 0 33.3%, #ff5436 33.3% 66.6%, #ffc414 66.6%) top / 100% 6px no-repeat,
    #ffffff;
  color: #141a33;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow: 0 20px 44px rgba(20, 26, 51, .14);
  line-height: 1.4;
}
.cv-g .g-hud { gap: 6px; }
.cv-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 12px;
  background: #f5f3ec;
  border: 1.5px solid #e6e2d6;
}
.cv-g .g-stat:first-child { background: #eaeefe; border-color: #cdd6fb; }
.cv-g .g-stat.is-low .g-stat-v { color: #e8431f; }
.cv-g .g-stat-l { color: #5a6079; font-size: 10.5px; letter-spacing: .07em; font-weight: 800; }
.cv-g .g-stat-v { color: #141a33; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.cv-dots { display: flex; justify-content: center; align-items: center; gap: 5px; height: 26px; }
.cv-dots i { width: 11px; height: 11px; display: block; border-radius: 50%; background: #ff5436; box-shadow: 0 0 0 2px rgba(255, 84, 54, .22); transition: opacity .2s, transform .2s; }
.cv-spills { gap: 4px; }
.cv-spills i { width: 9px; height: 9px; background: #2340d8; box-shadow: 0 0 0 2px rgba(35, 64, 216, .2); }
.cv-dots i.is-off { opacity: .18; transform: scale(.7); box-shadow: none; }
.cv-ink { display: block; align-self: stretch; height: 10px; margin: 8px 6px 7px; border-radius: 99px; background: #e6e2d6; overflow: hidden; }
.cv-ink i { display: block; height: 100%; border-radius: 99px; background: #141a33; transform-origin: left center; transition: transform .1s linear; }

.cv-g .g-bar { height: 6px; margin: 0 0 10px; background: #efece3; }
.cv-g .g-bar-fill { background: linear-gradient(90deg, #2340d8, #ff5436, #ffc414); }
.cv-g .g-bar-fill.is-low { background: #ff5436; }

.cv-g .g-stage { border-radius: 14px; background: #fffdf7; box-shadow: inset 0 0 0 1.5px #e6e2d6; touch-action: none; -webkit-user-select: none; user-select: none; }
.cv-roller .g-stage::before { padding-top: 112.5%; }
.cv-ramp .g-stage::before { padding-top: 125%; }
.cv-trace .g-stage::before { padding-top: 112.5%; }
.cv-stamp .g-stage::before { padding-top: 81.25%; }
.cv-roller .g-stage, .cv-stamp .g-stage { cursor: pointer; }
.cv-trace .g-stage { cursor: none; }
.cv-g .g-stat.is-hot { background: #fff4cc; border-color: #ffc414; }
.cv-ramp .g-stage { cursor: crosshair; }

.cv-g .g-cap { color: #5a6079; font-size: 13.5px; min-height: 1.5em; }
.cv-g .g-cap.g-cap-cta { color: #2340d8; font-weight: 800; }

/* overlays: white card, ink type, a paint-swatch tag on top */
.cv-g .g-overlay { background: rgba(255, 253, 247, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cv-g .g-ov-card {
  position: relative;
  max-width: 330px;
  padding: 30px 22px 22px;
  border-radius: 20px;
  background: #ffffff;
  color: #141a33;
  border: 2px solid #141a33;
  box-shadow: 0 22px 50px rgba(20, 26, 51, .22);
}
.cv-ov-tag {
  position: absolute; top: -15px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  padding: 6px 16px 5px;
  border-radius: 8px 14px 9px 12px;
  background: #ffc414;
  color: #141a33;
  font: 800 12px/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(20, 26, 51, .15);
}
.cv-g .g-ov-title { font-size: 26px; font-weight: 800; color: #141a33; letter-spacing: -.02em; }
.cv-g .g-ov-sub { color: #474d66; font-size: 14.5px; line-height: 1.6; text-align: left; }
.cv-g .g-ov-score { color: #5a6079; }
.cv-g .g-ov-score b { color: #2340d8; font-weight: 800; }
.cv-keys { margin: -6px 0 16px; padding: 6px 10px; border-radius: 10px; background: #eaeefe; font-size: 12.5px; font-weight: 700; color: #1a2fa8; }
.cv-g .g-btn {
  min-width: 160px;
  border-radius: 999px;
  background: #2340d8;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(35, 64, 216, .32);
}
.cv-g .g-btn:hover { background: #1a2fa8; filter: none; }
.cv-g .g-btn:focus-visible { outline: 3px solid #ffc414; outline-offset: 2px; }
.cv-g .g-overlay, .cv-g .g-ov-card { animation: none; }

/* ---- Mix Master (DOM) ---- */
.cv-mix .g-stage.cv-mix-stage { display: flex; flex-direction: column; gap: 14px; padding: 14px 12px 14px; cursor: default; touch-action: manipulation; }
.cv-mix .g-stage.cv-mix-stage::before { display: none; }
.cv-tickets { display: grid; grid-template-columns: 1fr 52px 52px; gap: 8px; align-items: stretch; }
.cv-ticket { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #ffffff; border: 1.5px solid #e6e2d6; overflow: hidden; }
.cv-ticket-main { border: 2px solid #141a33; padding: 10px 10px 16px; }
.cv-ticket-main .cv-sw { width: 54px; height: 54px; border-radius: 14px 18px 12px 16px; flex: none; box-shadow: inset 0 0 0 2px rgba(20, 26, 51, .25); }
.cv-tk-txt { display: flex; flex-direction: column; min-width: 0; }
.cv-tk-txt small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5a6079; }
.cv-tk-txt b { font-size: 22px; font-weight: 800; line-height: 1.15; color: #141a33; }
.cv-tk-txt em { font-style: normal; font-size: 13px; font-weight: 700; color: #2340d8; min-height: 1.3em; }
.cv-tk-txt em.is-hidden { color: #b3b6c4; letter-spacing: .2em; }
.cv-tk-time { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 5px; border-radius: 9px; background: #efece3; overflow: hidden; }
.cv-tk-time i { display: block; height: 100%; background: #16a36b; transform-origin: left center; }
.cv-tk-time i.is-low { background: #ff5436; }
.cv-ticket-next { flex-direction: column; justify-content: center; gap: 5px; padding: 8px 4px; }
.cv-ticket-next .cv-sw { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 2px rgba(20, 26, 51, .2); }
.cv-ticket-next small { font-size: 10px; font-weight: 800; color: #5a6079; text-transform: uppercase; letter-spacing: .06em; }
.cv-potwrap { position: relative; display: grid; place-items: center; padding: 8px 0 4px; min-height: 168px; }
.cv-pot { position: relative; width: 150px; height: 140px; }
.cv-pot::before { content: ""; position: absolute; inset: 22px 6px 0; border-radius: 10px 10px 46px 46px; background: #ffffff; border: 3px solid #141a33; box-shadow: 0 14px 0 -6px rgba(20, 26, 51, .12); }
.cv-pot::after { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 20px; border-radius: 50%; background: #141a33; }
.cv-pot-paint { position: absolute; left: 12px; right: 12px; top: 16px; height: 13px; border-radius: 50%; z-index: 1; transition: background .2s, transform .2s; transform: scale(.4); opacity: 0; }
.cv-pot-paint.is-full { transform: scale(1); opacity: 1; }
.cv-pot-drops { position: absolute; left: 0; right: 0; top: 64px; z-index: 1; display: flex; justify-content: center; gap: 6px; }
.cv-pot-drops i { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #141a33; }
.cv-pot.is-serve { animation: cv-serve .45s ease; }
.cv-pot.is-mud { animation: cv-mud .4s ease; }
@keyframes cv-serve { 40% { transform: translateY(-8px) scale(1.05); } }
@keyframes cv-mud { 20%, 60% { transform: translateX(-7px) rotate(-3deg); } 40%, 80% { transform: translateX(7px) rotate(3deg); } }
.cv-say { position: absolute; left: 50%; top: 2px; transform: translate(-50%, 6px); padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; z-index: 2; }
.cv-say.is-on { opacity: 1; transform: translate(-50%, 0); }
.cv-say-ok { background: #16a36b; color: #ffffff; }
.cv-say-bad { background: #ff5436; color: #ffffff; }
.cv-say-info { background: #141a33; color: #ffffff; }
.cv-tubes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cv-tube {
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 8px; border-radius: 14px; border: 1.5px solid #e6e2d6; background: #ffffff; color: #141a33;
  transition: transform .1s, border-color .1s;
}
.cv-tube svg { width: 34px; height: 54px; }
.cv-tube span { font-size: 12.5px; font-weight: 800; display: flex; align-items: center; gap: 5px; }
.cv-tube kbd { font: 800 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; padding: 3px 5px; border-radius: 5px; background: #f5f3ec; color: #5a6079; }
.cv-tube:hover { border-color: #141a33; }
.cv-tube:focus-visible { outline: 3px solid #2340d8; outline-offset: 2px; }
.cv-tube.is-press { animation: cv-press .25s ease; }
.cv-tube.is-nope { animation: cv-mud .35s ease; border-color: #ff5436; }
@keyframes cv-press { 50% { transform: translateY(4px) scale(.96); } }
.cv-mix-stage.is-idle .cv-tube { opacity: .55; }

/* ---- Stencil Slam: stamp picker under the belt ---- */
.cv-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.2fr; gap: 6px; margin-top: 10px; }
.cv-pick, .cv-slam {
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; color: #141a33;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; padding: 6px 2px; border-radius: 12px; border: 1.5px solid #e6e2d6; background: #ffffff;
}
.cv-pick[hidden] { display: none; }
.cv-pick svg { width: 26px; height: 26px; }
.cv-pick span { font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.cv-pick kbd { font: 800 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; padding: 2px 4px; border-radius: 4px; background: #f5f3ec; color: #5a6079; }
.cv-pick.is-on { border: 2.5px solid #141a33; background: #fff4cc; }
.cv-slam { grid-column: -2; background: #141a33; border-color: #141a33; color: #ffffff; font-weight: 800; font-size: 16px; }
.cv-slam:active { transform: translateY(2px); }
.cv-pick:focus-visible, .cv-slam:focus-visible { outline: 3px solid #2340d8; outline-offset: 2px; }

@media (max-width: 380px) {
  .cv-g { padding: 16px 8px 9px; border-radius: 18px; }
  .cv-g .g-stat-v { font-size: 17px; }
  .cv-g .g-stat-l { font-size: 9.5px; letter-spacing: .03em; }
  .cv-g .g-ov-card { padding: 26px 16px 18px; }
  .cv-g .g-ov-sub { font-size: 13.5px; }
  .cv-tk-txt b { font-size: 19px; }
  .cv-tube span { font-size: 11px; }
  .cv-tube kbd, .cv-pick kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-pot.is-serve, .cv-pot.is-mud, .cv-tube.is-press, .cv-tube.is-nope { animation: none; }
}

/*
 * P2E mini-games, set V (feel-good) — afmood, afbeam, afsling, afbees,
 * afducks. Load after games.css (shell, HUD, overlays, .g-stage come from
 * there). Every selector is scoped to .af-g or an af- class, so the other
 * sites that load this file are untouched. Scenes are drawn on canvas; this
 * file styles the soft peach frame, the rounded HUD chips, the heart dots
 * and the cream overlay cards with a sage tag.
 */
.af-g {
  max-width: 480px;
  padding: 14px 12px 12px;
  border-radius: 30px;
  background: #fff6ee;
  border: 1px solid #f3dccb;
  color: #3b1d3f;
  font-family: "Karla", system-ui, sans-serif;
  box-shadow: 0 18px 40px rgba(150, 80, 50, .14);
  line-height: 1.4;
}
.af-g .g-hud { gap: 6px; }
.af-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #f3dccb;
}
.af-g .g-stat-l { color: #7a6079; font-size: 10.5px; letter-spacing: .08em; font-weight: 700; }
.af-g .g-stat-v { color: #3b1d3f; font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }

.af-dots { display: flex; justify-content: center; align-items: center; gap: 5px; height: 27px; }
.af-dots i {
  width: 12px; height: 12px; display: block; border-radius: 50%;
  background: #ff6f61;
  box-shadow: 0 0 0 2px rgba(255, 111, 97, .22);
  transition: opacity .2s, transform .2s;
}
.af-dots i.is-off { opacity: .18; transform: scale(.7); box-shadow: none; }

.af-g .g-bar { height: 7px; margin: 0 0 10px; background: #ffe1cc; }
.af-g .g-bar-fill { background: linear-gradient(90deg, #ffb37a, #ffcf4d, #8cc79b); }
.af-g .g-bar-fill.is-low { background: #ff6f61; }

.af-g .g-stage {
  border-radius: 24px;
  background: #ffe3d0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.af-g .g-stage::before { padding-top: 125%; }
.af-mood .g-stage, .af-ducks .g-stage { cursor: pointer; }
.af-beam .g-stage { cursor: crosshair; }
.af-sling .g-stage, .af-bees .g-stage { cursor: grab; }

.af-g .g-cap { color: #7a6079; font-size: 13.5px; min-height: 20px; }
.af-g .g-cap.g-cap-cta { color: #3b1d3f; }

.af-g .g-btn {
  background: #3b1d3f;
  color: #fff6ee;
  box-shadow: 0 6px 0 #ffb37a;
  font-family: "Karla", system-ui, sans-serif;
  padding: 12px 30px;
}
.af-g .g-btn:hover { filter: none; background: #5a2d5e; }

.af-g .g-overlay.af-ov { background: rgba(255, 233, 218, .72); }
.af-g .g-ov-card {
  background: #fffaf5;
  border: 1px solid #f3dccb;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(120, 60, 40, .18);
  color: #3b1d3f;
}
.af-g .g-ov-title { font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 800; color: #3b1d3f; }
.af-g .g-ov-sub { color: #6a5069; font-size: 14.5px; }
.af-g .g-ov-score { color: #7a6079; }
.af-g .g-ov-score b { color: #3b1d3f; font-family: "Fraunces", Georgia, serif; }
.af-ov-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #dff0e2;
  color: #2f6a42;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.af-keys { margin: -6px 0 16px; font-size: 12.5px; color: #8a7088; }

@media (max-width: 420px) {
  .af-g { padding: 10px 8px 8px; border-radius: 24px; }
  .af-g .g-stat-v { font-size: 18px; }
  .af-g .g-ov-card { padding: 18px 14px; }
  .af-g .g-ov-sub { font-size: 13.5px; margin-bottom: 14px; }
}

/*
 * P2E mini-games, set W (ForGame Top 10 arcade) — fghex, fgsumo, fgshield,
 * fgreel, fglander. Load after games.css (shell, HUD, overlays and .g-stage
 * come from there). Every selector is scoped to .fgw-g or an fgw- class, so
 * the other sites that load this file are untouched. Scenes are drawn on
 * canvas; this file styles the dark scoreboard frame with its cyan top rule,
 * the square HUD cells, life pips, the on-screen control pads and the overlay
 * cards with a numbered tag.
 */
.fgw-g {
  max-width: 480px;
  padding: 16px 12px 12px;
  border-radius: 14px;
  border: 1px solid #26315c;
  background:
    linear-gradient(90deg, #38e1ff 0 62%, #ff7a2f 62% 82%, #ffd23f 82%) top / 100% 3px no-repeat,
    #0e1428;
  color: #eaf2ff;
  font-family: "Inter", system-ui, sans-serif;
  box-shadow: 0 22px 48px rgba(6, 10, 24, .35);
  line-height: 1.4;
}
.fgw-g .g-hud { gap: 6px; }
.fgw-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 8px;
  background: #151d3a;
  border: 1px solid #26315c;
}
.fgw-g .g-stat:first-child { background: #12304a; border-color: #1f5a78; }
.fgw-g .g-stat-l { color: #9aa6cf; font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.fgw-g .g-stat-v { color: #eaf2ff; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fgw-g .g-stat:first-child .g-stat-v { color: #38e1ff; }
.fgw-g .g-stat.is-low .g-stat-v { color: #ff4f7b; }

.fgw-dots { display: flex; justify-content: center; align-items: center; gap: 5px; height: 25px; }
.fgw-dots i {
  width: 11px; height: 11px; display: block; border-radius: 50%;
  background: #38e1ff;
  box-shadow: 0 0 0 2px rgba(56, 225, 255, .2);
  transition: opacity .2s, transform .2s, background .2s;
}
.fgw-dots-sq i { border-radius: 2px; width: 10px; height: 13px; }
.fgw-dots i.is-half { background: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .2); }
.fgw-dots i.is-off { opacity: .18; transform: scale(.7); box-shadow: none; background: #8f9bc4; }

.fgw-g .g-bar { height: 5px; margin: 0 0 10px; background: #1a2346; border-radius: 3px; }
.fgw-g .g-bar-fill { background: linear-gradient(90deg, #38e1ff, #5df2c4); }
.fgw-g .g-bar-fill.is-low { background: #ff4f7b; }

.fgw-g .g-stage {
  border-radius: 10px;
  background: #0b1020;
  border: 1px solid #26315c;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.fgw-g .g-stage::before { padding-top: 125%; }
.fgw-sumo .g-stage { cursor: move; }
.fgw-shield .g-stage { cursor: crosshair; }
.fgw-reel .g-stage { cursor: grab; }
.fgw-reel .g-stage:active { cursor: grabbing; }

/* on-screen control pads (sumo dash, reel hold, lander turn / engine) */
.fgw-pad { display: flex; gap: 8px; margin-top: 10px; }
.fgw-btn {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid #2e3b70;
  border-radius: 10px;
  background: #151d3a;
  color: #eaf2ff;
  font: 700 15px/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s, border-color .1s, transform .1s, opacity .2s;
}
.fgw-btn:focus-visible { outline: 2px solid #38e1ff; outline-offset: 2px; }
.fgw-btn.is-on, .fgw-btn:active { background: #12304a; border-color: #38e1ff; color: #38e1ff; transform: translateY(1px); }
.fgw-btn.is-cool { opacity: .45; }
.fgw-btn-main { flex-grow: 1.6; background: #1d2a55; }
.fgw-pad-3 .fgw-btn:not(.fgw-btn-main) { font-size: 22px; }

.fgw-g .g-cap { color: #9aa6cf; font-size: 13px; min-height: 20px; }
.fgw-g .g-cap.g-cap-cta { color: #eaf2ff; }

.fgw-g .g-btn {
  background: #38e1ff;
  color: #0b1020;
  border-radius: 10px;
  box-shadow: 0 4px 0 #1b7c96;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  padding: 12px 30px;
}
.fgw-g .g-btn:hover { filter: none; background: #6ae9ff; }
.fgw-g .g-btn:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }

.fgw-g .g-overlay.fgw-ov { background: rgba(11, 16, 32, .74); }
.fgw-g .g-ov-card {
  background: #121a34;
  border: 1px solid #2e3b70;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  color: #eaf2ff;
}
.fgw-ov-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #ff7a2f;
  color: #0b1020;
  font: 700 11px/1.3 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.fgw-g .g-ov-title { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 25px; font-weight: 700; color: #eaf2ff; }
.fgw-g .g-ov-sub { color: #b4bfe2; font-size: 14px; }
.fgw-g .g-ov-score { color: #9aa6cf; }
.fgw-g .g-ov-score b { color: #38e1ff; font-family: "Space Grotesk", system-ui, sans-serif; }
.fgw-keys { margin: -6px 0 16px; font-size: 12px; color: #9aa6cf; }
.fgw-keys kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 1px;
  padding: 1px 5px;
  border: 1px solid #3a4a86;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #1a2346;
  color: #eaf2ff;
  font: 600 11px/1.5 "Space Grotesk", system-ui, sans-serif;
}

@media (max-width: 360px) {
  .fgw-g { padding: 12px 8px 10px; }
  .fgw-g .g-stat-v { font-size: 17px; }
  .fgw-g .g-stat-l { font-size: 9px; letter-spacing: .06em; }
  .fgw-btn { min-height: 44px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fgw-btn, .fgw-dots i { transition: none; }
}

/*
 * P2E mini-games, set X (ForGame Top 10 arcade) — fghook, fgfire, fgrail,
 * fgcycle, fgplates. Load after games.css (shell, HUD, overlays, .g-stage
 * come from there). Every selector is scoped to .fgx-g or an fgx- class, so
 * the other sites that load this file are untouched. Scenes are drawn on
 * canvas; this file styles the dark "cabinet" frame with its lime top rule,
 * the HUD chips, the life pips, the on-screen pads and the overlay cards.
 */
.fgx-g {
  max-width: 480px;
  padding: 16px 12px 12px;
  border-radius: 20px;
  border: 1px solid #263247;
  background:
    linear-gradient(90deg, #c6ff3d, #2ee6c8 55%, #ff6b4a) top / 100% 4px no-repeat,
    #0f1623;
  color: #eef3ff;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 20px 44px rgba(6, 10, 20, .35);
  line-height: 1.4;
}
.fgx-g:focus-visible { box-shadow: 0 0 0 3px #c6ff3d, 0 20px 44px rgba(6, 10, 20, .35); }
.fgx-g .g-hud { gap: 6px; }
.fgx-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 12px;
  background: #182233;
  border: 1px solid #263247;
}
.fgx-g .g-stat:first-child { background: #1c2a14; border-color: #3f5a1c; }
.fgx-g .g-stat:first-child .g-stat-v { color: #c6ff3d; }
.fgx-g .g-stat-l { color: #93a0b8; font-size: 10.5px; letter-spacing: .08em; font-weight: 700; }
.fgx-g .g-stat-v { color: #eef3ff; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fgx-g .g-stat.is-hot { border-color: #ffb020; }
.fgx-g .g-stat.is-hot .g-stat-v { color: #ffb020; }
.fgx-g .g-stat.is-low .g-stat-v { color: #ff6b4a; }

.fgx-pips { display: flex; justify-content: center; align-items: center; gap: 5px; height: 27px; }
.fgx-pips i {
  width: 11px; height: 11px; display: block; border-radius: 3px;
  background: #ff6b4a;
  box-shadow: 0 0 0 2px rgba(255, 107, 74, .22);
  transform: rotate(45deg);
  transition: opacity .2s, transform .2s;
}
.fgx-pips i.is-off { opacity: .18; transform: rotate(45deg) scale(.7); box-shadow: none; }

.fgx-g .g-bar { height: 6px; margin: 0 0 10px; background: #1b2638; }
.fgx-g .g-bar-fill { background: linear-gradient(90deg, #2ee6c8, #c6ff3d); }
.fgx-g .g-bar-fill.is-low { background: #ff6b4a; }

.fgx-g .g-stage {
  border-radius: 14px;
  background: #0a111c;
  box-shadow: inset 0 0 0 1px #263247;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.fgx-hook .g-stage::before { padding-top: 125%; }
.fgx-fire .g-stage::before { padding-top: 125%; }
.fgx-fire .g-stage { cursor: crosshair; }
.fgx-rail .g-stage::before { padding-top: 131.25%; }
.fgx-cycle .g-stage::before { padding-top: 100%; }
.fgx-plates .g-stage::before { padding-top: 100%; }

.fgx-pad { display: flex; gap: 8px; margin-top: 10px; }
.fgx-pad button {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-height: 46px;
  border: 1px solid #2c3a52;
  border-radius: 12px;
  background: #182233;
  color: #eef3ff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.fgx-pad button:active { background: #24324a; transform: translateY(1px); }
.fgx-pad button:focus-visible { outline: 2px solid #c6ff3d; outline-offset: 2px; }

.fgx-g .g-cap { color: #93a0b8; font-size: 13.5px; min-height: 1.5em; }
.fgx-g .g-cap.g-cap-cta { color: #c6ff3d; }

.fgx-g .g-btn {
  background: #c6ff3d;
  color: #0f1623;
  box-shadow: 0 6px 0 #5d7d12;
  padding: 12px 32px;
}
.fgx-g .g-btn:hover { filter: none; background: #d6ff6a; }
.fgx-g .g-btn:focus-visible { outline-color: #eef3ff; }

.fgx-g .g-overlay.fgx-ov { background: rgba(8, 12, 22, .74); }
.fgx-g .g-ov-card {
  background: #141d2c;
  border: 1px solid #2c3a52;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  color: #eef3ff;
}
.fgx-g .g-ov-title { font-size: 25px; font-weight: 900; color: #eef3ff; }
.fgx-g .g-ov-sub { color: #b4bfd4; font-size: 14px; }
.fgx-g .g-ov-score { color: #93a0b8; }
.fgx-g .g-ov-score b { color: #c6ff3d; }
.fgx-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  background: #22301a;
  color: #c6ff3d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fgx-keys { margin: -6px 0 16px; font-size: 12.5px; color: #8492ab; }

@media (max-width: 420px) {
  .fgx-g { padding: 12px 8px 8px; border-radius: 16px; }
  .fgx-g .g-stat-l { font-size: 9.5px; letter-spacing: .05em; }
  .fgx-g .g-stat-v { font-size: 17px; }
  .fgx-g .g-ov-card { padding: 18px 14px; }
  .fgx-g .g-ov-sub { font-size: 13.5px; margin-bottom: 14px; }
  .fgx-pad button { min-height: 44px; font-size: 14px; }
}

/*
 * P2E mini-games, set Y (Offrify Plus shopping arcade) — ofscan, ofshake,
 * oflift, ofsushi, ofsignal. Load after games.css (shell, HUD, overlays and
 * .g-stage come from there). Every selector is scoped to .ofy-g or an ofy-
 * class, so the other sites that load this file are untouched. Scenes are
 * drawn on canvas; this file styles the cream "register" frame with its
 * striped awning top, the price-sticker HUD cells, life pips, the chunky
 * register-key pads and the receipt-style overlay cards.
 */
.g-root.ofy-g {
  max-width: 470px;
  padding: 22px 12px 12px;
  border-radius: 18px;
  border: 2px solid #2b1d14;
  background:
    repeating-linear-gradient(90deg, #e8432e 0 22px, #fff6e3 22px 44px) top / 100% 10px no-repeat,
    #fff6e3;
  color: #2b1d14;
  font-family: "Archivo", system-ui, sans-serif;
  box-shadow: 0 6px 0 #2b1d14;
  line-height: 1.4;
}
.ofy-g .g-hud { gap: 6px; }
.ofy-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 5px 4px 4px;
  border-radius: 10px;
  background: #ffffff;
  border: 2px solid #2b1d14;
}
.ofy-g .g-stat:first-child { background: #ffc93c; }
.ofy-g .g-stat-l { color: #6b5443; font-size: 10px; letter-spacing: .1em; font-weight: 700; }
.ofy-g .g-stat-v { color: #2b1d14; font-family: "Archivo Black", "Archivo", system-ui, sans-serif; font-size: 19px; font-weight: 400; font-variant-numeric: tabular-nums; }

.ofy-pips { display: flex; justify-content: center; align-items: center; gap: 5px; height: 24px; }
.ofy-pips i {
  width: 12px; height: 12px; display: block; border-radius: 50%;
  background: #e8432e;
  border: 2px solid #2b1d14;
  transition: opacity .2s, transform .2s;
}
.ofy-pips i.is-off { opacity: .2; transform: scale(.7); }

.ofy-g .g-bar { height: 7px; margin: 0 0 10px; background: #f1dcb4; border-radius: 4px; border: 1px solid #2b1d14; }
.ofy-g .g-bar-fill { background: #138a8a; }
.ofy-g .g-bar-fill.is-low { background: #e8432e; }

.ofy-g .g-stage {
  border-radius: 12px;
  background: #fff6e3;
  border: 2px solid #2b1d14;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.ofy-scan .g-stage::before { padding-top: 112.5%; }
.ofy-shake .g-stage::before, .ofy-sushi .g-stage::before { padding-top: 125%; }
.ofy-lift .g-stage::before { padding-top: 131.25%; }
.ofy-signal .g-stage::before { padding-top: 106.25%; }

/* register keys under the stage */
.ofy-pad { display: flex; gap: 8px; margin-top: 10px; }
.ofy-btn {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  border: 2px solid #2b1d14;
  border-radius: 12px;
  background: #ffffff;
  color: #2b1d14;
  font: 800 20px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 4px 0 #2b1d14;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s, box-shadow .08s, background .12s;
}
.ofy-btn:focus-visible { outline: 3px solid #138a8a; outline-offset: 2px; }
.ofy-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b1d14; }
.ofy-btn-main { flex-grow: 1.8; background: #ffc93c; font-size: 16px; text-transform: uppercase; }
.ofy-pad-4 .ofy-btn { background: #ffd9d3; }
.ofy-pad-4 .ofy-btn.is-on { background: #9fe0c2; }

/* Belt Bites key legend */
.ofy-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #4b382a; }
.ofy-legend b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; border-radius: 50%; background: #2b1d14; color: #ffc93c; font-size: 10px; }

.ofy-g .g-cap { color: #6b5443; font-size: 13px; min-height: 20px; }
.ofy-g .g-cap.g-cap-cta { color: #2b1d14; }

.ofy-g .g-btn {
  background: #d23a24;
  color: #ffffff;
  border: 2px solid #2b1d14;
  border-radius: 999px;
  box-shadow: 0 4px 0 #2b1d14;
  font-family: "Archivo Black", "Archivo", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .03em;
  padding: 11px 32px;
}
.ofy-g .g-btn:hover { filter: none; background: #bb2f1b; }
.ofy-g .g-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2b1d14; }
.ofy-g .g-btn:focus-visible { outline: 3px solid #138a8a; outline-offset: 3px; }

/* overlays: a till receipt */
.ofy-g .g-overlay.ofy-ov { background: rgba(255, 246, 227, .78); }
.ofy-g .g-ov-card {
  position: relative;
  background: #ffffff;
  border: 0;
  border-radius: 4px 4px 0 0;
  padding: 20px 18px 30px;
  box-shadow: 0 10px 28px rgba(43, 29, 20, .22);
  color: #2b1d14;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
}
.ofy-ov-tag {
  display: block;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #c9b49a;
  color: #6b5443;
  font: 700 11px/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ofy-g .g-ov-title { font-family: "Archivo Black", "Archivo", system-ui, sans-serif; font-weight: 400; font-size: 24px; line-height: 1.1; color: #2b1d14; }
.ofy-g .g-ov-sub { color: #4b382a; font-size: 14px; }
.ofy-g .g-ov-score { color: #6b5443; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.ofy-g .g-ov-score b { color: #2b1d14; font-family: "Archivo Black", "Archivo", system-ui, sans-serif; font-weight: 400; }
.ofy-keys { margin: -6px 0 16px; font-size: 12px; color: #6b5443; }
.ofy-keys kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 1px;
  padding: 1px 5px;
  border: 1.5px solid #2b1d14;
  border-bottom-width: 3px;
  border-radius: 5px;
  background: #fff6e3;
  color: #2b1d14;
  font: 700 11px/1.5 "Archivo", system-ui, sans-serif;
}

@media (max-width: 360px) {
  .ofy-g { padding: 18px 8px 10px; }
  .ofy-g .g-stat-v { font-size: 16px; }
  .ofy-g .g-stat-l { font-size: 9px; letter-spacing: .05em; }
  .ofy-btn { min-height: 44px; font-size: 18px; }
  .ofy-btn-main { font-size: 14px; }
  .ofy-legend { font-size: 11px; gap: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ofy-btn, .ofy-pips i { transition: none; }
}

/*
 * P2E mini-games, set Z (Valenks mission control) — vkwell, vkcore, vkturret,
 * vkblast, vkrope, vkdock, vkmine, vksplit, vksail, vkbeam. Load after
 * games.css. Every selector is scoped to .vlk-g or a vlk- class so the other
 * sites that load this file are untouched. Scenes are drawn on canvas; this
 * file styles the HUD-panel frame (thin cyan border with corner brackets),
 * the readouts, pips, heat meter, touch pads and the overlay cards.
 */
.vlk-g {
  max-width: 480px;
  padding: 14px 12px 12px;
  border-radius: 6px;
  border: 1px solid #262d6e;
  background:
    linear-gradient(#3de8ff, #3de8ff) left top / 18px 2px no-repeat,
    linear-gradient(#3de8ff, #3de8ff) left top / 2px 18px no-repeat,
    linear-gradient(#3de8ff, #3de8ff) right top / 18px 2px no-repeat,
    linear-gradient(#3de8ff, #3de8ff) right top / 2px 18px no-repeat,
    linear-gradient(#ff4fd8, #ff4fd8) left bottom / 18px 2px no-repeat,
    linear-gradient(#ff4fd8, #ff4fd8) left bottom / 2px 18px no-repeat,
    linear-gradient(#ff4fd8, #ff4fd8) right bottom / 18px 2px no-repeat,
    linear-gradient(#ff4fd8, #ff4fd8) right bottom / 2px 18px no-repeat,
    #0b0d26;
  color: #e6e9ff;
  font-family: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 24px 50px rgba(3, 4, 16, .45);
  line-height: 1.4;
}
.vlk-g:focus-visible { box-shadow: 0 0 0 3px #3de8ff, 0 24px 50px rgba(3, 4, 16, .45); }
.vlk-g .g-hud { gap: 6px; }
.vlk-g .g-stat {
  align-items: center;
  text-align: center;
  padding: 5px 4px 4px;
  border-radius: 3px;
  background: #11143a;
  border: 1px solid #262d6e;
  border-top: 2px solid #3de8ff;
}
.vlk-g .g-stat:first-child { border-top-color: #ffb547; }
.vlk-g .g-stat:first-child .g-stat-v { color: #ffb547; }
.vlk-g .g-stat-l { color: #a3a9d6; font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.vlk-g .g-stat-v { color: #e6e9ff; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vlk-g .g-stat.is-hot { border-top-color: #ff4fd8; }
.vlk-g .g-stat.is-hot .g-stat-v { color: #ff8fe6; }
.vlk-g .g-stat.is-low .g-stat-v { color: #ff7088; }
.vlk-g .g-stat.is-low { border-top-color: #ff5470; }

.vlk-pips { display: flex; justify-content: center; align-items: center; gap: 5px; height: 26px; }
.vlk-pips i { width: 12px; height: 12px; display: block; border-radius: 50%; border: 2px solid #3de8ff; background: rgba(61, 232, 255, .35); transition: opacity .2s, transform .2s; }
.vlk-pips i.is-off { opacity: .2; transform: scale(.7); background: transparent; border-color: #ff5470; }
.vlk-meter { display: block; width: 100%; height: 8px; margin: 9px 0 9px; border-radius: 2px; background: #1b2058; overflow: hidden; }
.vlk-meter i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #3de8ff, #ffb547 70%, #ff5470); }

.vlk-g .g-bar { height: 4px; margin: 0 0 10px; background: #1b2058; border-radius: 0; }
.vlk-g .g-bar-fill { background: linear-gradient(90deg, #3de8ff, #ff4fd8); }
.vlk-g .g-bar-fill.is-low { background: #ff5470; }

.vlk-g .g-stage {
  border-radius: 3px;
  background: #070818;
  box-shadow: inset 0 0 0 1px #262d6e;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}
.vlk-g .g-stage::before { padding-top: 125%; }
.vlk-core .g-stage::before { padding-top: 118.75%; }
.vlk-blast .g-stage::before { padding-top: 118.18%; }
.vlk-blast .g-stage, .vlk-dock .g-stage, .vlk-sail .g-stage, .vlk-beam .g-stage { cursor: pointer; }

.vlk-pad { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.vlk-pad button {
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  border: 1px solid #2f3780;
  border-radius: 4px;
  background: #13174a;
  color: #e6e9ff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.vlk-pad button:active { background: #1f2566; transform: translateY(1px); }
.vlk-pad button:focus-visible { outline: 2px solid #3de8ff; outline-offset: 2px; }
.vlk-dpad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 42px); gap: 4px; }
.vlk-dpad button { min-height: 0; padding: 0; }
.vlk-dpad button:nth-child(1) { grid-column: 2; grid-row: 1; }
.vlk-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.vlk-dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.vlk-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.vlk-pad .vlk-fire { flex: 0 1 140px; min-height: 88px; background: #ffb547; border-color: #ffb547; color: #1a1030; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; }
.vlk-pad .vlk-fire:active { background: #ffc978; }
.vlk-pad-row button { flex: 1 1 0; }
.vlk-pad-row .vlk-fire { min-height: 46px; flex: 1.3 1 0; }

.vlk-g .g-cap { color: #a3a9d6; font-size: 13.5px; min-height: 1.5em; }
.vlk-g .g-cap.g-cap-cta { color: #3de8ff; }

.vlk-g .g-overlay { background: rgba(7, 8, 24, .78); }
.vlk-g .g-ov-card {
  max-width: 310px;
  border-radius: 4px;
  background: #0f1236;
  border: 1px solid #2f3780;
  border-top: 3px solid #3de8ff;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.vlk-tag { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border: 1px solid #ff4fd8; color: #ff8fe6; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; }
.vlk-g .g-ov-title { font-size: 25px; font-weight: 800; letter-spacing: .01em; color: #fff; }
.vlk-g .g-ov-sub { color: #b9bee6; }
.vlk-g .g-ov-score b { color: #ffb547; }
.vlk-keys { margin: -6px 0 16px; font-size: 12.5px; color: #a3a9d6; line-height: 1.9; }
.vlk-keys kbd { display: inline-block; min-width: 22px; padding: 0 5px; margin: 0 1px; border: 1px solid #3a4290; border-bottom-width: 2px; border-radius: 3px; background: #161a4c; color: #e6e9ff; font: 700 11px/18px "Exo 2", system-ui, sans-serif; }
.vlk-g .g-btn {
  background: #3de8ff;
  color: #070818;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #3de8ff, 0 0 24px rgba(61, 232, 255, .35);
  padding: 12px 30px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
}
.vlk-g .g-btn:focus-visible { outline: 3px solid #ff4fd8; outline-offset: 3px; }
@media (max-width: 360px) {
  .vlk-g { padding: 10px 8px 8px; }
  .vlk-g .g-stat-v { font-size: 16px; }
  .vlk-g .g-stat-l { font-size: 9px; letter-spacing: .06em; }
  .vlk-dpad { grid-template-columns: repeat(3, 42px); }
}
@media (prefers-reduced-motion: reduce) { .vlk-g .g-btn { box-shadow: none; } }

/* ==== vlk-fx: premium cosmic-arcade skin for vkwell, vkcore, vkrope, vkturret, vkblast ====
 * Additive and scoped: only roots that carry .vlk-fx (set by those five games) are affected. */
.vlk-g.vlk-fx {
  --fx-ink: #fff6ff;
  --fx-muted: #cdbaf2;
  --fx-cyan: #4cf0ff;
  --fx-pink: #ff4fb8;
  --fx-violet: #9b5cff;
  --fx-orange: #ff9a3d;
  --fx-gold: #ffd35c;
  --fx-red: #ff4d6d;
  max-width: 480px;
  padding: 14px 12px 12px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(155, 92, 255, .45), transparent 60%),
    radial-gradient(90% 55% at 100% 100%, rgba(255, 79, 184, .35), transparent 60%),
    radial-gradient(70% 40% at 100% 0%, rgba(255, 154, 61, .22), transparent 70%),
    linear-gradient(165deg, #2a0f5c 0%, #1a0838 55%, #2c0a3e 100%);
  color: var(--fx-ink);
  box-shadow: 0 28px 60px rgba(20, 4, 46, .55), 0 0 0 1px rgba(255, 79, 184, .12), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.vlk-g.vlk-fx:focus-visible { box-shadow: 0 0 0 2px rgba(76, 240, 255, .55), 0 28px 60px rgba(20, 4, 46, .55); }

/* HUD: glossy pills */
.vlk-g.vlk-fx .vlk-hud { gap: 6px; margin-bottom: 9px; }
.vlk-g.vlk-fx .vlk-st {
  position: relative;
  align-items: center;
  text-align: center;
  min-height: 52px;
  padding: 6px 4px 7px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px rgba(10, 0, 30, .28);
  overflow: hidden;
}
.vlk-g.vlk-fx .vlk-st .g-stat-l { color: var(--fx-muted); font-size: 9.5px; letter-spacing: .14em; font-weight: 800; }
.vlk-g.vlk-fx .vlk-st .g-stat-v { color: #fff; font-size: 20px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(155, 92, 255, .55); }
.vlk-g.vlk-fx .vlk-st-score {
  background: linear-gradient(160deg, #ffb347 0%, #ff5fa8 55%, #b14dff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px rgba(255, 79, 184, .35);
}
.vlk-g.vlk-fx .vlk-st-score .g-stat-l { color: rgba(255, 255, 255, .85); }
.vlk-g.vlk-fx .vlk-st-score .g-stat-v { color: #fff; text-shadow: 0 2px 0 rgba(120, 20, 90, .45); }
.vlk-g.vlk-fx .vlk-st::after { content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 40%; border-radius: 14px 14px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none; }
.vlk-g.vlk-fx .vlk-st.is-hot { background: linear-gradient(180deg, rgba(76, 240, 255, .35), rgba(155, 92, 255, .25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 18px rgba(76, 240, 255, .45); }
.vlk-g.vlk-fx .vlk-st.is-hot .g-stat-v { color: #eaffff; text-shadow: 0 0 12px rgba(76, 240, 255, .9); }
.vlk-g.vlk-fx .vlk-st.is-low { background: linear-gradient(180deg, rgba(255, 77, 109, .45), rgba(255, 77, 109, .15)); }
.vlk-g.vlk-fx .vlk-st.is-low .g-stat-v { color: #fff; }
.vlk-g.vlk-fx .vlk-cm { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.vlk-g.vlk-fx .vlk-cm i { display: block; height: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--fx-cyan), var(--fx-pink), var(--fx-gold)); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); box-shadow: 0 0 8px rgba(255, 79, 184, .8); }
.vlk-g.vlk-fx .vlk-icons { display: flex; justify-content: center; align-items: center; gap: 3px; height: 24px; }
.vlk-g.vlk-fx .vlk-icons i { display: block; width: 17px; height: 17px; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1), filter .25s; filter: drop-shadow(0 0 4px rgba(76, 240, 255, .8)); }
.vlk-g.vlk-fx .vlk-icons svg { display: block; width: 100%; height: 100%; fill: var(--fx-cyan); }
.vlk-g.vlk-fx .vlk-icons i.is-off { opacity: .25; transform: scale(.7); filter: none; }
.vlk-g.vlk-fx .vlk-icons i.is-off svg { fill: rgba(255, 255, 255, .5); }
.vlk-g.vlk-fx .vlk-icons-heart svg { fill: var(--fx-pink); }

/* timer bar */
.vlk-g.vlk-fx .vlk-tbar { height: 8px; margin: 0 2px 10px; border-radius: 8px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; }
.vlk-g.vlk-fx .vlk-tbar .g-bar-fill { border-radius: 8px; background: linear-gradient(90deg, #7d4dff, #ff4fb8 55%, #ffb347); box-shadow: 0 0 10px rgba(255, 79, 184, .7); transition: none; }
.vlk-g.vlk-fx .vlk-tbar .g-bar-fill.is-low { background: linear-gradient(90deg, #ff4d6d, #ff9a3d); animation: vlkfx-blink .6s ease-in-out infinite alternate; }

/* stage */
.vlk-g.vlk-fx .vlk-stage {
  border-radius: 18px;
  background: #170838;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 26px rgba(10, 0, 30, .45);
}
.vlk-g.vlk-fx .vlk-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 40px rgba(20, 0, 50, .55); pointer-events: none; }
.vlk-g.vlk-fx .g-cap { color: var(--fx-muted); font-size: 13px; min-height: 1.5em; margin-top: 9px; }
.vlk-g.vlk-fx .g-cap.g-cap-cta { color: #fff; }

/* overlays */
.vlk-g.vlk-fx .vlk-ov {
  background: radial-gradient(90% 60% at 50% 40%, rgba(155, 92, 255, .32), rgba(20, 6, 46, .72) 70%);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
}
.vlk-g.vlk-fx .vlk-card {
  position: relative;
  max-width: 320px;
  padding: 22px 20px 20px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-top-width: 1px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 79, 184, .35), transparent 65%),
    linear-gradient(170deg, rgba(70, 30, 140, .92), rgba(32, 10, 70, .94));
  box-shadow: 0 24px 60px rgba(10, 0, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 40px rgba(255, 79, 184, .18);
}
.vlk-g.vlk-fx .vlk-emblem { width: 76px; height: 76px; margin: -2px auto 8px; border-radius: 24px; padding: 8px; background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 24px rgba(255, 79, 184, .3); }
.vlk-g.vlk-fx .vlk-emblem svg { display: block; width: 100%; height: 100%; }
.vlk-g.vlk-fx .vlk-tag { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #ffd6f2; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.vlk-g.vlk-fx .g-ov-title {
  font-size: 30px; font-weight: 900; letter-spacing: -.01em; line-height: 1.1;
  color: #fff;
  background: linear-gradient(90deg, #ffffff, #ffd6f2 40%, #ffc178);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 79, 184, .45));
}
.vlk-g.vlk-fx .g-ov-sub { color: #e6d8ff; font-size: 14px; margin: 8px 0 12px; }
.vlk-g.vlk-fx .vlk-keys { margin: 0 0 16px; font-size: 12px; color: var(--fx-muted); line-height: 2; }
.vlk-g.vlk-fx .vlk-keys kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin: 0 1px; border: 0; border-radius: 7px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .2); color: #fff; font: 800 11px/20px "Exo 2", system-ui, sans-serif; }
.vlk-g.vlk-fx .vlk-go {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 210px;
  padding: 15px 30px;
  border-radius: 99px;
  overflow: hidden;
  color: #fff;
  font-size: 17px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(135deg, #ffb347 0%, #ff4fb8 50%, #9b5cff 100%);
  box-shadow: 0 10px 26px rgba(255, 79, 184, .55), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(90, 10, 80, .35);
  text-shadow: 0 1px 2px rgba(90, 10, 80, .5);
}
.vlk-g.vlk-fx .vlk-go svg { width: 20px; height: 20px; fill: #fff; flex: 0 0 auto; }
.vlk-g.vlk-fx .vlk-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: vlkfx-shine 2.6s ease-in-out infinite; }
.vlk-g.vlk-fx .vlk-go:hover { filter: brightness(1.08) saturate(1.1); }
.vlk-g.vlk-fx .vlk-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vlk-g.vlk-fx .vlk-final { margin: 8px 0 2px; color: var(--fx-muted); }
.vlk-g.vlk-fx .vlk-final b { font-size: 60px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #fff 30%, #ffc178); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 14px rgba(255, 154, 61, .5)); font-variant-numeric: tabular-nums; }
.vlk-g.vlk-fx .vlk-best { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: #e6d8ff; }
.vlk-g.vlk-fx .vlk-best b { color: #fff; }
.vlk-g.vlk-fx .vlk-best em { font-style: normal; padding: 2px 9px; border-radius: 99px; background: linear-gradient(90deg, #4cf0ff, #9b5cff); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 14px rgba(76, 240, 255, .6); }
.vlk-g.vlk-fx .vlk-sum { font-size: 13px; margin: 8px 0 16px; color: #d9c8fb; }

/* touch pad (Grid Blast) */
.vlk-g.vlk-fx .vlk-pad button { border: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px rgba(10, 0, 30, .35); color: #fff; }
.vlk-g.vlk-fx .vlk-pad button:active { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)); }
.vlk-g.vlk-fx .vlk-pad .vlk-fire { border-radius: 22px; background: linear-gradient(140deg, #ffb347, #ff4fb8 60%, #9b5cff); color: #fff; text-shadow: 0 1px 2px rgba(90, 10, 80, .5); box-shadow: 0 8px 20px rgba(255, 79, 184, .45), inset 0 2px 0 rgba(255, 255, 255, .45); }

.vlk-g.vlk-fx .vlk-inv { display: flex; justify-content: center; gap: 8px; margin-top: 9px; }
.vlk-g.vlk-fx .vlk-inv span { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); color: var(--fx-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.vlk-g.vlk-fx .vlk-inv b { color: #fff; font-size: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* stage proportions for the skinned games */
.vlk-g.vlk-fx.vlk-well .vlk-stage::before, .vlk-g.vlk-fx.vlk-rope .vlk-stage::before, .vlk-g.vlk-fx.vlk-turret .vlk-stage::before { padding-top: 125%; }
.vlk-g.vlk-fx.vlk-core .vlk-stage::before { padding-top: 118.75%; }
.vlk-g.vlk-fx.vlk-blast .vlk-stage::before { padding-top: 118.18%; }
.vlk-g.vlk-fx.vlk-blast .vlk-stage, .vlk-g.vlk-fx.vlk-turret .vlk-stage { cursor: pointer; }

@keyframes vlkfx-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes vlkfx-blink { from { opacity: 1; } to { opacity: .55; } }
@media (max-width: 360px) {
  .vlk-g.vlk-fx { padding: 10px 8px 8px; border-radius: 20px; }
  .vlk-g.vlk-fx .vlk-hud { gap: 4px; }
  .vlk-g.vlk-fx .vlk-st { min-height: 46px; border-radius: 13px; }
  .vlk-g.vlk-fx .vlk-st .g-stat-v { font-size: 16px; }
  .vlk-g.vlk-fx .vlk-st .g-stat-l { font-size: 8.5px; letter-spacing: .06em; }
  .vlk-g.vlk-fx .vlk-icons i { width: 14px; height: 14px; }
  .vlk-g.vlk-fx .vlk-card { padding: 18px 14px 16px; }
  .vlk-g.vlk-fx .g-ov-title { font-size: 25px; }
  .vlk-g.vlk-fx .vlk-emblem { width: 60px; height: 60px; border-radius: 18px; }
  .vlk-g.vlk-fx .vlk-go { min-width: 0; width: 100%; padding: 13px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .vlk-g.vlk-fx .vlk-go::after, .vlk-g.vlk-fx .vlk-tbar .g-bar-fill.is-low { animation: none; }
}
/* ==== /vlk-fx ==== */

/* ==== vlk-x START: cosmic-arcade skin for vksplit, vkbeam, vkmine, vksail, vkdock only (additive; other vlk games untouched) ==== */
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) {
  max-width: 480px;
  padding: 14px 12px 12px;
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(143, 92, 255, .55), rgba(143, 92, 255, 0) 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 140, 61, .38), rgba(255, 140, 61, 0) 62%),
    radial-gradient(70% 50% at 100% 20%, rgba(255, 79, 168, .28), rgba(255, 79, 168, 0) 70%),
    linear-gradient(165deg, #2c0b66, #1b0744 55%, #2a0a4c);
  color: #fff7ff;
  box-shadow: 0 26px 60px rgba(30, 6, 80, .5), 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock):focus-visible { box-shadow: 0 0 0 2px rgba(255, 210, 94, .4), 0 26px 60px rgba(30, 6, 80, .5); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-hud { gap: 6px; margin-bottom: 8px; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat {
  position: relative;
  align-items: center;
  text-align: center;
  padding: 6px 4px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05) 60%, rgba(120, 60, 255, .1));
  box-shadow: 0 6px 16px rgba(10, 0, 40, .3);
}
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat:first-child { border-top-color: rgba(255, 210, 94, .7); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat-l { color: #d9c9ff; font-size: 9.5px; letter-spacing: .14em; font-weight: 800; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat-v { color: #fff; font-size: 19px; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 8px rgba(60, 0, 120, .5); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat:first-child .g-stat-v { color: #ffd25e; background: linear-gradient(180deg, #fff3c4, #ffc24a 55%, #ff8a3d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 6px rgba(255, 140, 61, .45)); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat.is-hot { border-color: rgba(255, 79, 168, .65); box-shadow: 0 0 18px rgba(255, 79, 168, .35), 0 6px 16px rgba(10, 0, 40, .3); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat.is-hot .g-stat-v { color: #ff8fd0; text-shadow: 0 0 12px rgba(255, 79, 168, .8); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat.is-low { border-color: rgba(255, 77, 109, .7); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat.is-low .g-stat-v { color: #ff8095; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xt.is-low { animation: vlkx-alarm .9s ease-in-out infinite; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .is-kick { animation: vlkx-kick .28s cubic-bezier(.2, .9, .3, 1.4); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .is-hit { animation: vlkx-hit .45s ease-out; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xm { display: block; width: 78%; height: 4px; margin: 4px auto 0; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xm i { display: block; height: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #ff4fa8, #ffd25e); box-shadow: 0 0 8px rgba(255, 79, 168, .8); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xm-heat { width: 86%; height: 9px; margin-top: 7px; border-radius: 6px; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xm-heat i { background: linear-gradient(90deg, #4de8ff, #ffd25e 55%, #ff4d6d); box-shadow: none; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xh.is-lock .vlk-xm-heat i { background: #ff4d6d; animation: vlkx-blink .3s steps(2) infinite; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xlives { display: flex; justify-content: center; align-items: center; gap: 4px; height: 23px; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xlives i { display: block; width: 16px; height: 16px; color: #ff6fb8; filter: drop-shadow(0 0 4px rgba(255, 79, 168, .75)); transition: opacity .25s, transform .25s, filter .25s; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xlives svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock).vlk-beam .vlk-xlives i { color: #5dffb4; filter: drop-shadow(0 0 4px rgba(93, 255, 180, .7)); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock).vlk-sail .vlk-xlives i { color: #4de8ff; filter: drop-shadow(0 0 4px rgba(77, 232, 255, .75)); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock).vlk-dock .vlk-xlives i { color: #ffd25e; filter: drop-shadow(0 0 4px rgba(255, 210, 94, .7)); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xlives i.is-off { opacity: .2; transform: scale(.72); filter: none; color: #d9c9ff; }

.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-bar { height: 7px; margin: 0 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-bar-fill { border-radius: 99px; background: linear-gradient(90deg, #4de8ff, #8f5cff 35%, #ff4fa8 70%, #ff9a3d); box-shadow: 0 0 10px rgba(255, 79, 168, .6); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-bar-fill.is-low { background: linear-gradient(90deg, #ff4d6d, #ff9a3d); }

.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stage {
  border-radius: 20px;
  background: #14062f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 4px rgba(143, 92, 255, .18), 0 14px 34px rgba(10, 0, 40, .55);
}

.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-pad button {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-top-color: rgba(255, 255, 255, .35);
  border-radius: 16px;
  background: linear-gradient(180deg, #5a2fc4, #3a138a);
  color: #fff;
  box-shadow: 0 6px 0 #22075a, 0 10px 18px rgba(10, 0, 40, .4);
  transition: transform .06s, box-shadow .06s;
}
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-pad button:active, .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-pad button.is-on { background: linear-gradient(180deg, #6c3be0, #4a1aa6); transform: translateY(4px); box-shadow: 0 2px 0 #22075a, 0 4px 10px rgba(10, 0, 40, .4); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-pad .vlk-fire { background: linear-gradient(135deg, #ffb347, #ff4fa8); border-color: rgba(255, 255, 255, .35); color: #fff; text-shadow: 0 1px 2px rgba(90, 0, 60, .5); box-shadow: 0 6px 0 #a3125f, 0 10px 20px rgba(255, 79, 168, .35); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-pad .vlk-fire:active, .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-pad .vlk-fire.is-on { background: linear-gradient(135deg, #ffc46b, #ff6fb8); box-shadow: 0 2px 0 #a3125f, 0 4px 10px rgba(255, 79, 168, .35); }

.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-cap { color: #e3d6ff; font-size: 13.5px; font-weight: 600; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-cap.g-cap-cta { color: #ffd25e; }

.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-overlay {
  padding: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(90, 30, 170, .28), rgba(16, 4, 40, .7) 75%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-card {
  position: relative;
  overflow: hidden;
  max-width: 320px;
  padding: 22px 20px 18px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .2);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 79, 168, .35), rgba(255, 79, 168, 0) 70%),
    linear-gradient(170deg, rgba(110, 55, 240, .92), rgba(52, 14, 120, .95) 50%, rgba(36, 9, 80, .97));
  box-shadow: 0 28px 60px rgba(8, 0, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 4px rgba(255, 255, 255, .05);
}
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-card::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 46%; border-radius: 0 0 50% 50% / 0 0 30% 30%; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); pointer-events: none; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-card > * { position: relative; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xemb { width: 58px; height: 58px; margin: 0 auto 10px; padding: 14px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #ffd9a0, #ff8a3d 35%, #ff4fa8 70%, #8f2bd8); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 26px rgba(255, 110, 140, .65), inset 0 -4px 8px rgba(80, 0, 90, .35); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xemb svg { display: block; width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 2px 2px rgba(90, 0, 60, .4)); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xbadge { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 210, 94, .14); border: 1px solid rgba(255, 210, 94, .5); color: #ffd25e; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-title { font-size: 29px; font-weight: 800; line-height: 1.1; letter-spacing: .005em; color: #fff; background: linear-gradient(180deg, #ffffff, #ffd6f0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 8px rgba(60, 0, 120, .6)); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-sub { margin: 8px 0 12px; color: #eadfff; font-size: 14px; line-height: 1.45; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xkeys { margin: 0 0 16px; font-size: 12px; line-height: 2; color: #d9c9ff; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xkeys kbd { display: inline-block; min-width: 22px; padding: 0 6px; margin: 0 1px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .28); border-bottom-width: 3px; background: rgba(255, 255, 255, .12); color: #fff; font: 800 11px/18px "Exo 2", system-ui, sans-serif; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-btn.vlk-xgo {
  min-width: 210px;
  padding: 15px 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: linear-gradient(135deg, #ffb347, #ff4fa8 52%, #9a4dff);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(90, 0, 60, .45);
  box-shadow: 0 12px 28px rgba(255, 79, 168, .45), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(90, 0, 110, .3);
  animation: vlkx-glow 1.8s ease-in-out infinite;
}
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-btn.vlk-xgo:hover { filter: brightness(1.08) saturate(1.1); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-btn.vlk-xgo:focus-visible { outline: 3px solid #ffd25e; outline-offset: 3px; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xbest { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d9c9ff; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xbest b { color: #ffd25e; font-size: 14px; letter-spacing: 0; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-score { margin: 4px 0 6px; color: #d9c9ff; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-score b { font-size: 54px; font-weight: 800; color: #ffd25e; background: linear-gradient(180deg, #fff3c4, #ffc24a 50%, #ff8a3d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 12px rgba(255, 120, 60, .5)); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xrow { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d9c9ff; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xrow b { color: #fff; font-size: 15px; letter-spacing: 0; }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xnew { padding: 3px 10px; border-radius: 99px; background: linear-gradient(135deg, #ffd25e, #ff9a3d); color: #3a0a2a; letter-spacing: .06em; box-shadow: 0 0 14px rgba(255, 210, 94, .6); }
.vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xend .g-ov-sub { margin: 10px 0 16px; font-size: 13px; color: #d9c9ff; }
@keyframes vlkx-kick { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes vlkx-hit { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); background-color: rgba(255, 77, 109, .45); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes vlkx-alarm { 0%, 100% { box-shadow: 0 0 0 rgba(255, 77, 109, 0); } 50% { box-shadow: 0 0 16px rgba(255, 77, 109, .7); } }
@keyframes vlkx-blink { 50% { opacity: .35; } }
@keyframes vlkx-glow { 0%, 100% { box-shadow: 0 12px 28px rgba(255, 79, 168, .45), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(90, 0, 110, .3); } 50% { box-shadow: 0 12px 34px rgba(255, 150, 70, .7), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(90, 0, 110, .3); } }
@media (max-width: 360px) {
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) { padding: 10px 8px 8px; border-radius: 20px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-hud { gap: 4px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat { padding: 5px 2px; border-radius: 12px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat-v { font-size: 16px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-stat-l { font-size: 8.5px; letter-spacing: .08em; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xlives i { width: 13px; height: 13px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xlives { gap: 2px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-title { font-size: 24px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-btn.vlk-xgo { min-width: 0; width: 100%; padding: 14px 18px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-ov-card { padding: 18px 14px 14px; }
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xemb { width: 48px; height: 48px; padding: 12px; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .g-btn.vlk-xgo, .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xt.is-low, .vlk-g:is(.vlk-split, .vlk-beam, .vlk-mine, .vlk-sail, .vlk-dock) .vlk-xh.is-lock .vlk-xm-heat i { animation: none; }
}
/* ==== vlk-x END ==== */

/*
 * P2E mini-games, set ZA (Mindshift Lab) — msstroop, msrotate, msswitch,
 * mstrack, msflank. Load after games.css (shell, HUD, overlays and .g-stage
 * come from there). Every selector is scoped to .msl-g or an msl- class, so the
 * other sites that load this file are untouched. Look: a white instrument
 * panel with a violet-to-mint top rule, soft grey readouts, graphite "bench"
 * stages and rounded key caps with their keyboard key printed on them.
 */
.msl-g {
  --g-bg: #f6f5fb; --g-panel: #ffffff; --g-tile: #ffffff; --g-tile-text: #1f2128; --g-text: #1f2128; --g-muted: #5d6170;
  --g-accent: #7b3cff; --g-accent-2: #14b886; --g-danger: #e5484d; --g-radius: 22px;
  --msl-vio: #7b3cff; --msl-vio-d: #5a22d6; --msl-mint: #3ee6b0; --msl-mint-d: #0b7a5a; --msl-gr: #24262e; --msl-gr2: #2f323c; --msl-line: #e2e1ea;
  max-width: 480px;
  padding: 16px 14px 14px;
  border-radius: 22px;
  border: 1px solid var(--msl-line);
  background: linear-gradient(90deg, var(--msl-vio), var(--msl-mint)) top / 100% 4px no-repeat, #fff;
  color: #1f2128;
  font-family: Manrope, system-ui, sans-serif;
  box-shadow: 0 18px 40px rgba(36, 38, 46, .08);
  line-height: 1.4;
}
.msl-g .g-hud { gap: 6px; }
.msl-g .g-stat { align-items: center; text-align: center; padding: 6px 4px 5px; border-radius: 12px; background: #f4f3f8; border: 1px solid #ebe9f2; }
.msl-g .g-stat-l { color: #5d6170; font-size: 10px; letter-spacing: .1em; font-weight: 800; }
.msl-g .g-stat-v { color: #1f2128; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.msl-g .g-stat:first-child { background: #f1ebff; border-color: #ded1ff; }
.msl-g .g-stat:first-child .g-stat-v { color: var(--msl-vio-d); }
.msl-pips { display: flex; justify-content: center; align-items: center; gap: 5px; height: 25px; }
.msl-pips i { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--msl-vio); box-shadow: 0 0 0 3px rgba(123, 60, 255, .16); transition: opacity .2s, transform .2s; }
.msl-pips i.is-off { opacity: .2; transform: scale(.7); background: #8a8d99; box-shadow: none; }
.msl-g .g-bar { height: 5px; margin: 0 0 10px; background: #ecebf3; border-radius: 3px; }
.msl-g .g-bar-fill { background: linear-gradient(90deg, var(--msl-vio), var(--msl-mint)); }
.msl-g .g-bar-fill.is-low { background: var(--g-danger); }
.msl-g .g-cap { color: #5d6170; font-weight: 600; min-height: 1.4em; }
.msl-g .g-cap.g-cap-cta { color: #1f2128; }
.msl-g .g-btn { background: var(--msl-vio); color: #fff; border-radius: 14px; box-shadow: 0 6px 0 var(--msl-vio-d); font-family: inherit; }
.msl-g .g-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--msl-vio-d); }
.msl-g .g-ov-card { border: 1px solid var(--msl-line); box-shadow: 0 18px 44px rgba(36, 38, 46, .18); border-radius: 20px; }
.msl-g .g-ov-sub b { color: #1f2128; }
.msl-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--msl-gr); color: var(--msl-mint); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.msl-keys { margin: -6px 0 16px; font-size: 13px; color: #5d6170; }
.msl-g kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 2px; border-radius: 6px; border: 1px solid #d3d1de; border-bottom-width: 3px; background: #fff; color: #1f2128; font: 800 12px/1.5 Manrope, system-ui, sans-serif; text-align: center; }

/* ---------- graphite bench stage (DOM games) ---------- */
.msl-stage {
  position: relative; overflow: hidden; height: 360px; border-radius: 16px;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--msl-gr);
  color: #fff; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: background-color .25s;
}
.msl-stage.is-flash { box-shadow: inset 0 0 0 3px var(--g-danger), inset 0 0 40px rgba(229, 72, 77, .45); }
.msl-stage.is-shake { animation: g-shake .3s ease; }
.msl-rule { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #e8e7f0; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.msl-rule b { color: #fff; letter-spacing: .06em; }
.msl-rule-b { top: auto; bottom: 9px; }
.msl-banner { position: absolute; left: 50%; top: 46%; z-index: 5; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 14px; background: #fff; color: #1f2128; font-weight: 800; font-size: 17px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: msl-pop .3s cubic-bezier(.2, .8, .3, 1.3) both; pointer-events: none; }
.msl-banner.is-word { background: var(--msl-vio); color: #fff; }
.msl-banner.is-combo { background: var(--msl-mint); color: #0d2a22; }
.msl-pop { position: absolute; right: 14px; bottom: 56px; z-index: 4; font-weight: 800; font-size: 16px; color: var(--msl-mint); pointer-events: none; animation: msl-float .7s ease-out forwards; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.msl-pop.is-bad { color: #ff8a8f; }

/* ink or word: falling cards */
.msl-cards { position: absolute; left: 0; right: 0; top: 36px; bottom: 96px; }
.msl-line { position: absolute; left: 12px; right: 12px; bottom: 40px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, #ff5a64 0 10px, transparent 10px 16px); }
.msl-card {
  position: absolute; top: 0; left: 50%; width: 200px; height: 54px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--msl-gr2); border: 2px solid #41444f; font-size: 25px; font-weight: 800; letter-spacing: .05em;
  transition: border-color .15s, box-shadow .15s;
}
.msl-card.is-front { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
.msl-card.is-word { border-style: dashed; border-color: var(--msl-mint); background: #2c2550; }
.msl-card.is-word.is-front { box-shadow: 0 0 0 4px rgba(62, 230, 176, .25); }
.msl-card em, .msl-arow em { position: absolute; top: -9px; left: 10px; padding: 1px 7px; border-radius: 999px; background: var(--msl-mint); color: #0d2a22; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.msl-card.is-ok { animation: msl-ok .35s ease-out forwards; border-color: var(--msl-mint); }
.msl-card.is-bad, .msl-arow.is-bad { animation: msl-bad .35s ease-out forwards; border-color: #ff5a64; }
.msl-stage.is-wordmode { background-color: #2b2246; }
.msl-stage.is-wordmode .msl-rule, .msl-stage.is-flankmode .msl-rule { background: var(--msl-vio); }
.msl-stage.is-flankmode .msl-rule { background: var(--msl-mint); color: #0d2a22; }
.msl-stage.is-flankmode .msl-rule b { color: #0d2a22; }

/* arrow rush: rising rows */
.msl-gate { position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 2; border-bottom: 3px dashed #ff5a64; background: linear-gradient(180deg, rgba(255, 90, 100, .18), transparent); }
.msl-gate span { position: absolute; right: 12px; top: 13px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffb3b7; }
.msl-rows { position: absolute; left: 0; right: 0; top: 96px; bottom: 40px; }
.msl-arow { position: absolute; bottom: 0; left: 50%; height: 52px; display: flex; gap: 4px; align-items: center; padding: 0 10px; border-radius: 14px; background: var(--msl-gr2); border: 2px solid #41444f; color: #f2f1f8; transition: border-color .15s; }
.msl-arow i { display: block; width: 34px; height: 34px; }
.msl-arow i svg { width: 100%; height: 100%; }
.msl-arow i.is-mid { position: relative; }
.msl-arow i.is-mid::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -6px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.msl-arow.is-front { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
.msl-arow.is-flank { background: var(--msl-mint); border-color: #b9f7e1; color: #0d2a22; }
.msl-arow.is-flank em { background: #fff; }
.msl-arow.is-flank i.is-mid::after { background: rgba(13, 42, 34, .3); }
.msl-arow.is-okl { animation: msl-okl .32s ease-in forwards; }
.msl-arow.is-okr { animation: msl-okr .32s ease-in forwards; }
.msl-stage.is-flankmode { background-color: #1f2f2b; }

/* rule flip: two panels */
.msl-split { display: grid; grid-template-rows: 1fr 1fr; gap: 0; height: 320px; }
.msl-panel { position: relative; display: flex; flex-direction: column; padding: 8px 12px; transition: opacity .2s, background-color .2s; opacity: .45; }
.msl-panel-top { border-bottom: 2px solid rgba(255, 255, 255, .1); }
.msl-panel.is-live { opacity: 1; }
.msl-panel-top.is-live { background: rgba(123, 60, 255, .22); box-shadow: inset 4px 0 0 var(--msl-vio); }
.msl-panel-bot.is-live { background: rgba(62, 230, 176, .14); box-shadow: inset 4px 0 0 var(--msl-mint); }
.msl-q { margin: 0; font-size: 13px; font-weight: 700; color: #d9d8e3; }
.msl-q b { color: #fff; text-transform: uppercase; letter-spacing: .08em; }
.msl-slot { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
.msl-tile { position: absolute; width: 96px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 20px; background: #fff; color: #1f2128; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); animation: msl-in .18s ease-out both; }
.msl-num { font-size: 52px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.msl-dice { display: grid; grid-template-columns: repeat(3, 14px); gap: 5px; }
.msl-dice i { width: 14px; height: 14px; border-radius: 50%; }
.msl-dice i.on { background: #1f2128; }
.msl-timer { display: block; width: 66px; height: 5px; border-radius: 3px; background: #ecebf3; overflow: hidden; }
.msl-timer i { display: block; height: 100%; background: var(--msl-vio); transform-origin: left center; }
.msl-timer.is-low i { background: var(--g-danger); }
.msl-tile em { position: absolute; top: -9px; right: -8px; padding: 1px 7px; border-radius: 999px; background: #ffd23f; color: #3a2c00; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.msl-tile.is-okl { animation: msl-okl .28s ease-in forwards; }
.msl-tile.is-okr { animation: msl-okr .28s ease-in forwards; }
.msl-tile.is-bad { animation: msl-bad .28s ease-out forwards; background: #ffd6d8; }

/* turn or mirror: specimen pair */
.msl-pair { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 12px 26px; }
.msl-spec { position: relative; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.msl-spec-l { position: absolute; top: 8px; left: 10px; z-index: 1; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #c9c7d6; }
.msl-svg { aspect-ratio: 1; width: 100%; }
.msl-svg svg { width: 100%; height: 100%; }
.msl-dial { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.5; stroke-dasharray: 3 5; }
.msl-shape-a rect { fill: #a57bff; stroke: #d9c8ff; stroke-width: 1.2; }
.msl-shape-b rect { fill: var(--msl-mint); stroke: #c6fbe9; stroke-width: 1.2; }
.msl-spec.is-empty { opacity: .5; }
.msl-pairtimer { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.msl-pairtimer i { display: block; height: 100%; background: linear-gradient(90deg, var(--msl-vio), var(--msl-mint)); transform-origin: left center; }
.msl-pairtimer.is-low i { background: var(--g-danger); }
.msl-verdict { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 12px; background: var(--msl-mint); color: #0d2a22; font-weight: 800; white-space: nowrap; animation: msl-pop .25s ease-out both; }
.msl-verdict.is-bad { background: #ff5a64; color: #fff; }
.msl-rotate .msl-pop { bottom: 30px; }

/* keep track: canvas dish */
.msl-dish.g-stage { border-radius: 16px; background: #f5f4fb; border: 1px solid #e3e1ef; cursor: pointer; touch-action: none; }
.msl-dish.g-stage::before { padding-top: 112.5%; }
.msl-phase { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: var(--msl-gr); color: #fff; font-size: 12px; font-weight: 800; pointer-events: none; }
.msl-phase.is-show { background: var(--msl-vio); }
.msl-phase.is-move { background: var(--msl-gr); }
.msl-phase.is-pick { background: var(--msl-mint); color: #0d2a22; }
.msl-phase.is-perfect { background: #ffd23f; color: #3a2c00; }

/* ---------- key caps ---------- */
.msl-pad { display: grid; gap: 8px; margin-top: 10px; }
.msl-pad4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.msl-pad2 { grid-template-columns: 1fr 1fr; }
.msl-key {
  -webkit-appearance: none; appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid #dddbe7; border-bottom-width: 4px; background: #f7f6fb;
  color: #1f2128; font: 800 13px/1.15 Manrope, system-ui, sans-serif; letter-spacing: .03em; cursor: pointer; touch-action: manipulation;
  transition: transform .08s, background-color .12s, border-color .12s;
}
.msl-key:hover { background: #fff; border-color: #c9c4e0; }
.msl-key:focus-visible { outline: 3px solid var(--msl-vio); outline-offset: 2px; }
.msl-key kbd { margin: 0; font-size: 11px; padding: 0 5px; }
.msl-key > i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); }
.msl-key.is-press { transform: translateY(2px); border-bottom-width: 2px; background: #efe8ff; border-color: var(--msl-vio); }
.msl-key.is-hint { border-color: var(--msl-mint); box-shadow: 0 0 0 4px rgba(62, 230, 176, .35); }
.msl-key-dir svg { width: 28px; height: 28px; }
.msl-key-dir span { font-size: 15px; }
.msl-key-dir small { font-size: 11px; font-weight: 600; color: #5d6170; letter-spacing: 0; }
.msl-key-two { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
.msl-key-two kbd { flex-basis: 100%; max-width: 30px; margin: 0 auto 2px; }
.msl-key-two span { display: flex; flex-direction: column; align-items: center; }
.msl-key-two b { font-size: 15px; }
.msl-key-two small { font-size: 10px; font-weight: 700; color: #5d6170; text-transform: uppercase; letter-spacing: .08em; }

@keyframes msl-pop { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes msl-float { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -26px; } }
@keyframes msl-ok { to { opacity: 0; scale: 1.15; } }
@keyframes msl-bad { 0% { opacity: 1; } 30% { translate: -6px 0; } 60% { translate: 6px 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes msl-okl { to { opacity: 0; translate: -90px 0; } }
@keyframes msl-okr { to { opacity: 0; translate: 90px 0; } }
@keyframes msl-in { from { opacity: 0; translate: 0 -24px; scale: .85; } to { opacity: 1; translate: 0 0; scale: 1; } }

@media (max-width: 400px) {
  .msl-g { padding: 12px 10px 10px; }
  .msl-stage { height: 330px; }
  .msl-split { height: 300px; }
  .msl-pair { height: auto; }
  .msl-card { width: 176px; font-size: 22px; }
  .msl-arow i { width: 28px; height: 28px; }
  .msl-arow { gap: 2px; padding: 0 8px; height: 46px; }
  .msl-key { min-height: 58px; font-size: 11px; }
  .msl-key-two { gap: 2px 8px; }
  .msl-key-two b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .msl-g .msl-stage.is-shake { animation: none; }
}

/*
 * P2E mini-games, set ZB (Offraviax aviation) — axdrop, axboom, axkite, axshow,
 * axlanes, axtug, axglide, axballoon, axwinch, axsky. Load after games.css.
 * Every selector is scoped to .avx-g or an avx- class. Look: a boarding-pass
 * frame (white card, navy ink, signal-orange stub rule and a perforated edge
 * under the HUD), runway-style dashed time bar, square strike pips.
 */
.avx-g {
  max-width: 480px;
  padding: 14px 12px 12px;
  border-radius: 16px;
  border: 1.5px solid #0b2545;
  background:
    linear-gradient(90deg, #ff6a13 0 18%, #0b2545 18% 100%) top / 100% 5px no-repeat,
    #ffffff;
  color: #0b2545;
  font-family: "Red Hat Text", system-ui, sans-serif;
  box-shadow: 0 18px 40px rgba(11, 37, 69, .16);
  line-height: 1.4;
}
.avx-g .g-hud { gap: 6px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px dashed #b9cbe0; }
.avx-g .g-stat {
  align-items: flex-start;
  padding: 5px 8px 4px;
  border-radius: 6px;
  background: #eef6ff;
  border: 0;
  border-left: 3px solid #0b2545;
}
.avx-g .g-stat:first-child { background: #0b2545; border-left-color: #ff6a13; }
.avx-g .g-stat-l { color: #3d5677; font-size: 10px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.avx-g .g-stat:first-child .g-stat-l { color: #b8cbe3; }
.avx-g .g-stat-v { color: #0b2545; font-family: "Red Hat Display", system-ui, sans-serif; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.avx-g .g-stat:first-child .g-stat-v { color: #ffffff; }

.avx-dots { display: flex; align-items: center; gap: 4px; height: 26px; }
.avx-dots i {
  width: 10px; height: 10px; display: block; border-radius: 50%;
  background: #ff6a13; box-shadow: 0 0 0 2px rgba(255, 106, 19, .22);
  transition: opacity .2s, transform .2s;
}
.avx-dots-sq i { border-radius: 2px; width: 9px; height: 13px; background: #0b2545; box-shadow: none; }
.avx-dots-kite i { border-radius: 2px; transform: rotate(45deg); width: 9px; height: 9px; }
.avx-dots i.is-off { opacity: .2; transform: scale(.7); box-shadow: none; background: #8aa3bf; }
.avx-dots-kite i.is-off { transform: rotate(45deg) scale(.7); }

.avx-g .g-bar { height: 6px; margin: 0 0 10px; background: repeating-linear-gradient(90deg, #dbe7f4 0 14px, #ffffff 14px 20px); border-radius: 3px; }
.avx-g .g-bar-fill { background: #0b2545; }
.avx-g .g-bar-fill.is-low { background: #ff6a13; }

.avx-g .g-stage {
  border-radius: 10px;
  background: #d9efff;
  border: 1.5px solid #0b2545;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.avx-g .g-stage::before { padding-top: 125%; }
.avx-boom .g-stage, .avx-kite .g-stage, .avx-winch .g-stage, .avx-sky .g-stage { cursor: grab; }
.avx-boom .g-stage:active, .avx-kite .g-stage:active, .avx-winch .g-stage:active, .avx-sky .g-stage:active { cursor: grabbing; }
.avx-show .g-stage, .avx-drop .g-stage { cursor: crosshair; }
.avx-lanes .g-stage { cursor: ns-resize; }

.avx-pad { display: flex; gap: 8px; margin-top: 10px; }
.avx-btn {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  border: 1.5px solid #0b2545;
  border-radius: 10px;
  background: #ffffff;
  color: #0b2545;
  font: 800 15px/1 "Red Hat Display", system-ui, sans-serif;
  letter-spacing: .03em;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s, color .1s, transform .1s;
}
.avx-btn-main { background: #0b2545; color: #ffffff; flex-grow: 1.4; }
.avx-btn.is-on, .avx-btn:active { background: #ff6a13; border-color: #ff6a13; color: #0b2545; transform: translateY(1px); }
.avx-btn:focus-visible { outline: 3px solid #ff6a13; outline-offset: 2px; }

.avx-g .g-cap { color: #3d5677; font-size: 13px; min-height: 20px; }
.avx-g .g-cap.g-cap-cta { color: #0b2545; }

.avx-g .g-btn {
  background: #ff6a13;
  color: #0b2545;
  border-radius: 999px;
  box-shadow: 0 4px 0 #0b2545;
  font-family: "Red Hat Display", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 12px 32px;
}
.avx-g .g-btn:hover { filter: none; background: #ff8540; }
.avx-g .g-btn:focus-visible { outline: 3px solid #0b2545; outline-offset: 3px; }

.avx-g .g-overlay.avx-ov { background: rgba(11, 37, 69, .55); }
.avx-g .g-ov-card {
  position: relative;
  background-color: transparent;
  border: 1.5px solid #0b2545;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 37, 69, .35);
  color: #0b2545;
  background-image: radial-gradient(circle at 0 50%, transparent 9px, #ffffff 10px), radial-gradient(circle at 100% 50%, transparent 9px, #ffffff 10px);
  background-size: 51% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}
.avx-ov-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 4px;
  background: #0b2545;
  color: #ffffff;
  font: 800 11px/1.3 "Red Hat Display", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.avx-g .g-ov-title { font-family: "Red Hat Display", system-ui, sans-serif; font-size: 26px; font-weight: 900; color: #0b2545; }
.avx-g .g-ov-sub { color: #3d5677; font-size: 14px; }
.avx-g .g-ov-score { color: #3d5677; }
.avx-g .g-ov-score b { color: #c2410c; font-family: "Red Hat Display", system-ui, sans-serif; }
.avx-keys { margin: -6px 0 16px; font-size: 12px; color: #3d5677; }
.avx-keys kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 1px;
  padding: 1px 5px;
  border: 1px solid #8aa3bf;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #eef6ff;
  color: #0b2545;
  font: 700 11px/1.5 "Red Hat Display", system-ui, sans-serif;
}

@media (max-width: 360px) {
  .avx-g { padding: 12px 8px 10px; }
  .avx-g .g-stat { padding: 4px 5px 3px; }
  .avx-g .g-stat-v { font-size: 17px; }
  .avx-g .g-stat-l { font-size: 9px; letter-spacing: .05em; }
  .avx-btn { min-height: 44px; font-size: 14px; }
  .avx-dots i { width: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .avx-btn, .avx-dots i { transition: none; }
}

/*
 * 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:#fbf7ec;--bg-2:#f3eedf;--card:#ffffff;--text:#2a1f4a;--head:#1d0f45;--muted:#5a5079;--nav:#ffffff;--link:#4f22c0;
--accent:#5b2bd1;--accent-2:#14803f;--on-accent:#ffffff;--on-accent-2:#ffffff;--accent-soft:rgba(91,43,209,.1);--accent-text:#4f22c0;
--line:#e7e0cd;--line-strong:#cfc5ab;--chip:#efe8d6;--track:#e7e0cd;--ok:#14803f;--danger:#c81e3a;--input-bg:#fff;
--header-bg:#2e1385;--r:22px;--btn-r:999px;--maxw:1200px;--head-weight:900;--head-track:-.015em;--brand-track:0;
--btn-shadow:0 4px 0 #b77400,0 12px 24px -10px rgba(183,116,0,.6);--card-shadow:0 2px 0 rgba(29,15,69,.06),0 18px 40px -24px rgba(29,15,69,.35);--mock-shadow:none;
--cta-bg:#2e1385;--cta-text:#fff;--cta-btn:#ffc531;--cta-btn-text:#1d0f45;--toast-bg:#1d0f45;
--mock-bg:#fff;--row-bg:#f3eedf;--est-bg:#2e1385;--foot-bg:#0f5f30;--game-host-bg:transparent;--gart-bg:#2e1385;
--marquee-bg:#ffc531;--marquee-text:#1d0f45;--mq-size:26px;
--g-bg:#24104f;--g-panel:#3a1a92;--g-tile:#4a22b8;--g-tile-text:#fff;--g-accent:#ffc531;--g-accent-2:#5cf0b0;--g-text:#ffffff;--g-muted:#d9ccff;--g-danger:#ff4b5c;--g-radius:24px;--g-font:var(--font);
--gold:#ffc531;--gold-2:#ffe27a;--gold-deep:#b77400;--purple:#5b2bd1;--purple-deep:#2e1385;--ink:#1d0f45;--pitch:#13703a;--pitch-2:#0f6533;--mint:#5cf0b0;
--pitch-bg:repeating-linear-gradient(90deg,#13703a 0 90px,#0f6533 90px 180px)}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800 900;font-display:swap;src:url(/assets/fonts/rubik-700.woff2) format('woff2')}

body{font-weight:500}
h1,h2,h3{font-weight:900}
a{color:var(--link)}
.btn{background:linear-gradient(180deg,#ffe27a,#ffc531 55%,#f6a91a);color:var(--ink);font-weight:900;letter-spacing:.02em;border:0;text-transform:uppercase;font-size:15px}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #b77400,0 16px 28px -10px rgba(183,116,0,.6)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #b77400}
.btn.lg{font-size:17px;min-height:60px;padding:0 32px}
.btn.sm{font-size:13px}
.btn.ghost{background:transparent;color:var(--accent-text);border:2.5px solid currentColor;box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft);box-shadow:none}
.btn.alt{background:var(--accent);color:#fff;box-shadow:0 4px 0 #2e1385}
:focus-visible{outline:3px solid #5b2bd1;outline-offset:3px}
.fk-defs{position:absolute;width:0;height:0;overflow:hidden}
.fk-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- header: purple bar, hanging crest, pennant nav ---------------- */
.fk-top{position:sticky;top:0;z-index:60;background:var(--header-bg);box-shadow:0 4px 0 var(--gold),0 10px 24px -12px rgba(29,15,69,.6)}
.fk-bar{display:flex;align-items:center;gap:18px;height:68px;position:relative}
.fk-crest{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;align-self:flex-start;margin-top:8px}
.fk-crest svg{width:62px;height:62px;filter:drop-shadow(0 6px 8px rgba(29,15,69,.45));margin-bottom:-22px}
.fk-word{display:flex;flex-direction:column;line-height:.86;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:21px;letter-spacing:.02em;margin-top:6px}
.fk-word b:last-child{color:var(--gold)}
.fk-nav{display:flex;gap:4px;margin:0 0 0 18px}
.fk-nav a{position:relative;padding:9px 14px;border-radius:12px 12px 4px 4px;color:#fff;text-decoration:none;font-weight:800;font-size:15px}
.fk-nav a:hover{background:rgba(255,255,255,.12)}
.fk-nav a[aria-current]{background:var(--gold);color:var(--ink)}
.fk-nav a[aria-current]::after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--gold);border-bottom:0}
.fk-auth{margin-left:auto;display:flex;align-items:center;gap:8px}
.fk-auth .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.fk-auth .btn.ghost:hover{background:rgba(255,255,255,.12)}
.fk-top .bal-pill{background:#1d0f45;color:var(--gold);box-shadow:inset 0 0 0 2px rgba(255,197,49,.6)}
.fk-top .bal-pill i{background:var(--mint);box-shadow:0 0 0 4px rgba(92,240,176,.25)}
.fk-menu{display:none;width:44px;height:44px;border-radius:14px;border:2px solid rgba(255,255,255,.6);background:transparent;color:#fff;cursor:pointer}
.fk-menu span,.fk-menu span::before,.fk-menu span::after{display:block;width:18px;height:2.5px;border-radius:2px;background:currentColor;margin:auto;position:relative;content:""}
.fk-menu span::before{position:absolute;top:-6px}.fk-menu span::after{position:absolute;top:6px}
@media (max-width:1020px){
  .fk-menu{display:block}
  .fk-nav{position:absolute;right:0;top:74px;flex-direction:column;gap:4px;min-width:230px;margin:0;padding:12px;border-radius:20px;background:#2e1385;box-shadow:0 0 0 3px var(--gold),0 24px 50px -10px rgba(29,15,69,.6);display:none}
  .fk-nav.open{display:flex}
  .fk-nav a{border-radius:12px;padding:12px 14px}
  .fk-nav a[aria-current]::after{display:none}
  .fk-auth .hide-sm{display:none}
}
@media (max-width:560px){.fk-word{font-size:17px}.fk-crest svg{width:50px;height:50px;margin-bottom:-14px}.fk-bar{gap:10px}.fk-auth .btn.sm{padding:0 12px}}
@media (max-width:370px){.fk-word{display:none}}

/* ---------------- hero: floodlit pitch + open sticker album ---------------- */
.fk-hero{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(60% 50% at 8% 0%,rgba(255,248,216,.32),transparent 60%),
  radial-gradient(50% 45% at 96% 0%,rgba(255,248,216,.26),transparent 60%),
  radial-gradient(90% 60% at 50% 120%,rgba(10,40,20,.6),transparent 70%),
  var(--pitch-bg);padding:76px 0 120px}
.fk-hero::before{content:"";position:absolute;left:50%;top:-140px;width:520px;height:520px;margin-left:-260px;border:3px solid rgba(244,255,246,.28);border-radius:50%}
.fk-hero::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:rgba(244,255,246,.22)}
.fk-hero-lights{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(115deg,transparent 0 18%,rgba(255,248,216,.12) 18% 30%,transparent 30%),
  linear-gradient(245deg,transparent 0 16%,rgba(255,248,216,.1) 16% 27%,transparent 27%)}
.fk-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.fk-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 16px 7px 10px;border-radius:999px;background:rgba(29,15,69,.55);font-weight:800;font-size:14px;letter-spacing:.04em;box-shadow:inset 0 0 0 2px rgba(255,197,49,.55)}
.fk-badge svg{width:30px;height:22px}
.fk-hero h1{color:#fff;font-size:clamp(46px,7vw,92px);line-height:.92;letter-spacing:-.025em;text-transform:uppercase;margin:0 0 20px;text-shadow:0 4px 0 rgba(10,40,20,.45)}
.fk-hero h1 .hl{color:var(--gold);-webkit-text-stroke:0;text-shadow:0 4px 0 #1d0f45}
.fk-sub{display:inline-block;margin:0 0 18px;padding:9px 18px;border-radius:14px;background:#fff;color:var(--ink);font-weight:900;font-size:clamp(14px,1.6vw,18px);letter-spacing:.01em;box-shadow:0 5px 0 var(--gold)}
.fk-lead{font-size:19px;line-height:1.55;max-width:560px;color:#effff4;margin:0 0 26px}
.fk-cta{display:flex;flex-wrap:wrap;gap:14px}
.fk-hero .btn.ghost{color:#fff;border-color:#fff}
.fk-hero .btn.ghost:hover{background:rgba(255,255,255,.14)}
.fk-checks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:800}
.fk-checks li{display:flex;align-items:center;gap:8px}
.fk-checks li::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%231d0f45' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.fk-albumpage{position:relative;padding:26px 24px 24px 44px;border-radius:26px;background:linear-gradient(90deg,#efe6cf 0 22px,#fffaf0 22px);transform:rotate(2.5deg);box-shadow:0 0 0 4px #fff,0 30px 60px -20px rgba(10,30,15,.65)}
.fk-albumpage::before{content:"";position:absolute;left:8px;top:30px;bottom:30px;width:8px;background:radial-gradient(circle,#13703a 3.5px,transparent 4px) center top/8px 34px repeat-y}
.fk-album-h{margin:0 0 14px;color:var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:13px;display:flex;justify-content:space-between}
.fk-stk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fk-stk{position:relative;transform:rotate(var(--r));padding:6px 6px 10px;border-radius:14px;background:#fff;box-shadow:0 0 0 2px #ffc531,0 10px 18px -8px rgba(29,15,69,.5)}
.fk-stk-art{display:block;border-radius:9px;overflow:hidden;line-height:0}
.fk-stk-art svg{width:100%;height:auto;display:block}
.fk-stk-n{position:absolute;left:12px;top:10px;font-family:var(--display);font-weight:900;font-size:22px;color:#fff;-webkit-text-stroke:2px #1d0f45;paint-order:stroke;line-height:1}
.fk-stk-name{display:block;margin-top:6px;text-align:center;color:var(--ink);font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.fk-stk-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:transparent;box-shadow:none;border:3px dashed #c9b98e;color:#7a6a3e;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.08em;min-height:100px}
.fk-stk-empty svg{width:56px;height:40px}
@media (max-width:900px){.fk-hero-in{grid-template-columns:1fr}.fk-albumpage{max-width:520px;margin:10px auto 0;transform:rotate(1.5deg)}.fk-hero{padding:56px 0 110px}}
@media (max-width:480px){.fk-hero h1{font-size:44px}.fk-lead{font-size:17px}.fk-albumpage{padding:18px 14px 16px 34px}.fk-stk-grid{gap:10px}.fk-stk-n{font-size:17px}.fk-stk-name{font-size:11px}.fk-cta .btn{width:100%}}

/* ---------------- pillars: matchday tickets ---------------- */
.fk-tix{position:relative;z-index:2;margin-top:-78px}
.fk-tix-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fk-ticket{display:flex;min-height:170px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(29,15,69,.06),0 26px 50px -24px rgba(29,15,69,.55);overflow:hidden;position:relative}
.fk-stub{flex:0 0 86px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 0;background:var(--purple);color:#fff;position:relative}
.fk-ticket:nth-child(2) .fk-stub{background:#14803f}
.fk-ticket:nth-child(3) .fk-stub{background:#b77400}
.fk-stub::after{content:"";position:absolute;right:-6px;top:0;bottom:0;width:12px;background:radial-gradient(circle,#fff 4px,transparent 4.5px) center top/12px 16px repeat-y}
.fk-gate{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;text-transform:uppercase;letter-spacing:.18em;font-size:13px}
.fk-stub .fi{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18)}
.fk-stub .fi svg{width:24px;height:24px}
.fk-tbody{padding:22px 22px 20px 26px}
.fk-tbody h3{font-size:24px;text-transform:uppercase;margin-bottom:8px}
.fk-tbody p{margin:0;color:var(--muted)}
@media (max-width:900px){.fk-tix-row{grid-template-columns:1fr}.fk-ticket{min-height:0}}
@media (max-width:480px){.fk-stub{flex-basis:62px}.fk-tbody{padding:18px 16px 16px 20px}.fk-tbody h3{font-size:21px}}

/* ---------------- section heads ---------------- */
.fk-sec{padding:clamp(64px,8vw,104px) 0}
.fk-sh{max-width:760px;margin-bottom:36px}
.fk-sh-c{text-align:center;margin-inline:auto}
.fk-eye{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--accent-text);font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:13px}
.fk-eye::before{content:"";width:26px;height:26px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='11.5' fill='%23fff' stroke='%231d0f45' stroke-width='2'/%3E%3Cpath d='M13 7.5l4.4 3.2-1.7 5.2h-5.4l-1.7-5.2z' fill='%231d0f45'/%3E%3C/svg%3E") center/100% no-repeat}
.fk-sh h2{font-size:clamp(34px,4.6vw,58px);text-transform:uppercase;line-height:.98}
.fk-sh p{font-size:18px;color:var(--muted);margin:0}
.fk-sh-l .fk-eye{color:var(--gold)}
.fk-sh-l h2{color:#fff}
.fk-after{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- how it works: fixture board ---------------- */
.fk-board{border-radius:26px;overflow:hidden;background:#2e1385;color:#fff;box-shadow:0 0 0 4px var(--gold),0 30px 60px -30px rgba(29,15,69,.7)}
.fk-board-top{display:grid;grid-template-columns:140px 1fr;padding:14px 26px;background:#1d0f45;color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:12px}
.fk-fixtures{list-style:none;margin:0;padding:0}
.fk-fixtures li{display:grid;grid-template-columns:140px 56px 1fr auto;gap:18px;align-items:center;padding:24px 26px;border-top:2px dashed rgba(255,255,255,.18)}
.fk-fixtures li:first-child{border-top:0}
.fk-ko{justify-self:start;padding:8px 14px;border-radius:12px;background:var(--gold);color:var(--ink);font-weight:900;font-size:16px;font-variant-numeric:tabular-nums}
.fk-fix-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--purple);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.fk-fix-ico svg{width:28px;height:28px}
.fk-fix-txt h3{color:#fff;font-size:24px;margin:0 0 4px;text-transform:uppercase}
.fk-fix-txt p{margin:0;color:#e3dbff}
.fk-fix-no{font-family:var(--display);font-weight:900;font-size:64px;line-height:.8;color:transparent;-webkit-text-stroke:2.5px var(--gold)}
@media (max-width:760px){.fk-board-top{display:none}.fk-fixtures li{grid-template-columns:auto 1fr;gap:12px 14px;padding:22px 20px}.fk-fix-ico{width:46px;height:46px}.fk-fix-txt{grid-column:1/-1}.fk-fix-no{position:absolute;right:18px;font-size:48px}.fk-fixtures li{position:relative}}

/* ---------------- the sticker album (game cards) ---------------- */
.fk-albumsec{background:radial-gradient(circle at 20px 20px,rgba(91,43,209,.07) 2px,transparent 2.5px) 0 0/28px 28px,var(--bg-2)}
.fk-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:28px}
.fk-card{grid-column:span 2;display:flex;flex-direction:column;border-radius:24px;background:#fff;padding:10px;transform:rotate(var(--r));transition:transform .25s;box-shadow:0 0 0 3px #fff,0 0 0 6px #ffc531,0 26px 44px -26px rgba(29,15,69,.7)}
.fk-card:nth-child(4){grid-column:2/span 2}
.fk-card:hover{transform:rotate(0) translateY(-6px)}
.fk-card-art{position:relative;display:block;border-radius:16px;overflow:hidden;line-height:0}
.fk-card-art svg{width:100%;height:auto;display:block}
.fk-card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 42%,transparent 52%);pointer-events:none}
.fk-sno{position:absolute;left:12px;top:10px;font-family:var(--display);font-weight:900;font-size:20px;line-height:1;padding:6px 10px;border-radius:10px;background:var(--gold);color:var(--ink);box-shadow:0 3px 0 #b77400}
.fk-card-body{display:flex;flex-direction:column;flex:1;padding:16px 10px 8px}
.fk-kind{margin:0 0 4px;color:#14803f;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.fk-card h3{font-size:28px;text-transform:uppercase;margin:0 0 8px}
.fk-card h3 a{color:var(--head);text-decoration:none}
.fk-blurb{color:var(--muted);margin:0 0 14px;font-size:15.5px}
.fk-tg{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.fk-tg li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:var(--bg-2);font-weight:800;font-size:14px;color:var(--head)}
.fk-tg b{color:var(--accent-text)}
.fk-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:800;font-size:14px;color:var(--muted)}
.fk-note{display:block;margin-top:34px;border-radius:18px;background:#fff;border-left:6px solid var(--gold);padding:16px 20px;color:var(--text)}
@media (max-width:1000px){.fk-cards{grid-template-columns:1fr 1fr}.fk-card,.fk-card:nth-child(4){grid-column:auto}.fk-card:nth-child(5){grid-column:1/-1;max-width:calc(50% - 14px);justify-self:center;width:100%}}
@media (max-width:640px){.fk-cards{grid-template-columns:1fr;gap:26px}.fk-card:nth-child(5){max-width:none}.fk-card{transform:none}}

/* ---------------- points: reused tabs + estimator, restyled ---------------- */
.fk-pts .sec{padding:clamp(56px,7vw,90px) 0}
.fk-pts .sec + .sec{padding-top:0}
.fk-pts .sec-title h2{text-transform:uppercase;font-size:clamp(32px,4.4vw,54px)}
.fk-pts .eyebrow{color:var(--accent-text);font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:13px}
.tablist{background:#2e1385;padding:7px;border-radius:999px}
.tablist [role=tab]{color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:14px;padding:11px 20px}
.tablist [role=tab][aria-selected=true]{background:var(--gold);color:var(--ink)}
.panel-grid h3{text-transform:uppercase}
.big-num{border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 46%,transparent 46.5%),repeating-linear-gradient(90deg,#13703a 0 22px,#0f6533 22px 44px);box-shadow:0 0 0 6px #fff,0 0 0 10px var(--gold)}
.big-num b{color:var(--ink);font-size:clamp(46px,6vw,72px)}
.big-num em{color:#14803f;font-size:15px;max-width:150px;display:inline-block;line-height:1.2}
.card.est{border:0;border-radius:26px;box-shadow:var(--card-shadow)}
.est-out{border-radius:22px;background:#2e1385;box-shadow:inset 0 0 0 3px var(--gold)}
.est-out small{color:#d9ccff}
.est-out b{color:#fff}
.est-out em{color:var(--gold)}
.est label output{color:var(--accent-text)}

/* ---------------- boosted rewards: streak bars + crown podium ---------------- */
.fk-boost-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fk-panel{border-radius:26px;background:#fff;padding:26px;box-shadow:var(--card-shadow)}
.fk-panel h3{font-size:22px;text-transform:uppercase;margin-bottom:18px}
.fk-streak{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:240px;align-items:end}
.fk-streak li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.fk-streak i{display:block;width:100%;height:var(--h);border-radius:12px 12px 6px 6px;background:repeating-linear-gradient(180deg,#22a352 0 14px,#1c9149 14px 28px);box-shadow:inset 0 3px 0 rgba(255,255,255,.3)}
.fk-streak li:last-child i{background:linear-gradient(180deg,#ffe27a,#ffc531 60%,#f6a91a)}
.fk-streak b{font-weight:900;color:var(--head);font-size:15px}
.fk-streak span{font-size:12px;font-weight:800;color:var(--muted);white-space:nowrap}
.fk-podium{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end;min-height:240px}
.fk-lv{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 6px 14px;border-radius:16px 16px 8px 8px;background:#2e1385;color:#fff}
.fk-lv0{min-height:120px;background:#4a22b8}.fk-lv1{min-height:150px;background:#3d1aa6}.fk-lv2{min-height:185px;background:#2e1385}.fk-lv3{min-height:220px;background:#1d0f45;box-shadow:inset 0 0 0 3px var(--gold)}
.fk-lv-crown svg{width:calc(26px + var(--i,0) * 8px);height:auto}
.fk-lv0 .fk-lv-crown svg{width:26px}.fk-lv1 .fk-lv-crown svg{width:32px}.fk-lv2 .fk-lv-crown svg{width:40px}.fk-lv3 .fk-lv-crown svg{width:50px}
.fk-lv b{font-weight:900;text-transform:uppercase;font-size:14px;line-height:1.1;margin-top:6px}
.fk-lv small{color:#d9ccff;font-size:12px;font-weight:700}
.fk-lv em{font-style:normal;font-weight:900;color:var(--gold);font-size:13px;margin-top:auto}
.fk-fine{margin:16px 0 0;color:var(--muted);font-size:14px}
@media (max-width:900px){.fk-boost-grid{grid-template-columns:1fr}}
@media (max-width:480px){.fk-panel{padding:20px 14px}.fk-streak{gap:4px;height:200px}.fk-streak b{font-size:12px}.fk-streak span{font-size:10px}.fk-podium{gap:5px}.fk-lv b{font-size:11.5px}.fk-lv small,.fk-lv em{font-size:11px}}

/* ---------------- Fast Cash Out: shirt-number facts on the pitch ---------------- */
.fk-pay{background:radial-gradient(70% 60% at 50% 0%,rgba(255,248,216,.18),transparent 70%),var(--pitch-bg);color:#fff}
.fk-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fk-facts li{border-radius:24px;padding:24px 20px;background:rgba(29,15,69,.62);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.fk-facts b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(46px,5vw,64px);line-height:1;color:#fff;-webkit-text-stroke:2.5px var(--gold);paint-order:stroke;text-shadow:0 5px 0 #1d0f45;margin-bottom:10px;white-space:nowrap}
.fk-facts span{display:block;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--gold)}
.fk-facts p{margin:6px 0 0;color:#effff4;font-size:15px}
.fk-pay .btn.ghost{color:#fff;border-color:#fff}
@media (max-width:900px){.fk-facts{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fk-facts{grid-template-columns:1fr}}

/* ---------------- FAQ ---------------- */
.fk-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.fk-faq-grid .fk-sh{position:sticky;top:110px}
.fk-faq-grid .fk-sh p a{font-weight:800}
.fk-faq{border-radius:26px;background:#fff;padding:8px 26px;box-shadow:var(--card-shadow)}
.fk-faq details{border-bottom:2px dashed var(--line)}
.fk-faq details:last-child{border-bottom:0}
.fk-faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:900;font-size:18px;color:var(--head);display:flex;justify-content:space-between;gap:16px}
.fk-faq summary::-webkit-details-marker{display:none}
.fk-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:20px;line-height:1}
.fk-faq details[open] summary::after{content:"−";background:var(--purple);color:#fff}
.fk-faq details p{margin:0 0 20px;color:var(--muted)}
@media (max-width:900px){.fk-faq-grid{grid-template-columns:1fr;gap:10px}.fk-faq-grid .fk-sh{position:static}.fk-faq{padding:4px 18px}}

/* ---------------- closing banner ---------------- */
.fk-final{padding:30px 0 90px}
.fk-final-in{position:relative;text-align:center;padding:70px 26px 56px;border-radius:32px;color:#fff;overflow:hidden;background:
  radial-gradient(50% 70% at 10% 0%,rgba(255,248,216,.25),transparent 60%),radial-gradient(50% 70% at 90% 0%,rgba(255,248,216,.2),transparent 60%),
  linear-gradient(160deg,#5b2bd1,#2e1385 60%,#1d0f45);box-shadow:0 0 0 5px var(--gold),0 30px 60px -30px rgba(29,15,69,.8)}
.fk-final-crown svg{width:110px;height:auto;filter:drop-shadow(0 8px 0 rgba(0,0,0,.25))}
.fk-final .fk-eye{color:var(--gold);justify-content:center}
.fk-final h2{color:#fff;font-size:clamp(38px,6vw,76px);text-transform:uppercase;line-height:.95;margin:0 auto 14px;max-width:900px}
.fk-final p{max-width:640px;margin:0 auto 28px;font-size:18px;color:#ece6ff}

/* ---------------- footer: pitch-green team sheets ---------------- */
.fk-foot{position:relative;overflow:hidden;background:var(--pitch-bg);color:#e8fff0;padding:80px 0 36px;box-shadow:inset 0 6px 0 var(--gold)}
.fk-centre{position:absolute;left:50%;top:-170px;width:340px;height:340px;margin-left:-170px;border-radius:50%;border:3px solid rgba(244,255,246,.3);pointer-events:none}
.fk-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(244,255,246,.3)}
.fk-foot-top{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:620px;margin:0 auto 44px}
.fk-crest-foot{margin:0;align-self:center}
.fk-crest-foot svg{width:72px;height:72px;margin:0}
.fk-foot-top p{margin:0;color:#e8fff0}
.fk-sheets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px}
.fk-sheet{border-radius:20px;background:rgba(29,15,69,.6);padding:20px 22px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.fk-sheet h4{color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:13px;margin:0 0 10px}
.fk-sheet a{display:block;color:#fff;text-decoration:none;font-weight:700;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.2)}
.fk-sheet a:last-child{border-bottom:0}
.fk-sheet a:hover{color:var(--gold)}
.fk-legal{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:20px;background:rgba(0,0,0,.22);font-size:14px}
.fk-legal p{margin:0;color:#e1f7e8}
.fk-legal a{color:#fff}
.fk-age{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#c81e3a;font-weight:900;box-shadow:inset 0 0 0 3px #c81e3a}
.fk-copy{margin:18px 0 0;text-align:center;font-size:14px;color:#d4f3de}
@media (max-width:760px){.fk-sheets{grid-template-columns:1fr}.fk-legal{flex-direction:column}}

/* ---------------- inner pages (fk-body) ---------------- */
.fk-body main > .page-head{position:relative;overflow:hidden;padding:56px 0 52px;margin-bottom:34px;color:#fff;background:
  radial-gradient(60% 80% at 0% 0%,rgba(255,248,216,.25),transparent 60%),var(--pitch-bg);box-shadow:inset 0 -6px 0 var(--gold)}
.fk-body main > .page-head::after{content:"";position:absolute;right:-90px;top:50%;width:300px;height:300px;margin-top:-150px;border-radius:50%;border:3px solid rgba(244,255,246,.25)}
.fk-body .page-head .wrap{position:relative;z-index:1}
.fk-body .page-head h1{color:#fff;text-transform:uppercase;font-size:clamp(38px,5.6vw,72px);line-height:.95;text-shadow:0 4px 0 rgba(10,40,20,.4)}
.fk-body .page-head p{color:#effff4}
.fk-body .page-head a{color:var(--gold);font-weight:800}
.fk-body .page-head .eyebrow{display:inline-block;padding:5px 12px;border-radius:999px;background:#1d0f45;color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.fk-body .page-head .muted{color:#d4f3de}
.fk-body .card{border:0;border-radius:24px;box-shadow:var(--card-shadow)}
.fk-body .prose h2{text-transform:uppercase;font-size:28px}
.fk-body .rates{border-radius:20px;overflow:hidden;box-shadow:var(--card-shadow);background:#fff}
.fk-body .rates th{background:#2e1385;color:var(--gold);text-transform:uppercase;letter-spacing:.08em}
.fk-body .rates td b{color:var(--accent-text)}
/* games list: stickers */
.fk-body .game-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;counter-reset:fk}
.fk-body .gcard{counter-increment:fk;position:relative;border:0;border-radius:24px;padding:10px;background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px #ffc531,0 26px 44px -26px rgba(29,15,69,.7)}
.fk-body .gcard:nth-child(odd){transform:rotate(-.8deg)}.fk-body .gcard:nth-child(even){transform:rotate(.8deg)}
.fk-body .gcard:hover{transform:rotate(0) translateY(-5px)}
.fk-body .gcard .g-art{height:auto;display:block;border-radius:16px;overflow:hidden;background:#2e1385;line-height:0}
.fk-body .gcard .g-art svg{width:100%;height:auto}
.fk-body .gcard::before{content:"No. 0" counter(fk);position:absolute;left:22px;top:20px;z-index:1;font-family:var(--display);font-weight:900;font-size:18px;padding:5px 10px;border-radius:10px;background:var(--gold);color:var(--ink);box-shadow:0 3px 0 #b77400}
.fk-body .gcard .g-body{padding:16px 10px 8px}
.fk-body .gcard h3{font-size:26px;text-transform:uppercase}
.fk-body .gcard .g-tiers span{background:var(--bg-2);color:var(--accent-text);font-weight:900}
.fk-body .gcard .g-state{color:#14803f}
.fk-body .note{border-radius:18px;background:#fff;border-left:6px solid var(--gold)}
/* game page */
.fk-body .fk-gp .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px 36px;align-items:center}
.fk-body .fk-gp .wrap > *{grid-column:1}
.fk-body .fk-gp .fk-ghero{grid-column:2;grid-row:1/span 4}
.fk-ghero{margin:16px auto}
.fk-ghero-art{position:relative;display:block;border-radius:20px;overflow:hidden;line-height:0;transform:rotate(2deg);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--gold),0 24px 40px -20px rgba(0,0,0,.6)}
.fk-ghero-art svg{width:100%;height:auto;display:block}
.fk-body .play-wrap{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
.fk-body .game-host{background:transparent;border:0;padding:0;box-shadow:none}
.fk-body .play-side{border-radius:24px;background:#2e1385;color:#fff;box-shadow:0 0 0 4px var(--gold),var(--card-shadow)}
.fk-body .play-side h3{color:#fff;text-transform:uppercase}
.fk-body .milestones li{background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:14px}
.fk-body .milestones li b{color:var(--gold)}
.fk-body .milestones li.hit{background:rgba(92,240,176,.25)}
.fk-body .milestones li.done{background:#14803f}
.fk-body .pstatus{color:#e3dbff}
.fk-body .play-side a{color:var(--gold)}
.fk-body .play-side .btn.ghost{color:#fff;border-color:#fff}
.fk-howto{padding:20px 0 70px}
.fk-howto-in{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}
.fk-howto-main,.fk-howto-side{border-radius:24px;background:#fff;padding:26px;box-shadow:var(--card-shadow)}
.fk-howto h2{font-size:28px;text-transform:uppercase}
.fk-howto h3{font-size:20px;text-transform:uppercase}
.fk-steps{list-style:none;counter-reset:st;margin:0 0 18px;padding:0;display:grid;gap:12px}
.fk-steps li{counter-increment:st;display:flex;gap:14px;align-items:flex-start;font-weight:600}
.fk-steps li::before{content:counter(st);flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;font-weight:900}
.fk-gmeta{margin:0;display:grid;gap:10px}
.fk-gmeta div{padding:12px 14px;border-radius:14px;background:var(--bg-2)}
.fk-gmeta dt{font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:#14803f}
.fk-gmeta dd{margin:2px 0 0;font-weight:700;color:var(--head)}
.fk-tips{margin:0 0 18px;padding-left:20px;color:var(--text)}
.fk-tips li{margin-bottom:8px}
.fk-howto-links{display:flex;flex-wrap:wrap;gap:10px;margin:0}
@media (max-width:980px){.fk-body .play-wrap{grid-template-columns:1fr}.fk-body .play-side{position:static}.fk-howto-in{grid-template-columns:1fr}}
@media (max-width:760px){.fk-body .fk-gp .wrap{grid-template-columns:1fr}.fk-body .fk-gp .fk-ghero{grid-column:1;grid-row:auto;max-width:320px;margin:10px 0 0}}
/* auth, dashboard, cash-out */
.fk-body .auth-box{border-radius:28px;box-shadow:0 0 0 5px var(--gold),0 30px 60px -30px rgba(29,15,69,.6);padding:34px 30px}
.fk-body .auth-box h1{text-transform:uppercase;font-size:38px}
.fk-body .form input,.fk-body .form select,.fk-body .form textarea{border-radius:14px;border-width:2px}
.fk-body .card.d-bal{background:#2e1385;color:#fff;box-shadow:0 0 0 4px var(--gold),var(--card-shadow)}
.fk-body .d-bal b{color:var(--gold);font-size:52px;font-family:var(--display);font-weight:900}
.fk-body .d-bal small,.fk-body .d-bal p.muted{color:#d9ccff}
.fk-body .d-bal p{color:#fff}
.fk-body .d-bal a:not(.btn){color:var(--gold)}
.fk-body .bar{background:var(--chip)}
.fk-body .bar i{background:linear-gradient(90deg,#14803f,#5cf0b0)}
.fk-body .days li{border-radius:14px;background:#fff;border:2px solid var(--line)}
.fk-body .days li.got{background:#e6f7ec;border-color:#14803f}
.fk-body .days li.now{border-color:var(--purple)}
.fk-body .ms-card{border-radius:20px;background:#fff;border:2px solid var(--line)}
.fk-body .ms-card .ms-ico svg{width:96px;height:60px;border-radius:10px}
.fk-body .faq{border-radius:24px;background:#fff;padding:6px 24px;box-shadow:var(--card-shadow)}
.fk-body .marquee{background:var(--gold);color:var(--ink)}
.toast{border-radius:16px}