.cf-main{padding:0;margin:0}
.cf-sec{padding:48px 2rem;position:relative}
.cf-sec>h2{margin-bottom:16px}
.cf-sec>p,.cf-side-txt>p{color:var(--muted);margin-bottom:16px;max-width:none}
.cf-sec>p:last-child{margin-bottom:0}
.cf-sec+.cf-sec{border-top:1px solid rgba(255,255,255,.05)}
@media (max-width:599px){.cf-sec{padding:36px 1rem}}
/* hero B5·3 + B6·2 */
.cf-hero{position:relative;overflow:hidden;min-height:clamp(420px,56vh,600px);display:flex;align-items:center;padding:26px 2rem;isolation:isolate}
.cf-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cf-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,3,24,.94) 0%,rgba(0,3,24,.78) 45%,rgba(0,3,24,.35) 100%),linear-gradient(0deg,rgba(1,6,43,1) 0%,rgba(1,6,43,0) 30%)}
.cf-sparks{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cf-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2.5rem;align-items:center;width:100%}
.cf-eyebrow{display:flex;width:fit-content;max-width:100%;align-items:center;gap:.45rem;padding:.35rem .85rem;border-radius:999px;background:rgba(24,128,250,.16);border:1px solid rgba(24,128,250,.45);color:#d6ecff;font-weight:500;font-size:.95rem;margin-bottom:14px}
.cf-eyebrow .ic{color:var(--accent)}
.cf-hero h1{font-size:clamp(2.6rem,1.6rem + 4.2vw,4.4rem);font-weight:700;letter-spacing:-.01em;line-height:1.02;margin:0 0 14px;background:linear-gradient(92deg,#fff 0%,var(--gold) 55%,var(--brand-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.cf-hero h1{color:#fff}}
.cf-lead{font-size:1.12rem;color:#e3e9ff;max-width:none;margin-bottom:16px}
.cf-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:22px}
.cf-badges li{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:.92rem;color:#e3e9ff}
.cf-badges .ic{color:var(--gold)}
.cf-hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
@keyframes cf-show{to{opacity:1}}
@media (prefers-reduced-motion:no-preference){.js .cf-hero [data-in],.js .cf-hero .cf-offer-card{opacity:0;animation:cf-show 0s 3s forwards}}
@media (max-width:899px){.cf-hero-in{grid-template-columns:1fr;gap:1.75rem}.cf-hero{min-height:0;padding:36px 1.25rem 40px}.cf-hero::before{background:linear-gradient(180deg,rgba(0,3,24,.85),rgba(0,3,24,.75) 60%,rgba(1,6,43,1))}}
@media (max-width:599px){.cf-hero{padding:20px 1rem 28px}.cf-eyebrow{font-size:.85rem;margin-bottom:10px;padding:.25rem .7rem}.cf-hero h1{margin-bottom:10px}.cf-lead{font-size:1rem;line-height:1.5;margin-bottom:14px}.cf-hero-cta .cf-btn{flex:1 1 0;padding:.7rem .8rem}.cf-badges{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:16px}.cf-badges li{font-size:.8rem;padding:.22rem .5rem;line-height:1.3}}
/* TOC B4·1 + B28·1 + B29·5 */
.cf-toc{margin:0;padding:16px 2rem;display:block;font-weight:400;justify-content:initial}
.cf-toc details{border-radius:14px;background:rgba(255,255,255,.03)}
.cf-toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;cursor:pointer;color:var(--muted);font-weight:500}
.cf-toc summary::-webkit-details-marker{display:none}
.cf-toc summary::marker{content:""}
.cf-toc-name{display:flex;align-items:center;gap:.5rem;font-size:1rem}
.cf-toc-tg{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.cf-toc-ring{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);transition:transform .25s}
.cf-toc-c{display:none}
.cf-toc details[open] .cf-toc-o{display:none}
.cf-toc details[open] .cf-toc-c{display:inline}
.cf-toc details[open] .cf-toc-ring{transform:rotate(180deg)}
.cf-toc ul{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;padding:0 1rem 1rem}
.cf-toc li{display:block;width:auto;margin:0}
.cf-toc a{color:var(--muted);font-size:.95rem;font-weight:400}
@media (min-width:1024px){.cf-toc a:hover,.cf-toc summary:hover{color:var(--text)}}
@media (max-width:599px){.cf-toc{padding:12px 1rem}}
/* game cards: art tile, labels on top, caption over the image */
.cf-gcard,.cf-gcard:visited{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#000;color:#fff;font-weight:400;border:1px solid rgba(255,255,255,.08);isolation:isolate;transition:border-color .25s,box-shadow .25s}
.cf-gcard>img{display:block;width:100%;height:100%;object-fit:cover}
.cf-gcard::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(0,3,24,.95) 0%,rgba(0,3,24,.7) 26%,rgba(0,3,24,.2) 46%,transparent 60%);transition:background-color .25s}
.cf-glabels{position:absolute;top:8px;left:8px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cf-glabel{font-size:.72rem;font-weight:600;line-height:1;padding:.32rem .55rem;border-radius:999px;background:rgba(1,6,43,.8);color:#fff}
.cf-glabel-rtp{background:var(--brand);color:var(--brand-ink)}
.cf-gplay{position:absolute;top:8px;right:8px;z-index:1;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand);color:var(--brand-ink);box-shadow:0 6px 16px rgba(0,0,0,.4);opacity:0;transition:opacity .25s}
.cf-gplay .ic{width:18px;height:18px}
.cf-gcap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;padding:.55rem .65rem .6rem}
.cf-gname{font-weight:600;font-size:.92rem;line-height:1.2;color:rgba(255,255,255,.6);text-shadow:0 1px 6px #000;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color .25s}
.cf-gprov{font-size:.78rem;line-height:1.3;color:var(--brand);max-height:0;opacity:0;overflow:hidden;transition:max-height .25s,opacity .25s}
.cf-gcard:hover,.cf-gcard:focus-visible{border-color:rgba(118,249,212,.65);box-shadow:0 0 0 1px rgba(118,249,212,.35)}
.cf-gcard:hover::after,.cf-gcard:focus-visible::after{background-color:rgba(0,3,24,.35)}
.cf-gcard:hover .cf-gname,.cf-gcard:focus-visible .cf-gname{color:#fff}
.cf-gcard:hover .cf-gprov,.cf-gcard:focus-visible .cf-gprov{max-height:2.6em;opacity:1}
.cf-gcard:hover .cf-gplay,.cf-gcard:focus-visible .cf-gplay{opacity:1}
@media (hover:none) and (pointer:coarse){.cf-gname{color:#fff}.cf-gprov{max-height:2.6em;opacity:1}}
@media (max-width:767px){.cf-glabel:not(.cf-glabel-rtp){display:none}}
.cf-grid6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cf-gall,.cf-gall:visited{display:flex;background:linear-gradient(160deg,var(--accent-2),var(--accent));border:0;align-items:center;justify-content:center;text-align:center}
.cf-gall::after{display:none}
.cf-gall .cf-gname{color:#fff}
.cf-gall-in{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem;color:#fff}
.cf-gall-in .ic{width:2.4rem;height:2.4rem}
.cf-gall .cf-gmeta{color:#e3f1ff}
@media (max-width:1023px){.cf-grid6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:767px){.cf-grid6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:479px){.cf-grid6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* rails */
.cf-railbox{margin-top:24px}
.cf-railhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:16px}
.cf-railhead h3{display:flex;align-items:center;gap:.5rem}
.cf-railhead h3 .ic{color:var(--accent)}
.cf-arrows{display:flex;gap:.5rem;flex:none}
.cf-arrow{width:40px;height:40px;border-radius:50%;padding:0;margin:0;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--text);cursor:pointer}
.cf-arrow:disabled{opacity:.35;cursor:default}
@media (min-width:1024px){.cf-arrow:not(:disabled):hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}}
.cf-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;padding-bottom:4px;cursor:grab}
.cf-rail::-webkit-scrollbar{display:none}
.cf-rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.cf-rail.is-drag .cf-gcard{pointer-events:none}
.cf-rail .cf-gcard{flex:0 0 172px;scroll-snap-align:start}
@media (max-width:479px){.cf-rail .cf-gcard{flex-basis:142px}}
/* bonus timeline K1·6 */
.cf-tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative;counter-reset:tl;margin:8px 0 0}
.cf-tl::before{content:"";position:absolute;left:12%;right:12%;top:22px;height:2px;background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--brand));opacity:.55}
.cf-tl-stop{display:flex;flex-direction:column;align-items:center;gap:.6rem;position:relative}
.cf-tl-dot{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:2px solid var(--line);color:var(--gold);z-index:1;transition:background-color .4s,border-color .4s,color .4s,transform .4s}
.cf-tl-dot .ic{width:22px;height:22px}
.cf-tl.is-lit .cf-tl-dot{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.cf-tl.is-lit .cf-tl-stop:nth-child(2) .cf-tl-dot{transition-delay:.25s}
.cf-tl.is-lit .cf-tl-stop:nth-child(3) .cf-tl-dot{transition-delay:.5s}
.cf-tl.is-lit .cf-tl-stop:nth-child(4) .cf-tl-dot{transition-delay:.75s}
.cf-tl-when{font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.cf-tl-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;width:100%;flex:1 1 auto;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);overflow:hidden;padding:0 1rem 1.1rem}
.cf-tl-card img{display:block;width:calc(100% + 2rem);max-width:none;margin:0 -1rem .5rem;height:170px;object-fit:contain;padding:14px 0 6px;background:radial-gradient(closest-side,rgba(24,128,250,.35),transparent)}
.cf-tl-big{font-size:2.3rem;font-weight:700;line-height:1;color:var(--gold)}
.cf-tl-what{font-weight:500}
.cf-tl-terms{font-size:.9rem;color:var(--muted)}
.cf-tl-card .cf-btn{margin-top:auto;width:100%}
.cf-tl-card .cf-tl-terms{margin-bottom:.6rem}
@media (max-width:1023px){.cf-tl{grid-template-columns:repeat(2,minmax(0,1fr))}.cf-tl::before{display:none}}
@media (max-width:599px){.cf-tl{grid-template-columns:1fr;padding-left:58px}.cf-tl::before{display:block;left:22px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--accent-2),var(--accent),var(--brand))}.cf-tl-stop{align-items:flex-start}.cf-tl-dot{position:absolute;left:-58px;top:0}.cf-tl-when{min-height:46px;display:flex;align-items:center}}
@media (prefers-reduced-motion:reduce){.cf-tl-dot{transition:none}}
.cf-note{margin-top:16px;padding:.9rem 1rem;border-radius:12px;background:rgba(118,249,212,.08);border:1px solid rgba(118,249,212,.3);color:#d6fff3;font-size:.95rem}
/* tables */
.cf-tablewrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);margin-bottom:16px;background:var(--surface-2)}
.cf-table{width:100%;min-width:640px;border:0;border-radius:0;border-collapse:collapse;display:table;white-space:normal;overflow:visible}
.cf-table thead{background:var(--card-2);color:var(--text)}
.cf-table th,.cf-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
.cf-table thead th{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:600}
.cf-table tbody th{font-weight:600}
.cf-table tbody th .ic{color:var(--brand);margin-right:.45rem}
.cf-table tr:nth-child(even){background:transparent}
.cf-table tbody tr:last-child>*{border-bottom:0}
.cf-td-act{text-align:right!important;white-space:nowrap}
.cf-swipe{display:none;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);margin:0 0 16px!important}
@media (min-width:768px){.cf-sec>.cf-tablewrap:nth-last-child(2){margin-bottom:0}}
@media (max-width:767px){.cf-swipe{display:flex}}
.cf-sec>.cf-tablewrap:last-child,.cf-sec>.cf-swipe:last-child{margin-bottom:0!important}

@media (max-width:899px){.cf-hero .cf-eyebrow{display:none}}
@media (max-width:599px){.cf-hero-cta{flex-wrap:nowrap}.cf-hero-cta .cf-btn{gap:.35rem}.cf-hero-in{gap:1rem}}
