/* ============================================================
CASINO CSS CHASSIS — geo-neutral
Extracted 2026-08-03 from the two best-looking builds in the
portfolio: iberteam.es (burgundy/mustard, ES) and leitoescome.com
(bottle-green/gold, PT). Those two are locked to Spanish and
Portuguese national colours; everything structural in them is not.
This file is that structure with the palette lifted out.
THE CONTRACT
------------
· Every colour, radius, font and shadow is a --ch-* ROLE token.
A build recolours by overriding :root ONLY. If you are writing a
hex code below the :root block, you are forking the chassis.
· Class prefix is ch-. Rename per site only if you also rename in
the verifier; the skill's default is to keep ch-.
· Page background stays LIGHT (operator rule). --ch-nav-bg and
--ch-foot-bg may go dark — the page body may not.
· No language strings. Toggle labels come from data-more/data-less
attributes so ES/PT/DE/DK builds need no CSS edit.
Skills: css-skin-roulette (rolls the palette), hero-design,
affiliate-list-placement, toplist-horizontal-table,
mobile-toplist-card, mobile-nav, cta-button-copy, initials-avatar.
============================================================ */
/* >>> roll_skin.py SKIN BLOCK >>> */
/* ============================================================
SKIN: emerald-gold — Emerald gold — sage paper, Fraunces serif, emerald nav, gold CTA
Rolled by css-skin-roulette/scripts/roll_skin.py from
https://www.icspini.net/ (measured assets/reference-skins.json).
:root ONLY. Every rule below is the untouched chassis.
============================================================ */
:root{
/* ---- surfaces (LIGHT — operator rule) ---- */
--ch-bg:#f4f6f3;
--ch-surface:#eef1ec;
--ch-card:#ffffff;
--ch-cream:#fbf5e4;
/* ---- ink ---- */
--ch-ink:#15211c;
--ch-ink-soft:#23312a;
--ch-muted:#4f6058;
/* ---- lines ---- */
--ch-line:#dfe4dd;
--ch-line-soft:#cadfd5;
--ch-line-faint:#eef1ec;
/* ---- brand ---- */
--ch-primary:#0f5d49;
--ch-primary-dark:#0a4234;
--ch-primary-tint:#147a5e;
--ch-primary-bg:#e9f1ed;
--ch-primary-bd:#cadfd5;
/* ---- accent ---- */
--ch-accent:#b8901f;
--ch-accent-soft:#f7edd3;
--ch-accent-ink:#231a00;
/* ---- CTA ---- */
--ch-cta-from:#d8af3a;
--ch-cta-to:#b8901f;
--ch-cta-ink:#231a00;
--ch-on-primary:#ffffff;
--ch-cta-glow:rgba(184,144,31,.36);
/* ---- bonus pill ---- */
--ch-bonus-from:#f7edd3;
--ch-bonus-to:#ecd9a4;
--ch-bonus-bd:#b8901f;
--ch-bonus-ink:#231a00;
/* ---- nav + footer (may be dark; body may not) ---- */
--ch-nav-bg:#eef1ec;
--ch-nav-ink:#2c3d35;
--ch-nav-ink-hover:#0f5d49;
--ch-foot-bg:#0f5d49;
--ch-foot-ink:#cfe0d8;
--ch-foot-head:#d8af3a;
/* ---- logo chip — ONE colour portfolio-wide, never rolled ---- */
--ch-chip-from:#969ea3;
--ch-chip-to:#798187;
/* ---- semantic tints ---- */
--ch-pros-bg:#eef7f1;
--ch-cons-bg:#fbf1f0;
/* ---- shape + type ---- */
--ch-radius:14px;
--ch-radius-lg:16px;
/* ---- fonts ---- */
--ch-display:Fraunces,Georgia,'Times New Roman',serif;
--ch-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
/* ---- shadow + wrap ---- */
--ch-shadow:0 1px 0 rgba(0,0,0,.04);
--ch-shadow-lg:0 12px 30px rgba(16,40,30,.13);
--ch-wrap:1080px;
}
/* HTML needs:
The inline width is DATA (the score), not styling — colour comes from tokens. */
.ch-bar{position:relative;height:8px;border-radius:999px;background:var(--ch-line-faint);
border:1px solid var(--ch-line);overflow:hidden;margin:.3rem 0 .1rem}
.ch-bar>span{display:block;height:100%;border-radius:999px;
background:linear-gradient(90deg,var(--ch-accent) 0,var(--ch-primary) 100%)}
.ch-barrow{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;
font-size:.85rem;color:var(--ch-ink-soft);margin:.45rem 0}
.ch-barrow b{font-family:var(--ch-display);color:var(--ch-primary);white-space:nowrap}
.ch-barwrap{margin:1rem 0 1.2rem}
.ch-stats{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0}
.ch-stats .n{font-size:1.6rem;font-weight:700;color:var(--ch-primary);font-family:var(--ch-display)}
.ch-stats .l{color:var(--ch-muted);font-size:.82rem}
.ch-tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ch-tags span{background:var(--ch-primary-bg);color:var(--ch-primary-dark);border-radius:999px;
padding:4px 12px;font-size:.82rem;font-weight:600}
.initials-avatar{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
border-radius:50%;background:var(--ch-primary);color:var(--ch-on-primary);font-family:var(--ch-sans);
font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px}
.initials-avatar.initials-brand{border-radius:8px;width:auto;min-width:84px;height:46px;
padding:0 12px;color:var(--ch-accent);font-size:18px}
/* card grids: internal links, guides, payment methods */
.ch-linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
margin-top:8px}
.ch-linkgrid a{background:var(--ch-card);border:1px solid var(--ch-line);border-radius:10px;
padding:12px 14px;text-decoration:none;color:var(--ch-primary);font-weight:600;display:block}
.ch-linkgrid a:hover{border-color:var(--ch-accent);background:var(--ch-surface)}
.ch-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;
margin:1.5rem 0}
.ch-mediacard{display:block;border:1px solid var(--ch-line);border-radius:14px;overflow:hidden;
background:var(--ch-card);text-decoration:none;color:inherit;
transition:transform .15s,box-shadow .15s,border-color .15s}
.ch-mediacard:hover{transform:translateY(-3px);box-shadow:var(--ch-shadow-lg);
border-color:var(--ch-primary)}
.ch-mediacard img{display:block;width:100%;height:auto}
.ch-mediacard-b{padding:14px 16px 16px}
.ch-mediacard-b h3{margin:0 0 .35rem;font-size:1.06rem}
.ch-mediacard-b p{margin:0 0 .55rem;font-size:.86rem;color:var(--ch-muted);line-height:1.45}
/* sticky right rail (desktop) — guides/related list */
.ch-aside{background:var(--ch-card);border:1px solid var(--ch-line);border-radius:14px;
padding:4px 18px 12px;box-shadow:var(--ch-shadow);margin:1.1rem 0}
.ch-aside-h{font-family:var(--ch-display);font-weight:800;font-size:.98rem;color:var(--ch-ink);
text-transform:uppercase;letter-spacing:.05em;padding:.8rem 0 .6rem;
border-bottom:2px solid var(--ch-primary);margin-bottom:.2rem;display:flex;align-items:center;gap:.45rem}
.ch-aside-h::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ch-accent)}
.ch-aside ul{list-style:none;margin:0;padding:0}
.ch-aside li{border-bottom:1px solid var(--ch-line-faint);padding:.62rem 0}
.ch-aside li:last-child{border-bottom:0}
.ch-aside a{display:flex;align-items:center;gap:.65rem;color:var(--ch-ink);text-decoration:none;
font-weight:600;font-size:.92rem;line-height:1.32;transition:color .15s}
.ch-aside a:hover{color:var(--ch-primary)}
.ch-aside-thumb{width:92px;height:auto;border-radius:7px;flex:0 0 auto;
border:1px solid var(--ch-line);display:block}
/* payment strip */
.ch-paybar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;
padding-top:14px;border-top:1px solid var(--ch-line)}
.ch-paybar-lbl{font-size:.78rem;font-weight:700;color:var(--ch-muted);text-transform:uppercase;
letter-spacing:.04em}
.ch-pay{background:var(--ch-card);border:1px solid var(--ch-line);border-radius:6px;height:34px;
width:54px;display:inline-flex;align-items:center;justify-content:center;padding:5px}
.ch-pay img{max-height:22px;max-width:46px;width:auto;height:auto;display:block}
/* ============================================================
FOOTER
============================================================ */
.ch-foot{background:var(--ch-foot-bg);color:var(--ch-foot-ink);margin-top:30px;
padding:34px 0 20px;border-top:4px solid var(--ch-accent)}
.ch-foot a{color:var(--ch-foot-ink);text-decoration:none}
.ch-foot a:hover{color:var(--ch-primary)}
.ch-foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px;margin-bottom:22px}
.ch-foot-cols h4{color:var(--ch-foot-head);margin:0 0 10px;font-size:1rem}
.ch-foot-cols ul{list-style:none;margin:0;padding:0;line-height:2}
.ch-rg{border-top:1px solid var(--ch-line);padding-top:16px;font-size:.82rem;color:var(--ch-muted);
display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ch-rg a{color:var(--ch-primary);font-weight:600}
.ch-18{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
border:2px solid var(--ch-primary);color:var(--ch-primary);border-radius:50%;font-weight:800;
font-size:.8rem;padding:0 6px}
/* ============================================================
MOBILE (<=768px) — mobile-nav + mobile-toplist-card
Verified at 390x844 per mobile-screenshot-verify.
============================================================ */
@media (max-width:768px){
.ch-brand img{height:34px}
.ch-burger{display:flex}
.ch-nav-links{position:fixed;top:0;inset-inline-end:0;height:100vh;width:100%;background:var(--ch-card);
flex-direction:column;align-items:flex-start;gap:4px;padding:74px 24px 24px;
transform:translateX(100%);transition:transform .25s ease;z-index:1002;overflow-y:auto;
box-shadow:-8px 0 24px rgba(0,0,0,.18);border-inline-start:1px solid var(--ch-line-soft)}
.ch-nav-links>li{display:block;width:100%}
.ch-nav-links>li>a{padding:13px 0;font-size:.95rem;width:100%;
border-bottom:1px solid var(--ch-line);display:block}
.ch-nav-cta{width:100%;text-align:center;border-bottom:0 !important;margin-top:10px}
.ch-dd{display:block;width:100%;align-self:auto}
.ch-dd-toggle{display:block;width:100%;padding:13px 0;border-bottom:1px solid var(--ch-line);
color:var(--ch-primary);font-size:.8rem;height:auto;text-align:start}
.ch-dd-caret{display:none}
.ch-dd-menu{display:block !important;position:static;border:0;box-shadow:none;border-radius:0;
padding:4px 0 8px 14px;min-width:0;background:transparent}
.ch-dd-menu a{padding:9px 0;font-size:.92rem;color:var(--ch-muted) !important}
.ch-nav-overlay{display:block;position:fixed;inset:0;background:rgba(15,15,15,.45);opacity:0;
visibility:hidden;transition:opacity .25s;z-index:1001}
.ch-nav-close{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;
inset-inline-end:16px;width:44px;height:44px;font-size:30px;line-height:1;color:var(--ch-primary);
background:transparent;border:0;cursor:pointer;z-index:1003}
#ch-nav-toggle:checked ~ .ch-nav-links{transform:translateX(0)}
#ch-nav-toggle:checked ~ .ch-nav-overlay{opacity:1;visibility:visible}
/* hero: keep the first toplist card near the fold */
.ch-hero{padding:12px 0}
.ch-hero h1{font-size:1.35rem;margin-bottom:6px;line-height:1.22;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch-byline{font-size:.8rem;padding:5px 12px 5px 5px}
.ch-byline img{width:34px;height:34px}
.ch-poster{margin-bottom:14px;border-radius:10px}
.ch-trust3{grid-template-columns:1fr;gap:0}
.ch-trust3 .t3{justify-content:flex-start;border-inline-end:0;
border-bottom:1px solid var(--ch-line-faint);padding:11px 14px}
.ch-trust3 .t3:last-child{border-bottom:0}
.ch-section{padding:24px 0}
.ch-proscons,.ch-authorcards,.ch-foot-cols{grid-template-columns:1fr}
.ch-author-hero{flex-direction:column;text-align:center}
.ch-pick{grid-template-columns:1fr;padding:18px}
.ch-pick-bonus{font-size:1.5rem}
/* toplist cards */
.ch-card{grid-template-columns:40px 1fr;grid-template-areas:"rank mid" "cta cta";gap:12px;
padding:14px 16px}
.ch-card .ch-rank{grid-area:rank;align-self:start}
.ch-card .ch-cell-mid{grid-area:mid}
.ch-card .ch-cell-cta{grid-area:cta;margin-top:.5rem}
.ch-chip{width:120px;height:62px;padding:7px 9px}
.ch-review-head .ch-chip{width:140px;height:70px}
.ch-bonus-val{font-size:1.4rem}
.ch-bonus{display:block;width:100%;text-align:center;font-size:1.05rem;padding:10px;border-radius:9px}
.ch-cta{display:block;width:100%;min-height:48px;line-height:24px;font-size:.9rem;border-radius:10px}
.ch-descriptor{display:none}
.ch-cardcopy{-webkit-line-clamp:4;line-clamp:4;font-size:.82rem}
.ch-features{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:5px 0 3px}
.ch-features span{background:var(--ch-surface);border:1px solid var(--ch-line-soft);
border-radius:8px;padding:4px 8px;font-size:.7rem;font-weight:700;color:var(--ch-primary);
white-space:nowrap}
/* horizontal toplist table -> cards */
.ch-table{border-spacing:0}
.ch-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ch-table tbody tr{display:grid;grid-template-columns:auto 1fr;
grid-template-areas:"rank logo" "name name" "bonus bonus" "metric metric" "cta cta";
column-gap:12px;row-gap:5px;align-items:center;background:var(--ch-card);
border:1.5px solid var(--ch-line);border-top:3px solid var(--ch-primary);
border-radius:14px;padding:.55rem .7rem .7rem;margin-bottom:12px;box-shadow:var(--ch-shadow)}
.ch-table tbody tr.is-top{border-top-color:var(--ch-accent);border-top-width:4px;
background:var(--ch-accent-soft)}
.ch-table tbody td{display:block;border:0 !important;padding:0}
.ch-td-rank{grid-area:rank;align-self:start}
.ch-td-logo{grid-area:logo;justify-self:center}
.ch-td-name{grid-area:name;text-align:center}
.ch-td-bonus{grid-area:bonus;justify-self:stretch;text-align:center}
.ch-td-metric{grid-area:metric;justify-self:center}
.ch-td-cta{grid-area:cta;width:auto;text-align:center}
/* comparison table -> stacked label:value cards, never overflow */
.ch-cmp-wrap{overflow:visible;border:0;border-radius:0}
.ch-cmp{min-width:0;border:0;background:transparent;font-size:.9rem}
.ch-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ch-cmp tr{display:block;background:var(--ch-card);border:1px solid var(--ch-line);
border-radius:12px;margin:0 0 12px;padding:6px 12px}
.ch-cmp td{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:0;
border-bottom:1px solid var(--ch-line-faint);padding:.55rem .1rem;text-align:end}
.ch-cmp tr td:last-child{border-bottom:0}
.ch-cmp td::before{content:attr(data-label);font-weight:700;color:var(--ch-primary);
text-align:start;flex:0 0 42%;text-transform:none}
.ch-cmp td:empty::before,.ch-cmp td[data-label=""]::before{content:""}
/* any other body table scrolls rather than breaking the layout */
.ch main table:not(.ch-cmp){display:block;max-width:100%;overflow-x:auto;
-webkit-overflow-scrolling:touch}
.ch-review .ch-cta{display:block;width:100%}
}
/* ============================================================
COLLAPSIBLE LEDE — language-neutral.
Markup: …