/* ColorTradingGame 2.0 — guide layout, ticker, sticky bar, footer. main.css keeps the homepage design. */
:root{--ctg-pad:clamp(18px,3vw,28px);--ctg-r:18px;--ctg-mint:#34e69a;--ctg-ink:#021118}
.ctg-brand-icon{width:40px;height:40px;border-radius:11px;display:block;flex:0 0 auto}
.brand .ctg-brand-icon+span{display:inline}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* Buttons */
.ctg-btn{min-height:46px;gap:8px;white-space:nowrap}
.ctg-btn--gold{background:linear-gradient(135deg,var(--gold),#ff8a4a);color:#1b0d00}
.ctg-btn--block{display:flex;width:100%;margin-top:10px}
.ctg-btn-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:420px;margin-top:22px}
.ctg-btn-pair .ctg-btn{width:100%;padding:0 14px;overflow:hidden;text-overflow:ellipsis}
.ctg-btn-pair--footer{margin-top:18px;max-width:340px}
.ctg-nav-cta{display:none}
.header-actions{display:flex;gap:10px;align-items:center}

/* Ticker (below header) */
.ctg-ticker{position:relative;overflow:hidden;background:linear-gradient(90deg,#33132a,#112b42 50%,#123126);border-bottom:1px solid var(--line);font-size:.82rem;color:#e3ecff}
.ctg-ticker__track{display:flex;width:max-content;animation:ctg-ticker 48s linear infinite}
.ctg-ticker:hover .ctg-ticker__track{animation-play-state:paused}
.ctg-ticker__group{display:flex;flex:0 0 auto}
.ctg-ticker span{display:inline-flex;align-items:center;padding:9px 22px;white-space:nowrap}
.ctg-ticker span:before{content:"";width:7px;height:7px;border-radius:50%;margin-right:10px;background:var(--green);box-shadow:0 0 10px var(--green)}
.ctg-ticker span:nth-child(3n+2):before{background:var(--red);box-shadow:0 0 10px var(--red)}
.ctg-ticker span:nth-child(3n):before{background:var(--violet);box-shadow:0 0 10px var(--violet)}
@keyframes ctg-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ctg-ticker__track{animation:none;width:auto;flex-wrap:wrap}.ctg-ticker__group{flex-wrap:wrap}.ctg-ticker__group[aria-hidden]{display:none}.ctg-ticker span{white-space:normal}}
.notice[role=note]{display:none}

/* Breadcrumb */
.ctg-crumbs{padding-top:20px;font-size:.88rem}
.ctg-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;color:var(--muted)}
.ctg-crumbs li+li:before{content:"/";margin-right:6px;opacity:.5}
.ctg-crumbs a{color:#cfe0ff}.ctg-crumbs a:hover{color:var(--green)}

/* Page header */
.ctg-phead{padding:22px 0 46px;background:radial-gradient(circle at 78% 10%,rgba(166,107,255,.18),transparent 40%),radial-gradient(circle at 10% 90%,rgba(52,230,154,.08),transparent 40%);border-bottom:1px solid var(--line)}
.ctg-phead__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.ctg-phead__grid--solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.ctg-phead__eyebrow{margin-bottom:14px}
.ctg-phead__title{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;margin-bottom:16px;overflow-wrap:break-word}
.ctg-phead__lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:#c9d4ec;max-width:640px;margin-bottom:14px}
.ctg-meta{font-size:.86rem;color:var(--muted);margin:0}
.ctg-meta a{color:var(--green)}
.ctg-phead__media img{width:100%;aspect-ratio:800/420;object-fit:cover;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);display:block}

/* Layout */
.ctg-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-top:44px;padding-bottom:56px;align-items:start}
.ctg-layout--solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.ctg-side{position:sticky;top:96px;display:grid;gap:18px}
.ctg-toc,.ctg-side__cta{padding:20px;border:1px solid var(--line);border-radius:var(--ctg-r);background:var(--surface)}
.ctg-side__title{margin:0 0 10px;font-weight:850;color:#fff;font-size:.95rem;letter-spacing:.02em}
.ctg-toc ol{margin:0;padding-left:18px;display:grid;gap:7px;font-size:.88rem;line-height:1.4}
.ctg-toc a{color:#cbd6ef}.ctg-toc a:hover{color:var(--green)}
.ctg-side__cta p{font-size:.9rem;margin-bottom:6px}
.ctg-side__cta strong{color:var(--gold)}
.ctg-side__small{font-size:.8rem!important;margin-top:10px!important}

/* Entry typography */
.ctg-entry{min-width:0;font-size:1.04rem}
.ctg-entry>*:first-child{margin-top:0}
.ctg-entry h2{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.2;margin:44px 0 14px;scroll-margin-top:100px;color:#fff}
.ctg-entry h3{font-size:1.18rem;margin:26px 0 10px;color:#fff}
.ctg-entry p,.ctg-entry li{color:#c2cde5}
.ctg-entry p strong,.ctg-entry li strong{color:#fff}
.ctg-entry a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ctg-entry a.ctg-btn{text-decoration:none;color:inherit}
.ctg-entry a.ctg-btn--primary{color:var(--ctg-ink)}
.ctg-entry ul,.ctg-entry ol{padding-left:22px;margin:0 0 20px}
.ctg-entry li{margin-bottom:8px}
.ctg-answer{padding:20px 22px;border-radius:var(--ctg-r);background:linear-gradient(135deg,rgba(52,230,154,.12),rgba(40,216,255,.06));border:1px solid rgba(52,230,154,.35);margin-bottom:28px}
.ctg-answer p{color:#e6eefc;margin:0}
.ctg-answer .ctg-answer__label{font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--green);margin-bottom:6px}
.ctg-note{padding:16px 18px;border-left:4px solid var(--cyan);background:rgba(40,216,255,.07);border-radius:0 14px 14px 0;margin:0 0 22px}
.ctg-note p{margin:0;color:#dbe6fb}
.ctg-note--legal{border-left-color:var(--gold);background:rgba(255,200,90,.08)}
.ctg-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 24px;border:1px solid var(--line);border-radius:16px}
.ctg-table{width:100%;border-collapse:collapse;min-width:520px;font-size:.94rem}
.ctg-table th,.ctg-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ctg-table th{background:var(--surface2);color:#fff;font-weight:800}
.ctg-table td{color:#c9d4ec}
.ctg-table tr:last-child td{border-bottom:0}
.ctg-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
ol.ctg-steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:10px}
ol.ctg-steps li{counter-increment:s;position:relative;padding:14px 16px 14px 58px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:0}
ol.ctg-steps li:before{content:counter(s);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:900;font-size:.9rem;color:var(--ctg-ink);background:linear-gradient(135deg,var(--green),var(--cyan))}
.ctg-inline-cta{margin:30px 0;padding:20px 22px;border-radius:var(--ctg-r);border:1px solid rgba(166,107,255,.35);background:linear-gradient(135deg,rgba(166,107,255,.14),rgba(13,23,48,.9))}
.ctg-inline-cta p{margin:0;color:#e2e9fa}
.ctg-inline-cta__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:420px;margin-top:14px!important}
.ctg-inline-cta__btns .ctg-btn{width:100%}
.ctg-takeaways{margin:36px 0 10px;padding:22px 24px;border-radius:var(--ctg-r);background:var(--surface);border:1px solid var(--line)}
.ctg-takeaways h2{margin-top:0!important}
.ctg-takeaways ul{margin:0}
.ctg-faq{display:grid;gap:10px}
.ctg-faq__item{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.ctg-faq__item summary{cursor:pointer;padding:16px 46px 16px 18px;font-weight:800;color:#fff;list-style:none;position:relative}
.ctg-faq__item summary::-webkit-details-marker{display:none}
.ctg-faq__item summary:after{content:"+";position:absolute;right:18px;top:12px;font-size:1.4rem;color:var(--green)}
.ctg-faq__item[open] summary:after{content:"–"}
.ctg-faq__a{padding:0 18px 14px}
.ctg-faq__a p{margin:0}
.ctg-support-missing{color:var(--gold)}

/* Related + safety */
.ctg-related{padding:56px 0;background:var(--bg2);border-top:1px solid var(--line)}
.ctg-section-title{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:24px}
.ctg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ctg-card{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:var(--ctg-r);background:var(--surface);transition:border-color .2s,transform .2s}
.ctg-card:hover{border-color:rgba(52,230,154,.5);transform:translateY(-2px)}
.ctg-card__eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:900;color:var(--green)}
.ctg-card__title{font-weight:850;color:#fff;font-size:1.08rem}
.ctg-card__text{font-size:.9rem;color:var(--muted);line-height:1.5}
.ctg-safety{padding:18px 0;background:linear-gradient(90deg,rgba(255,73,108,.12),rgba(166,107,255,.1));border-top:1px solid var(--line)}
.ctg-safety__inner{display:flex;gap:20px;align-items:center;justify-content:space-between}
.ctg-safety p{margin:0;font-size:.92rem;color:#dfe7f7}
.ctg-safety a{white-space:nowrap;color:var(--green);font-weight:800}

/* Footer */
.ctg-footer{padding-top:56px}
.ctg-footer__grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:36px}
.ctg-footer__brand p{font-size:.92rem;margin-top:14px}
.ctg-footer__col h2,.ctg-footer__others h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:#fff;margin-bottom:14px}
.ctg-footer__col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem}
.ctg-footer__col a{color:var(--muted)}.ctg-footer__col a:hover{color:var(--green)}
.ctg-footer__others{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.ctg-footer__others ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.ctg-footer__others a{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:#cdd8ef}
.ctg-footer__others a:hover{border-color:var(--green);color:var(--green)}
.ctg-footer__bottom{margin-top:34px}

/* Sticky mobile bar */
.ctg-sticky{display:none}
@media (max-width:960px){
 .ctg-sticky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(5,8,23,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
 .ctg-sticky .ctg-btn{width:100%;min-height:46px}
 body.ctg-has-sticky{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
 .mobile-cta{display:none!important}
 .header-actions{display:none}
 .site-nav.open .ctg-nav-cta{display:block;padding-top:12px;border-top:1px solid var(--line);margin-top:10px}
 .site-nav.open .ctg-nav-cta .ctg-btn-pair{margin-top:0;max-width:none}
 .ctg-layout{grid-template-columns:minmax(0,1fr);gap:28px}
 .ctg-side{position:static}
 .ctg-toc{display:none}
 .ctg-phead__grid{grid-template-columns:minmax(0,1fr)}
 .ctg-phead__media{order:-1}
 .ctg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ctg-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ctg-footer__brand{grid-column:1/-1}
}
@media (max-width:600px){
 .ctg-phead{padding-bottom:32px}
 .ctg-cards{grid-template-columns:minmax(0,1fr)}
 .ctg-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
 .ctg-crumbs ol{flex-wrap:nowrap}
 .ctg-crumbs li{white-space:nowrap}
 .ctg-crumbs li[aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .ctg-safety__inner{flex-direction:column;align-items:flex-start;gap:8px}
 .ctg-entry{font-size:1rem}
 ol.ctg-steps li{padding-left:52px}
 .hero-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:420px}
 .hero-actions .btn{width:100%;padding:0 12px}
}
@media (max-width:360px){.ctg-btn-pair,.ctg-inline-cta__btns,.ctg-sticky{gap:8px}.ctg-btn{font-size:.92rem;padding:0 10px}}
@media (min-width:901px) and (max-width:1260px){.header-inner{gap:16px}.site-nav ul{gap:14px}.site-nav a{font-size:.9rem}.header-actions{gap:8px}.header-actions .btn-small{padding:0 13px}}
@media (min-width:901px) and (max-width:1080px){.site-nav ul{gap:11px}.site-nav a{font-size:.84rem}.brand{font-size:1.02rem}.brand .ctg-brand-icon{width:34px;height:34px}}
.ctg-footer__col li{margin:0;padding:0;line-height:1.45}
.ctg-footer__others li{margin:0;padding:0}
/* Homepage 2.1 blocks */
.ctg-home-meta{font-size:.86rem;color:var(--muted);margin:16px 0 12px}
.ctg-home-meta a{color:var(--green)}
.ctg-home-block .ctg-answer{max-width:900px}
.ctg-home-block p a:not(.ctg-btn),.ctg-home-block li a:not(.ctg-btn){color:var(--green);text-decoration:underline;text-underline-offset:3px}
.ctg-home-facts__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 26px}
.ctg-home-fact{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.ctg-home-fact span{display:block;font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.ctg-home-fact strong{color:#fff;font-size:.98rem;line-height:1.4}
.ctg-home-guides__label{font-weight:850;color:#fff;margin:0 0 10px}
.ctg-home-wingo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.ctg-home-wingo__grid h3{margin:0 0 12px}
.ctg-table--compact{min-width:0}
.ctg-home-note{font-size:.95rem;color:var(--muted)}
.ctg-home-list{padding-left:20px;display:grid;gap:10px;margin:0 0 20px}
.ctg-home-list li{color:#c2cde5}.ctg-home-list strong{color:#fff}
.ctg-home-steps ol.ctg-steps li{color:#c2cde5}.ctg-home-steps ol.ctg-steps strong{color:#fff}
@media (max-width:960px){.ctg-home-facts__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ctg-home-wingo__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.ctg-home-facts__grid{grid-template-columns:minmax(0,1fr)}}
h1,h2,h3{overflow-wrap:break-word}
.ctg-home-block .ctg-inline-cta .ctg-btn{text-decoration:none}.ctg-home-block .ctg-btn--primary{color:var(--ctg-ink)}