/* /zynga-poker-clone — AISHTMLNEWDESIGN-427
Page-owned styles. EVERY selector is scoped to #page-zynga-poker-clone or a
zpc- prefixed class: this sheet must never style body, a bare
element, #ais-header or #ais-footer. The document reset
(html,body{margin:0}) is owned by the shared layout sheet.
Font is Inter; no body/UI text below 16px.
DIRECTION — "STREAK WALLET".
A free-to-play social poker economy reads nothing like a cash cardroom: the
chip stack is a BALANCE you keep, top up and come back to, not a wager you
push forward. So the page is built from wallet panels on ink and cream, with
a three-bar chip-stack rule as the only section marker, amber reserved for
the daily-return moments and teal for the social loop. No felt, no table, no
deck, no settlement sheet. Rule 26: nothing moves unless the reader moves it.
Rule 35: no Zynga mark, logo, palette or trade dress is imitated anywhere. */
/* ── tokens ──────────────────────────────────────────────────────────────── */
#page-zynga-poker-clone{
--zpc-ink:#101623;
--zpc-ink-2:#192133;
--zpc-ink-3:#243049;
--zpc-cream:#FBF5E9;
--zpc-cream-2:#F3E9D6;
--zpc-paper:#FFFFFF;
--zpc-teal:#0C6E63;
--zpc-teal-2:#0E8A7C;
--zpc-amber:#C97A10; /* display / rules only */
--zpc-amber-t:#8A5200; /* TEXT amber: 6.1:1 on white, 5.7:1 on cream */
--zpc-amber-2:#EBA33A;
--zpc-text:#151B26;
--zpc-text-2:#3A465A;
--zpc-on-ink:#F2F5FA;
--zpc-on-ink-2:#C3CCDC;
--zpc-line:#DCCFB6;
--zpc-line-2:#E6EAF1;
--zpc-line-ink:rgba(255,255,255,.14);
--zpc-r:14px;
--zpc-pad:clamp(56px,6.5vw,104px);
--zpc-gut:clamp(18px,4vw,40px);
font-family:"Inter",system-ui,sans-serif;
font-size:17px;
line-height:1.62;
color:var(--zpc-text);
background:var(--zpc-paper);
-webkit-font-smoothing:antialiased;
}
/* no global box model exists in this document — own it, scoped to this page */
#page-zynga-poker-clone,
#page-zynga-poker-clone *,
#page-zynga-poker-clone *::before,
#page-zynga-poker-clone *::after{box-sizing:border-box;}
#page-zynga-poker-clone .zpc-wrap{
width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--zpc-gut);
}
/* ── the chip-stack rule: three bars, the page's only section marker ─────── */
#page-zynga-poker-clone .zpc-stack{
display:flex;flex-direction:column;gap:4px;width:52px;margin:0 0 22px;
}
#page-zynga-poker-clone .zpc-stack i{display:block;height:4px;border-radius:2px;}
#page-zynga-poker-clone .zpc-stack i:nth-child(1){width:52px;background:var(--zpc-amber);}
#page-zynga-poker-clone .zpc-stack i:nth-child(2){width:36px;background:var(--zpc-teal);}
#page-zynga-poker-clone .zpc-stack i:nth-child(3){width:20px;background:currentColor;opacity:.35;}
/* ── typography ─────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-h1{
margin:0 0 22px;font-size:clamp(38px,5.2vw,64px);line-height:1.06;
font-weight:800;letter-spacing:-.022em;
}
#page-zynga-poker-clone .zpc-h2{
margin:0 0 20px;font-size:clamp(29px,3.5vw,44px);line-height:1.14;
font-weight:800;letter-spacing:-.018em;color:var(--zpc-text);
}
#page-zynga-poker-clone .zpc-h2--on{color:var(--zpc-on-ink);}
/* Dark bands own their heading colour, so a heading that forgets its --on
modifier cannot ship as near-black on ink. `.zpc-say` did exactly that. */
#page-zynga-poker-clone .zpc-band--ink .zpc-h2,
#page-zynga-poker-clone .zpc-band--ink .zpc-h3,
#page-zynga-poker-clone .zpc-band--ink .zpc-h4,
#page-zynga-poker-clone .zpc-band--teal .zpc-h2,
#page-zynga-poker-clone .zpc-band--teal .zpc-h3,
#page-zynga-poker-clone .zpc-band--teal .zpc-h4{color:var(--zpc-on-ink);}
#page-zynga-poker-clone .zpc-h3{
margin:0 0 12px;font-size:clamp(23px,2.3vw,30px);line-height:1.2;font-weight:700;
}
#page-zynga-poker-clone .zpc-h4{
margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.008em;
}
#page-zynga-poker-clone .zpc-h5{
margin:0 0 8px;font-size:18px;line-height:1.35;font-weight:700;
}
#page-zynga-poker-clone .zpc-h5--on{color:var(--zpc-amber-2);
text-transform:uppercase;letter-spacing:.09em;font-size:16px;}
#page-zynga-poker-clone .zpc-h6{
margin:0;font-size:16px;line-height:1.35;font-weight:600;color:var(--zpc-text-2);
}
#page-zynga-poker-clone p{margin:0 0 16px;}
#page-zynga-poker-clone p:last-child{margin-bottom:0;}
#page-zynga-poker-clone .zpc-lede{
font-size:clamp(18px,1.5vw,20px);color:var(--zpc-text-2);max-width:74ch;margin-bottom:32px;
}
/* ── links (every rule carries the wrapper id so it out-specifies the
inline baseline's `#page-zynga-poker-clone a{color:inherit}`) ───────── */
#page-zynga-poker-clone a.zpc-a{
color:var(--zpc-teal);font-weight:600;
text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1.5px;text-decoration-color:rgba(12,110,99,.42);
transition:color .15s ease,text-decoration-color .15s ease;
}
#page-zynga-poker-clone a.zpc-a:hover{color:var(--zpc-ink);text-decoration-color:var(--zpc-ink);}
#page-zynga-poker-clone a.zpc-a--on{color:var(--zpc-amber-2);
text-decoration-color:rgba(235,163,58,.5);}
#page-zynga-poker-clone a.zpc-a--on:hover{color:#FFD79A;text-decoration-color:#FFD79A;}
/* Amber reads 2.87:1 on teal — under AA. The teal band takes a white link. */
#page-zynga-poker-clone .zpc-band--teal a.zpc-a--on{
color:#FFFFFF;text-decoration-color:rgba(255,255,255,.65);
}
#page-zynga-poker-clone .zpc-band--teal a.zpc-a--on:hover{
color:#EAF6F3;text-decoration-color:#EAF6F3;
}
#page-zynga-poker-clone a:focus-visible,
#page-zynga-poker-clone button:focus-visible,
#page-zynga-poker-clone summary:focus-visible,
#page-zynga-poker-clone .zpc-shots__rail:focus-visible{
outline:3px solid var(--zpc-amber-2);outline-offset:3px;border-radius:6px;
}
/* ── CTA button ─────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-cta{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:14px 30px;border:0;border-radius:999px;
font:inherit;font-size:17px;font-weight:700;letter-spacing:.005em;cursor:pointer;
color:#fff;background:var(--zpc-ink);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 8px 18px -10px rgba(16,22,35,.6);
transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease;
}
#page-zynga-poker-clone .zpc-cta::after{
content:"";width:22px;height:4px;border-radius:2px;background:var(--zpc-amber-2);
transition:width .14s ease;
}
#page-zynga-poker-clone .zpc-cta:hover{background:var(--zpc-teal);}
#page-zynga-poker-clone .zpc-cta:hover::after{width:32px;}
#page-zynga-poker-clone .zpc-cta:active{transform:translateY(1px);}
#page-zynga-poker-clone .zpc-cta--light{
color:var(--zpc-ink);background:var(--zpc-amber-2);
box-shadow:0 8px 20px -12px rgba(0,0,0,.7);
}
#page-zynga-poker-clone .zpc-cta--light::after{background:var(--zpc-ink);}
#page-zynga-poker-clone .zpc-cta--light:hover{background:#FFC978;}
#page-zynga-poker-clone .zpc-act{margin:40px 0 0;}
#page-zynga-poker-clone .zpc-act--left{margin-top:28px;}
/* ── bands ──────────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-band{width:100%;padding:var(--zpc-pad) 0;}
#page-zynga-poker-clone .zpc-band--paper{background:var(--zpc-paper);}
#page-zynga-poker-clone .zpc-band--cream{
background:var(--zpc-cream);
border-block:1px solid var(--zpc-line);
}
#page-zynga-poker-clone .zpc-band--ink{
background:var(--zpc-ink);color:var(--zpc-on-ink);
}
#page-zynga-poker-clone .zpc-band--ink p{color:var(--zpc-on-ink-2);}
#page-zynga-poker-clone .zpc-band--teal{
background:var(--zpc-teal);color:#fff;
}
/* ── hero — rule 24: full-bleed, static gradient, image-free ─────────────── */
#page-zynga-poker-clone .zpc-hero{
width:100%;
padding:clamp(72px,9vw,132px) var(--zpc-gut) clamp(64px,8vw,116px);
background:
linear-gradient(180deg,rgba(235,163,58,.16) 0%,rgba(235,163,58,0) 42%),
linear-gradient(118deg,var(--zpc-ink) 0%,var(--zpc-ink-2) 46%,#12352F 100%);
color:var(--zpc-on-ink);
border-bottom:4px solid var(--zpc-amber);
}
#page-zynga-poker-clone .zpc-hero__in{max-width:900px;margin-inline:auto;text-align:center;}
#page-zynga-poker-clone .zpc-hero__p{
margin:0 auto 34px;max-width:74ch;font-size:clamp(17px,1.55vw,20px);
line-height:1.66;color:#DCE3EE;
}
#page-zynga-poker-clone .zpc-hero__act{margin:0;}
/* ── breadcrumb ─────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-crumb{
background:var(--zpc-cream-2);border-bottom:1px solid var(--zpc-line);
}
#page-zynga-poker-clone .zpc-crumb__in{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
padding-block:14px;font-size:16px;color:var(--zpc-text-2);
}
#page-zynga-poker-clone a.zpc-crumb__home{
display:inline-flex;align-items:center;gap:8px;color:var(--zpc-teal);font-weight:600;
}
#page-zynga-poker-clone a.zpc-crumb__home:hover{color:var(--zpc-ink);text-decoration:underline;}
#page-zynga-poker-clone .zpc-crumb__ico{width:16px;height:16px;}
#page-zynga-poker-clone .zpc-crumb__here{font-weight:600;color:var(--zpc-text);}
/* ── lead ───────────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-lead__grid{
display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
gap:clamp(28px,4vw,64px);align-items:start;
}
#page-zynga-poker-clone .zpc-lead__fig{
border-radius:var(--zpc-r);overflow:hidden;
background:var(--zpc-cream);border:1px solid var(--zpc-line);
box-shadow:0 22px 44px -30px rgba(16,22,35,.55);
}
#page-zynga-poker-clone .zpc-lead__img{display:block;width:100%;height:auto;}
#page-zynga-poker-clone .zpc-lead__copy p{color:var(--zpc-text-2);font-size:17.5px;}
#page-zynga-poker-clone .zpc-lead__copy p:first-of-type{
font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--zpc-text);font-weight:500;
}
/* ── statement panel ────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-say__in{
max-width:960px;border-left:4px solid var(--zpc-amber);padding-left:clamp(20px,3vw,40px);
}
#page-zynga-poker-clone .zpc-say__p{font-size:clamp(17px,1.5vw,19.5px);max-width:80ch;}
/* ── numbered feature stack ─────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-num{
list-style:none;margin:0;padding:0;counter-reset:zpc;
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
column-gap:clamp(28px,4vw,64px);
}
#page-zynga-poker-clone .zpc-num__i{
counter-increment:zpc;position:relative;
padding:22px 0 22px 62px;border-top:1px solid var(--zpc-line);
}
#page-zynga-poker-clone .zpc-num__i::before{
content:counter(zpc,decimal-leading-zero);
position:absolute;left:0;top:22px;
font-size:16px;font-weight:800;letter-spacing:.06em;color:var(--zpc-amber-t);
font-variant-numeric:tabular-nums;
}
#page-zynga-poker-clone .zpc-num__i p{color:var(--zpc-text-2);font-size:16.5px;}
/* ── collaborate ────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-collab__in{max-width:820px;text-align:center;margin-inline:auto;}
#page-zynga-poker-clone .zpc-collab__p{
font-size:clamp(19px,2vw,26px);font-weight:600;color:#EAF6F3;margin-bottom:30px;
}
#page-zynga-poker-clone .zpc-collab__act{margin:0;}
/* ── games + provider wall ──────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-gwp{
border:1px solid var(--zpc-line-2);border-left:4px solid var(--zpc-teal);
border-radius:var(--zpc-r);padding:clamp(20px,2.6vw,30px);background:var(--zpc-cream);
margin-bottom:40px;
}
#page-zynga-poker-clone .zpc-gwp__tags{
list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:10px;
}
#page-zynga-poker-clone .zpc-gwp__tags li{
font-size:16px;font-weight:600;padding:7px 14px;border-radius:999px;
background:var(--zpc-paper);border:1px solid var(--zpc-line);color:var(--zpc-text);
}
#page-zynga-poker-clone .zpc-gwp__p{color:var(--zpc-text-2);max-width:80ch;}
/* Six tiles, three across, two exact rows. */
#page-zynga-poker-clone .zpc-games{
list-style:none;margin:0 0 40px;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
#page-zynga-poker-clone a.zpc-game__a{
display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;
padding:22px 16px;border:1px solid var(--zpc-line-2);border-radius:var(--zpc-r);
background:var(--zpc-paper);text-align:center;color:var(--zpc-text);
transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
#page-zynga-poker-clone a.zpc-game__a:hover{
transform:translateY(-3px);border-color:var(--zpc-teal);
box-shadow:0 16px 30px -22px rgba(12,110,99,.75);
}
#page-zynga-poker-clone a.zpc-game__a:hover .zpc-h5{color:var(--zpc-teal);}
/* The tiles are 397x388, 398x270, 397x506 ... — six different shapes, so a
96x96 SQUARE box shrank every one to about a quarter of itself. The image now
keeps its own ratio (from its width/height attributes) at the cell width. */
#page-zynga-poker-clone .zpc-game__img{width:100%;height:auto;object-fit:contain;}
/* Bottom-aligned so the six captions share a baseline per row even though the
six images are six different shapes. */
#page-zynga-poker-clone .zpc-game__a .zpc-h5{margin:0;margin-top:auto;}
#page-zynga-poker-clone .zpc-provs{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px;background:var(--zpc-line-2);border:1px solid var(--zpc-line-2);
border-radius:var(--zpc-r);overflow:hidden;
}
#page-zynga-poker-clone .zpc-prov{
background:var(--zpc-paper);padding:20px 14px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:10px;
}
#page-zynga-poker-clone .zpc-prov__img{max-width:120px;height:46px;object-fit:contain;}
/* ── portfolio ──────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-folio__wall{display:grid;gap:34px;}
#page-zynga-poker-clone .zpc-folio__g{
border-top:1px solid var(--zpc-line-ink);padding-top:20px;
}
#page-zynga-poker-clone .zpc-folio__row{
list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;
}
#page-zynga-poker-clone .zpc-folio__row li{
background:#fff;border-radius:10px;padding:12px 16px;
display:flex;align-items:center;justify-content:center;min-width:126px;min-height:64px;
}
#page-zynga-poker-clone .zpc-folio__img{max-width:104px;height:40px;object-fit:contain;}
/* ── screenshot rail (user-scrolled; no autoplay, no observer) ───────────── */
#page-zynga-poker-clone .zpc-shots__rail{
list-style:none;margin:8px 0 0;
padding:8px max(var(--zpc-gut),calc((100vw - 1200px)/2 + var(--zpc-gut))) 24px;
display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-color:var(--zpc-amber) var(--zpc-cream-2);
}
#page-zynga-poker-clone .zpc-shot{flex:0 0 auto;scroll-snap-align:start;}
/* Real 767x431 app screens; at 236px the UI inside them could not be read. */
#page-zynga-poker-clone .zpc-shot__img{
display:block;width:clamp(280px,78vw,430px);height:auto;
aspect-ratio:767/431;object-fit:contain;border-radius:16px;
border:1px solid var(--zpc-line);background:#fff;
box-shadow:0 18px 34px -26px rgba(16,22,35,.6);
}
/* ── capability panels ──────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-caps{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
#page-zynga-poker-clone .zpc-cap{
padding:26px 24px;border-radius:var(--zpc-r);background:var(--zpc-cream);
border:1px solid var(--zpc-line);border-top:4px solid var(--zpc-amber);
transition:transform .15s ease,box-shadow .15s ease;
}
#page-zynga-poker-clone .zpc-cap:hover{
transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(16,22,35,.55);
}
#page-zynga-poker-clone .zpc-cap p{color:var(--zpc-text-2);font-size:16.5px;}
/* ── variant tiles ──────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-vargrid{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;
}
#page-zynga-poker-clone .zpc-var{
display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
padding:18px 10px;border-radius:12px;background:var(--zpc-ink-2);
border:1px solid var(--zpc-line-ink);
transition:background-color .15s ease,border-color .15s ease;
}
#page-zynga-poker-clone .zpc-var:hover{background:var(--zpc-ink-3);border-color:var(--zpc-amber);}
/* The marks are 214x120 LANDSCAPE art. A 44x44 square box painted 44x25 of
real picture — 21% of the asset. The cell now carries the art's own ratio. */
#page-zynga-poker-clone .zpc-var__img{
width:100%;max-width:190px;height:auto;aspect-ratio:214/120;object-fit:contain;
}
#page-zynga-poker-clone .zpc-var__t{font-size:16px;line-height:1.35;color:var(--zpc-on-ink-2);}
/* ── essential features (definition rows) ───────────────────────────────── */
#page-zynga-poker-clone .zpc-ess{
margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
column-gap:clamp(28px,4vw,64px);
}
#page-zynga-poker-clone .zpc-ess__r{padding:20px 0;border-bottom:1px dashed var(--zpc-line);}
#page-zynga-poker-clone .zpc-ess dt{margin:0 0 6px;}
#page-zynga-poker-clone .zpc-ess dd{margin:0;color:var(--zpc-text-2);font-size:16.5px;}
/* ── advantages (perforated stubs) ──────────────────────────────────────── */
#page-zynga-poker-clone .zpc-advs{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
}
#page-zynga-poker-clone .zpc-adv{
position:relative;padding:22px 22px 22px 30px;border-radius:12px;
background:var(--zpc-paper);border:1px solid var(--zpc-line-2);
}
#page-zynga-poker-clone .zpc-adv::before{
content:"";position:absolute;left:12px;top:22px;bottom:22px;width:3px;border-radius:2px;
background:repeating-linear-gradient(180deg,var(--zpc-teal) 0 6px,transparent 6px 12px);
}
#page-zynga-poker-clone .zpc-adv p{color:var(--zpc-text-2);font-size:16.5px;}
#page-zynga-poker-clone .zpc-adv__chk{display:flex;gap:10px;align-items:flex-start;}
#page-zynga-poker-clone .zpc-adv__ico{width:20px;height:20px;flex:0 0 20px;margin-top:3px;}
/* ── the perfect solution (wide rows) ───────────────────────────────────── */
#page-zynga-poker-clone .zpc-solves{list-style:none;margin:0;padding:0;display:grid;gap:20px;}
#page-zynga-poker-clone .zpc-solve{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,34px);
align-items:start;background:var(--zpc-paper);border:1px solid var(--zpc-line);
border-radius:var(--zpc-r);padding:clamp(20px,2.6vw,32px);
}
#page-zynga-poker-clone .zpc-solve__ic{
width:84px;height:84px;border-radius:50%;background:var(--zpc-cream-2);
display:flex;align-items:center;justify-content:center;
}
#page-zynga-poker-clone .zpc-solve__img{width:48px;height:48px;object-fit:contain;}
#page-zynga-poker-clone .zpc-solve__b p{color:var(--zpc-text-2);}
/* ── boost (cloud + art) ────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-boost__grid{
display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
gap:clamp(28px,4vw,64px);align-items:center;
}
#page-zynga-poker-clone .zpc-boost__img{
display:block;width:100%;height:auto;border-radius:var(--zpc-r);
}
#page-zynga-poker-clone .zpc-cloud{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;
}
#page-zynga-poker-clone a.zpc-chip{
display:inline-block;padding:10px 16px;border-radius:999px;font-size:16px;font-weight:600;
color:var(--zpc-on-ink);background:var(--zpc-ink-2);border:1px solid var(--zpc-line-ink);
transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
#page-zynga-poker-clone a.zpc-chip:hover{
background:var(--zpc-amber-2);color:var(--zpc-ink);border-color:var(--zpc-amber-2);
}
/* ── process steps ──────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-steps{
list-style:none;margin:0;padding:0;counter-reset:zpcs;
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
}
#page-zynga-poker-clone .zpc-step{
counter-increment:zpcs;position:relative;
padding:26px 24px;border-radius:var(--zpc-r);
background:var(--zpc-cream);border:1px solid var(--zpc-line);
}
#page-zynga-poker-clone .zpc-step::after{
content:counter(zpcs,decimal-leading-zero);
position:absolute;right:20px;top:18px;font-size:16px;font-weight:800;
color:var(--zpc-amber-t);font-variant-numeric:tabular-nums;
}
#page-zynga-poker-clone .zpc-step__hd{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
#page-zynga-poker-clone .zpc-step__ic{width:44px;height:44px;object-fit:contain;flex:0 0 44px;}
#page-zynga-poker-clone .zpc-step__hd .zpc-h5{margin:0;}
#page-zynga-poker-clone .zpc-step__l{
list-style:none;margin:0;padding:0;display:grid;gap:8px;
}
#page-zynga-poker-clone .zpc-step__l li{
position:relative;padding-left:20px;font-size:16.5px;color:var(--zpc-text-2);
}
#page-zynga-poker-clone .zpc-step__l li::before{
content:"";position:absolute;left:0;top:11px;width:9px;height:3px;border-radius:2px;
background:var(--zpc-teal);
}
/* ── technology table ───────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-tech__scroll{overflow-x:auto;}
#page-zynga-poker-clone .zpc-tech{
width:100%;border-collapse:collapse;background:var(--zpc-paper);
border:1px solid var(--zpc-line);border-radius:var(--zpc-r);overflow:hidden;
}
#page-zynga-poker-clone .zpc-tech th,
#page-zynga-poker-clone .zpc-tech td{
padding:18px 20px;text-align:left;vertical-align:top;
border-bottom:1px solid var(--zpc-line-2);font-size:16.5px;
}
#page-zynga-poker-clone .zpc-tech tr:last-child th,
#page-zynga-poker-clone .zpc-tech tr:last-child td{border-bottom:0;}
#page-zynga-poker-clone .zpc-tech th{
width:250px;font-weight:700;color:var(--zpc-text);background:var(--zpc-cream);
border-right:1px solid var(--zpc-line);white-space:nowrap;
}
#page-zynga-poker-clone .zpc-tech td{display:table-cell;}
#page-zynga-poker-clone .zpc-tech__v{
display:inline-block;margin:0 8px 8px 0;padding:6px 12px;border-radius:8px;
background:var(--zpc-cream);border:1px solid var(--zpc-line);color:var(--zpc-text-2);
}
/* ── long read ──────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-read__cols{
column-count:2;column-gap:clamp(30px,4vw,66px);max-width:1080px;
}
#page-zynga-poker-clone .zpc-read__cols p{
break-inside:avoid;font-size:16.5px;margin-bottom:18px;
}
/* ── profit columns ─────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-profs{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
}
#page-zynga-poker-clone .zpc-prof{
padding-top:22px;border-top:4px solid var(--zpc-teal);
}
#page-zynga-poker-clone .zpc-prof:nth-child(2){border-top-color:var(--zpc-amber);}
#page-zynga-poker-clone .zpc-prof:nth-child(3){border-top-color:var(--zpc-ink);}
#page-zynga-poker-clone .zpc-prof__ic{width:52px;height:52px;object-fit:contain;margin-bottom:14px;}
#page-zynga-poker-clone .zpc-prof p{color:var(--zpc-text-2);font-size:16.5px;}
/* ── narrow measure bands ───────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-demand__in{max-width:840px;}
#page-zynga-poker-clone .zpc-demand__in p{font-size:17.5px;color:var(--zpc-text-2);}
/* ── 2x2 quads ──────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-quads{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;
background:var(--zpc-line-ink);border:1px solid var(--zpc-line-ink);border-radius:var(--zpc-r);
overflow:hidden;
}
#page-zynga-poker-clone .zpc-quad{background:var(--zpc-ink);padding:28px 26px;}
#page-zynga-poker-clone .zpc-quad .zpc-h4{color:var(--zpc-on-ink);}
/* ── hire ───────────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-hire__grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
gap:clamp(28px,4vw,64px);align-items:start;
}
#page-zynga-poker-clone .zpc-hire__l{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;
}
#page-zynga-poker-clone .zpc-hire__i{
padding:20px;border-radius:12px;background:var(--zpc-cream);
border-left:3px solid var(--zpc-teal);
}
#page-zynga-poker-clone .zpc-hire__i p{color:var(--zpc-text-2);font-size:16.5px;}
#page-zynga-poker-clone .zpc-hire__img{
display:block;width:100%;height:auto;border-radius:var(--zpc-r);
}
/* ── get started ────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-start__in{max-width:860px;text-align:center;margin-inline:auto;}
#page-zynga-poker-clone .zpc-start__p{
font-size:clamp(17px,1.5vw,19.5px);color:#E6F3F0;margin-bottom:30px;
}
#page-zynga-poker-clone .zpc-start__act{margin:0 0 16px;}
#page-zynga-poker-clone .zpc-start__more{margin:0;font-size:16px;}
/* ── demo credential sheet ──────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-demolist{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;
}
#page-zynga-poker-clone .zpc-demo{
padding:24px;border-radius:var(--zpc-r);background:var(--zpc-cream);
border:1px solid var(--zpc-line);
}
#page-zynga-poker-clone .zpc-demo__img{
display:block;width:100%;max-width:220px;height:auto;margin:0 auto 18px;border-radius:10px;
}
#page-zynga-poker-clone .zpc-creds{
margin:0 0 16px;padding:14px 16px;background:var(--zpc-paper);border-radius:10px;
border:1px solid var(--zpc-line-2);
display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:16px;
}
#page-zynga-poker-clone .zpc-creds dt{margin:0;font-weight:600;color:var(--zpc-text-2);}
#page-zynga-poker-clone .zpc-creds dd{
margin:0;font-weight:600;color:var(--zpc-text);overflow-wrap:anywhere;
}
#page-zynga-poker-clone .zpc-creds__h{
margin:0 0 8px;font-size:16px;font-weight:700;text-transform:uppercase;
letter-spacing:.08em;color:var(--zpc-amber-t);
}
#page-zynga-poker-clone .zpc-demo__go{margin:0;font-size:16px;font-weight:700;}
/* ── solution link list ─────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-solinks{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:0 clamp(24px,3vw,48px);
}
#page-zynga-poker-clone .zpc-solinks li{border-bottom:1px solid var(--zpc-line);}
#page-zynga-poker-clone a.zpc-solink{
display:block;padding:13px 0 13px 20px;position:relative;
font-size:16.5px;color:var(--zpc-text);
transition:color .15s ease,padding-left .15s ease;
}
#page-zynga-poker-clone a.zpc-solink::before{
content:"";position:absolute;left:0;top:21px;width:9px;height:3px;border-radius:2px;
background:var(--zpc-amber);
}
#page-zynga-poker-clone a.zpc-solink:hover{color:var(--zpc-teal);padding-left:26px;}
/* ── FAQ ────────────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-faqs{
display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
gap:0 clamp(24px,3vw,48px);align-content:start;
}
#page-zynga-poker-clone .zpc-faq{border-bottom:1px solid var(--zpc-line-2);}
#page-zynga-poker-clone .zpc-faq summary{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 0;cursor:pointer;list-style:none;
font-size:17px;font-weight:600;color:var(--zpc-text);
transition:color .15s ease;
}
#page-zynga-poker-clone .zpc-faq summary::-webkit-details-marker{display:none;}
#page-zynga-poker-clone .zpc-faq summary:hover{color:var(--zpc-teal);}
#page-zynga-poker-clone .zpc-faq__m{
position:relative;flex:0 0 22px;width:22px;height:22px;border-radius:50%;
background:var(--zpc-cream-2);
}
#page-zynga-poker-clone .zpc-faq__m::before,
#page-zynga-poker-clone .zpc-faq__m::after{
content:"";position:absolute;left:50%;top:50%;background:var(--zpc-ink);border-radius:1px;
transform:translate(-50%,-50%);
}
#page-zynga-poker-clone .zpc-faq__m::before{width:10px;height:2px;}
#page-zynga-poker-clone .zpc-faq__m::after{
width:2px;height:10px;transition:transform .18s ease,opacity .18s ease;
}
#page-zynga-poker-clone .zpc-faq[open] .zpc-faq__m{background:var(--zpc-amber-2);}
#page-zynga-poker-clone .zpc-faq[open] .zpc-faq__m::after{transform:translate(-50%,-50%) scaleY(0);opacity:0;}
#page-zynga-poker-clone .zpc-faq__a{padding:0 0 20px;max-width:70ch;}
#page-zynga-poker-clone .zpc-faq__a p{color:var(--zpc-text-2);font-size:16.5px;}
/* ── testimonial facades ────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-storylist{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;
}
#page-zynga-poker-clone .zpc-vid{
position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
background:var(--zpc-ink-2);border-radius:var(--zpc-r);overflow:hidden;
transition:transform .15s ease;
}
#page-zynga-poker-clone .zpc-vid:hover{transform:translateY(-3px);}
#page-zynga-poker-clone .zpc-story__img{display:block;width:100%;height:auto;}
#page-zynga-poker-clone .zpc-vid__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:60px;height:60px;border-radius:50%;background:var(--zpc-amber-2);
box-shadow:0 10px 24px -10px rgba(0,0,0,.75);
transition:background-color .15s ease;
}
#page-zynga-poker-clone .zpc-vid__play::after{
content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
border-style:solid;border-width:11px 0 11px 17px;
border-color:transparent transparent transparent var(--zpc-ink);
}
#page-zynga-poker-clone .zpc-vid:hover .zpc-vid__play{background:#FFD79A;}
#page-zynga-poker-clone .zpc-story__frame{
display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--zpc-r);
}
#page-zynga-poker-clone .zpc-story__q{margin-top:16px;font-size:16.5px;}
#page-zynga-poker-clone .zpc-more{margin:34px 0 0;font-size:17px;font-weight:600;}
/* ── area we serve ──────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-arealist{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;
}
#page-zynga-poker-clone .zpc-area{
padding:24px;border-radius:var(--zpc-r);background:var(--zpc-paper);
border:1px solid var(--zpc-line-2);border-top:4px solid var(--zpc-teal);
}
#page-zynga-poker-clone .zpc-area .zpc-h5{
text-transform:uppercase;letter-spacing:.07em;font-size:16px;color:var(--zpc-amber-t);
}
#page-zynga-poker-clone .zpc-area__t{margin:0 0 12px;font-size:17px;font-weight:700;}
#page-zynga-poker-clone .zpc-area__a{
display:flex;gap:10px;align-items:flex-start;margin:0;
font-size:16px;color:var(--zpc-text-2);
}
#page-zynga-poker-clone .zpc-area__ic{width:18px;height:18px;flex:0 0 18px;margin-top:3px;}
/* ── CTA modal ──────────────────────────────────────────────────────────── */
#page-zynga-poker-clone .zpc-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(9,13,21,.72);padding:20px;
align-items:center;justify-content:center;
}
#page-zynga-poker-clone .zpc-modal.is-open{display:flex;}
#page-zynga-poker-clone .zpc-modal__box{
position:relative;width:100%;max-width:660px;background:#fff;border-radius:16px;
box-shadow:0 32px 70px -30px rgba(0,0,0,.8);overflow:hidden;
}
#page-zynga-poker-clone .zpc-modal__x{
position:absolute;top:12px;right:12px;z-index:2;
width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:var(--zpc-cream-2);color:var(--zpc-ink);
transition:background-color .15s ease;
}
#page-zynga-poker-clone .zpc-modal__x:hover{background:var(--zpc-amber-2);}
#page-zynga-poker-clone .zpc-modal__box iframe{
display:block;width:100%;min-height:860px;border:0;
}
/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
#page-zynga-poker-clone .zpc-lead__grid,
#page-zynga-poker-clone .zpc-boost__grid,
#page-zynga-poker-clone .zpc-hire__grid{grid-template-columns:minmax(0,1fr);}
#page-zynga-poker-clone .zpc-hire__fig{order:-1;max-width:420px;}
#page-zynga-poker-clone .zpc-boost__fig{max-width:420px;}
#page-zynga-poker-clone .zpc-read__cols{column-count:1;}
#page-zynga-poker-clone .zpc-faqs{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:720px){
#page-zynga-poker-clone{font-size:16px;}
#page-zynga-poker-clone .zpc-solve{grid-template-columns:minmax(0,1fr);}
#page-zynga-poker-clone .zpc-tech th{width:auto;white-space:normal;}
#page-zynga-poker-clone .zpc-cta{width:100%;}
#page-zynga-poker-clone .zpc-act .zpc-cta,
#page-zynga-poker-clone .zpc-hero__act .zpc-cta{max-width:420px;}
#page-zynga-poker-clone .zpc-shot__img{width:clamp(240px,80vw,300px);}
#page-zynga-poker-clone .zpc-modal__box iframe{min-height:88vh;}
}
@media (max-width:400px){
#page-zynga-poker-clone .zpc-creds{grid-template-columns:minmax(0,1fr);gap:2px;}
#page-zynga-poker-clone .zpc-creds dt{margin-top:8px;}
}
/* ── reduced motion — everything left is a finite user-initiated response ── */
@media (prefers-reduced-motion:reduce){
#page-zynga-poker-clone *,
#page-zynga-poker-clone *::before,
#page-zynga-poker-clone *::after{
animation:none !important;transition-duration:.01ms !important;
}
#page-zynga-poker-clone .zpc-shots__rail{scroll-behavior:auto;}
}
/* ── print ──────────────────────────────────────────────────────────────── */
@media print{
#page-zynga-poker-clone .zpc-modal{display:none !important;}
}
/* Games We Provide: source had TWO tabs (Casino Originals, Live Game API);
"Our diverse iGaming software We Provide" was the first line inside the first
tab, not a third pill. Colour inherited, not tokenised. */
.zpc-grp{margin:0 0 38px;}
.zpc-grp:last-of-type{margin-bottom:0;}
.zpc-grp > h4,.zpc-lab{margin:0 0 6px;font-size:clamp(19px,1.6vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.008em;}
.zpc-grp > h5,.zpc-sublab{margin:0 0 12px;font-size:16px;font-weight:600;opacity:.78;}
.zpc-lab--solo{margin-top:34px;}
/* The "Best Solutions for iGaming" description rendered larger than the body
copy beneath it. Sized to this page's body text (17px) at the user's
request, applied across every page carrying this section. Scoped to the
section because .zpc-lede is used elsewhere on this page. Line-height is
left alone — it is unitless, so it tracks the new size. */
#page-zynga-poker-clone [aria-labelledby="zpc-best-h"] .zpc-lede{font-size:17px;}