/* ==========================================================================
   Epictrick generator - 2026 design system
   Loaded last, so it also normalises the old Bootstrap 3 / Bootstrap 4 mix.
   ========================================================================== */

:root{
    color-scheme:light;
    --et-bg:#f4f5f8;
    --et-surface:#fff;
    --et-surface-2:#fafbfd;
    --et-ink:#14161c;
    --et-ink-soft:#5a6172;
    --et-ink-faint:#8b91a3;
    --et-line:#e5e7ef;
    --et-dark:#101219;
    --et-dark-2:#191c25;
    --et-dark-3:#242835;
    --et-accent:#ffd60a;
    --et-accent-ink:#141414;
    --et-accent-2:#7b61ff;
    --et-good:#12b76a;
    --et-danger:#e5484d;

    --et-r-sm:10px;
    --et-r:14px;
    --et-r-lg:20px;

    --et-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -14px rgba(16,24,40,.28);
    --et-shadow-lg:0 2px 4px rgba(16,24,40,.05), 0 24px 48px -20px rgba(16,24,40,.35);

    --et-font:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --et-font-body:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --et-max:1240px;
}

/* --------------------------------------------------------------- base ---- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
    margin:0;
    background:var(--et-bg);
    color:var(--et-ink);
    font-family:var(--et-font-body);
    font-size:16px;
    line-height:1.65;
    overflow-x:clip;
    -webkit-font-smoothing:antialiased;
}

body img{max-width:100%;height:auto}

h1,h2,h3,h4,h5{
    font-family:var(--et-font);
    color:var(--et-ink);
    line-height:1.2;
    letter-spacing:-.02em;
    margin:0 0 .6em;
    font-weight:700;
    text-transform:none;
}

h1{font-size:clamp(1.55rem,1.1rem + 2.2vw,2.6rem)}
h2{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.85rem)}
h3{font-size:clamp(1.1rem,1rem + .6vw,1.35rem)}

a{color:inherit;text-decoration:none}

.et-wrap{
    width:100%;
    max-width:var(--et-max);
    margin-inline:auto;
    padding-inline:16px;
}

@media (min-width:768px){ .et-wrap{padding-inline:24px} }

.et-skip{
    position:absolute;left:-9999px;top:0;z-index:200;
    background:var(--et-accent);color:var(--et-accent-ink);
    padding:10px 16px;border-radius:0 0 var(--et-r-sm) 0;font-weight:600;
}
.et-skip:focus{left:0}


/* ==========================================================================
   Minimal layout layer.
   Replaces the two Bootstrap 3 builds + the Bootstrap 4 fragments that used to
   fight each other on these pages. Only the class names the markup really uses.
   ========================================================================== */

.container,
.container-fluid{
    width:100%;
    max-width:var(--et-max);
    margin-inline:auto;
    padding-inline:16px;
}
.container-fluid{max-width:none}

@media (min-width:768px){
    .container,.container-fluid{padding-inline:24px}
}

/* a container nested inside a column must simply fill it */
.container .container,
.container .container-fluid{
    max-width:100%;
    padding-inline:0;
}

.row{
    display:flex;
    flex-wrap:wrap;
    margin-inline:-8px;
}

/*
	Every rule below is written as `.row > .col-*` on purpose. A shorter
	`.col-md-3` would lose to the `.row > [class*="col-"]` base rule, which is
	one specificity step higher, and every column would stay 100% wide.
*/
.row > [class*="col-"]{
    width:100%;
    padding-inline:8px;
}

.row > .col-xs-1{width:8.3333%}
.row > .col-xs-2{width:16.6667%}
.row > .col-xs-3{width:25%}
.row > .col-xs-4{width:33.3333%}
.row > .col-xs-6{width:50%}
.row > .col-xs-8{width:66.6667%}
.row > .col-xs-9{width:75%}
.row > .col-xs-12{width:100%}

@media (min-width:768px){
    .row > .col-sm-1{width:8.3333%}
    .row > .col-sm-2{width:16.6667%}
    .row > .col-sm-3{width:25%}
    .row > .col-sm-4{width:33.3333%}
    .row > .col-sm-6{width:50%}
    .row > .col-sm-8{width:66.6667%}
    .row > .col-sm-9{width:75%}
    .row > .col-sm-12{width:100%}
}
@media (min-width:992px){
    .row > .col-md-1{width:8.3333%}
    .row > .col-md-2{width:16.6667%}
    .row > .col-md-3{width:25%}
    .row > .col-md-4{width:33.3333%}
    .row > .col-md-6{width:50%}
    .row > .col-md-8{width:66.6667%}
    .row > .col-md-9{width:75%}
    .row > .col-md-12{width:100%}
}
@media (min-width:1200px){
    .row > .col-lg-1{width:8.3333%}
    .row > .col-lg-2{width:16.6667%}
    .row > .col-lg-3{width:25%}
    .row > .col-lg-4{width:33.3333%}
    .row > .col-lg-6{width:50%}
    .row > .col-lg-8{width:66.6667%}
    .row > .col-lg-9{width:75%}
    .row > .col-lg-12{width:100%}
}

.img-fluid,.img-responsive{max-width:100%;height:auto}

.text-center{text-align:center}
.text-right{text-align:right}
.w-100{width:100%}
.m-auto{margin:auto}
.mt-3{margin-top:1rem}
.mb-3{margin-bottom:1rem}
.mt-5,.my-5{margin-top:2rem}
.mb-5,.my-5{margin-bottom:2rem}
.mt-32{margin-top:2rem}

.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.card{
    background:var(--et-surface);
    border:1px solid var(--et-line);
    border-radius:var(--et-r);
}
.card-body,.card-block,.card-footer{padding:16px}

.form-control{
    display:block;width:100%;
    min-height:46px;padding:10px 14px;
    font:inherit;color:var(--et-ink);
    background:var(--et-surface);
    border:1px solid var(--et-line);
    border-radius:var(--et-r-sm);
    outline:none;
}
.form-control:focus{border-color:var(--et-accent-2);box-shadow:0 0 0 4px rgba(123,97,255,.14)}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:46px;padding:10px 20px;
    font-family:var(--et-font);font-weight:600;
    border:1px solid var(--et-line);border-radius:999px;
    background:var(--et-surface);color:var(--et-ink);
    cursor:pointer;
}
.btn:hover{background:var(--et-surface-2)}

.alert{
    padding:14px 16px;border-radius:var(--et-r);
    border:1px solid var(--et-line);background:var(--et-surface-2);
}
.alert-info{border-color:#c7ddff;background:#f2f7ff}

hr{border:none;border-top:1px solid var(--et-line);margin:24px 0}

/* ------------------------------------------------------------- header ---- */

.et-header{
    position:sticky;top:0;z-index:120;
    background:var(--et-dark);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.et-header__bar{
    display:flex;align-items:center;gap:12px;
    min-height:62px;
}

.et-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.et-brand img{display:block;width:36px;height:36px;border-radius:9px}
.et-brand span{
    font-family:var(--et-font);font-size:1.05rem;font-weight:700;
    letter-spacing:-.01em;color:#fff;
}

.et-header__spacer{flex:1 1 auto}

.et-burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex:0 0 auto;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.04);
    border-radius:var(--et-r-sm);
    color:#fff;cursor:pointer;padding:0;
}
.et-burger span{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.et-burger span::before,.et-burger span::after{
    content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;
    transition:transform .2s ease, top .2s ease;
}
.et-burger span::before{top:-6px}
.et-burger span::after{top:6px}
.et-burger[aria-expanded="true"] span{background:transparent}
.et-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.et-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (min-width:992px){ .et-burger{display:none} }

.et-nav{display:flex;align-items:center;gap:6px}

/* the categories already have their own strip below the bar on wide screens,
   so they only need to be in the drawer */
@media (min-width:992px){ .et-nav .et-nav__cat{display:none} }

.et-nav a{
    display:inline-flex;align-items:center;
    padding:8px 12px;border-radius:999px;
    font-family:var(--et-font);
    font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:rgba(255,255,255,.72);
    white-space:nowrap;
    transition:background .15s ease,color .15s ease;
}
.et-nav a:hover,.et-nav a:focus-visible{background:rgba(255,255,255,.09);color:#fff}
.et-nav a.is-active{background:var(--et-accent);color:var(--et-accent-ink)}

/* desktop: primary links inline, the long category list lives in the drawer */
@media (max-width:991.98px){
    .et-nav{
        display:none;
        position:absolute;left:0;right:0;top:100%;
        flex-direction:column;align-items:stretch;gap:2px;
        background:var(--et-dark-2);
        border-bottom:1px solid rgba(255,255,255,.08);
        padding:10px 16px 18px;
        max-height:70vh;overflow-y:auto;
        box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
    }
    .et-nav.is-open{display:flex}
    .et-nav a{border-radius:var(--et-r-sm);padding:11px 14px;font-size:.85rem}
}

/* ------------------------------------------------- category chip strip ---- */

.et-chips{
    background:var(--et-dark-2);
    border-bottom:1px solid rgba(255,255,255,.07);
}
.et-chips__inner{
    display:flex;gap:8px;overflow-x:auto;
    padding:10px 16px;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;
}
.et-chips__inner::-webkit-scrollbar{display:none}
.et-chips a{
    flex:0 0 auto;scroll-snap-align:start;
    padding:7px 14px;border-radius:999px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.8);
    font-family:var(--et-font);font-size:.75rem;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
    transition:background .15s ease,color .15s ease;
}
.et-chips a:hover{background:var(--et-accent);color:var(--et-accent-ink)}

@media (min-width:768px){ .et-chips__inner{padding-inline:24px;max-width:var(--et-max);margin-inline:auto} }

/* --------------------------------------------------------------- hero ---- */

.et-hero{
    background:
        radial-gradient(90rem 30rem at 15% -10%, rgba(123,97,255,.35), transparent 60%),
        radial-gradient(70rem 26rem at 95% 0%, rgba(255,214,10,.18), transparent 55%),
        var(--et-dark);
    color:#fff;
    padding:36px 0 40px;
}
.et-hero h1{color:#fff;max-width:22ch;margin-bottom:.35em}
.et-hero p{
    color:rgba(255,255,255,.72);
    max-width:62ch;margin:0 0 20px;font-size:1.02rem;
}

.et-search{
    position:relative;max-width:520px;
}
.et-search input{
    width:100%;
    height:50px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:#fff;
    font:inherit;
    padding:0 18px 0 46px;
    outline:none;
    transition:border-color .15s ease, background .15s ease;
}
.et-search input::placeholder{color:rgba(255,255,255,.5)}
.et-search input:focus{border-color:var(--et-accent);background:rgba(255,255,255,.14)}
.et-search svg{
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;color:rgba(255,255,255,.55);pointer-events:none;
}

.et-hero__stats{
    display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;
    font-family:var(--et-font);font-size:.82rem;color:rgba(255,255,255,.6);
}
.et-hero__stats b{color:#fff;font-weight:600}
.et-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--et-good);margin-right:7px;
    box-shadow:0 0 0 0 rgba(18,183,106,.6);animation:et-pulse 2.2s infinite}
@keyframes et-pulse{70%{box-shadow:0 0 0 8px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}

/* ------------------------------------------------------------ sections --- */

.et-section{padding:30px 0 6px}
.et-section__head{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    margin-bottom:16px;
}
.et-section__head h2{
    margin:0;position:relative;padding-left:14px;
    font-size:clamp(1.1rem,1rem + .7vw,1.5rem);
    text-transform:capitalize;
}
.et-section__head h2::before{
    content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
    border-radius:4px;background:linear-gradient(var(--et-accent),var(--et-accent-2));
}
.et-section__count{color:var(--et-ink-faint);font-size:.82rem;font-family:var(--et-font);white-space:nowrap}

/* --------------------------------------------------------------- grid ---- */

.et-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
@media (min-width:480px){ .et-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} }
@media (min-width:768px){ .et-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} }
@media (min-width:1100px){ .et-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:1400px){ .et-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }

.et-card{
    display:flex;flex-direction:column;
    background:var(--et-surface);
    border:1px solid var(--et-line);
    border-radius:var(--et-r);
    overflow:hidden;
    box-shadow:var(--et-shadow);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.et-card:hover,.et-card:focus-visible{
    transform:translateY(-4px);
    box-shadow:var(--et-shadow-lg);
    border-color:#d7dae6;
    outline:none;
}
.et-card__media{
    position:relative;
    aspect-ratio:16/10;
    background:linear-gradient(135deg,#eceef5,#f7f8fb);
    overflow:hidden;
}
.et-card__media img{
    width:100%;height:100%;object-fit:contain;display:block;
    padding:8px;
    transition:transform .35s ease;
}
.et-card:hover .et-card__media img{transform:scale(1.05)}
.et-card__body{
    padding:10px 12px 12px;
    display:flex;flex-direction:column;gap:4px;flex:1 1 auto;
}
.et-card__title{
    font-family:var(--et-font);
    font-size:.86rem;font-weight:600;line-height:1.3;color:var(--et-ink);
    margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* drawn as a pseudo element so 566 cards do not cost 566 extra DOM nodes */
.et-card__body::after{
    content:attr(data-cta);
    margin-top:auto;
    font-family:var(--et-font);font-size:.72rem;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--et-ink-faint);
}
.et-card:hover .et-card__body::after{color:var(--et-accent-2)}

.et-empty{
    display:none;
    padding:26px;border-radius:var(--et-r);
    background:var(--et-surface);border:1px dashed var(--et-line);
    color:var(--et-ink-soft);text-align:center;
}
.et-empty.is-visible{display:block}

/* ------------------------------------------------------------- footer ---- */

.et-footer{
    margin-top:44px;
    background:var(--et-dark);
    color:rgba(255,255,255,.68);
    padding:34px 0 26px;
    font-size:.9rem;
}
.et-footer a{color:rgba(255,255,255,.78)}
.et-footer a:hover{color:var(--et-accent)}
.et-footer h3{
    color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
    margin:0 0 12px;font-weight:600;
}
.et-footer__cols{
    display:grid;gap:26px;
    grid-template-columns:1fr;
}
@media (min-width:768px){ .et-footer__cols{grid-template-columns:1fr 2fr} }

.et-langs{display:flex;flex-wrap:wrap;gap:7px}
.et-langs a{
    padding:5px 11px;border-radius:999px;
    background:rgba(255,255,255,.07);
    font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
}
.et-langs a:hover{background:var(--et-accent);color:var(--et-accent-ink)}

.et-footer__bottom{
    margin-top:26px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.09);
    display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
    font-size:.82rem;color:rgba(255,255,255,.5);
}

.et-top{
    position:fixed;right:16px;bottom:16px;z-index:110;
    width:44px;height:44px;border-radius:50%;
    border:none;cursor:pointer;
    background:var(--et-accent);color:var(--et-accent-ink);
    box-shadow:var(--et-shadow-lg);
    display:grid;place-items:center;
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.et-top.is-visible{opacity:1;visibility:visible;transform:none}

/* ==========================================================================
   Generator page - normalising the old markup
   ========================================================================== */

/* adsense units must never widen the page */
ins.adsbygoogle{max-width:100% !important;overflow:hidden}
.et-ad{
    margin:22px auto;text-align:center;max-width:100%;overflow:hidden;
}
.et-ad ins{margin-inline:auto}

.wrapper{background:var(--et-bg)}

.blog-title-section{
    background:
        radial-gradient(80rem 26rem at 10% -20%, rgba(123,97,255,.35), transparent 60%),
        var(--et-dark);
    padding:30px 0 34px;
}
.blog-title-section h1{color:#fff;margin:0;max-width:26ch}
.blog-title-section .title-contnet{padding:0}

.blog-container{padding:24px 0 10px}

.blog-container > .container{
    width:100% !important;max-width:var(--et-max) !important;
    padding-inline:16px;margin-inline:auto;
}
@media (min-width:768px){ .blog-container > .container{padding-inline:24px} }

/* ---- sidebar ---- */

.sidebar .widget{
    background:var(--et-surface);
    border:1px solid var(--et-line);
    border-radius:var(--et-r);
    padding:16px;
    margin-bottom:18px;
    box-shadow:var(--et-shadow);
}
.sidebar .widget .headline,
.sidebar .widget > strong{
    display:block;
    font-family:var(--et-font);
    font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--et-ink-faint) !important;
    margin-bottom:12px;
}
.sidebar .widget ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sidebar .widget ul li{margin:0}
.sidebar .widget ul li a{
    display:inline-block;padding:6px 11px;border-radius:999px;
    background:var(--et-surface-2);border:1px solid var(--et-line);
    font-family:var(--et-font);font-size:.72rem;font-weight:600;letter-spacing:.03em;
    color:var(--et-ink-soft);
}
.sidebar .widget ul li a b{font-weight:600}
.sidebar .widget ul li a:hover{background:var(--et-accent);border-color:var(--et-accent);color:var(--et-accent-ink)}

/*
	Wrapping grid rather than one row per game: the widget is a narrow column at
	desktop width but goes full width once the sidebar drops under the article,
	where a single 52px thumb per row left a wall of white space.
*/
.recent-item{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
    gap:4px;
}

/* the logos come in every ratio from 1:1 to 3.5:1, so they get a fixed box */
.recent-post{
    display:flex;align-items:center;gap:9px;
    padding:5px 7px 5px 5px;border-radius:var(--et-r-sm);
    border:1px solid transparent;
    min-width:0;
    transition:background .15s ease,border-color .15s ease;
}
.recent-post:hover,.recent-post:focus-visible{
    background:var(--et-surface-2);
    border-color:var(--et-line);
    outline:none;
}
.recent-post img{
    flex:0 0 auto;
    width:38px !important;height:38px;
    object-fit:contain;
    border-radius:8px;
    background:var(--et-surface-2);
    padding:2px;
    border:1px solid var(--et-line);
}
.recent-post .recent-hover{
    min-width:0;
    font-family:var(--et-font);font-size:.76rem;font-weight:600;line-height:1.25;
    color:var(--et-ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    overflow-wrap:anywhere;
}
.recent-post:hover .recent-hover{color:var(--et-accent-2)}

/* ---- main article card ---- */

.blog-post-item{
    background:var(--et-surface);
    border:1px solid var(--et-line);
    border-radius:var(--et-r-lg);
    box-shadow:var(--et-shadow);
    padding:16px;
    overflow:hidden;
}
@media (min-width:768px){ .blog-post-item{padding:26px} }

.blog-post-item .thumb{margin:0}
img.headerimg{
    width:100%;height:auto;
    max-height:320px;object-fit:cover;object-position:center;
    border-radius:var(--et-r);
    display:block;
    margin-bottom:18px;
}

.blog-contnet{padding:0}

/* ==========================================================================
   The step by step generator
   ========================================================================== */

.et-steps{
    display:flex;align-items:center;gap:8px;
    margin:6px 0 24px;
    list-style:none;padding:0;
}
.et-steps li{
    flex:1 1 0;display:flex;flex-direction:column;gap:6px;
    font-family:var(--et-font);font-size:.72rem;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;color:var(--et-ink-faint);
}
.et-steps li::before{
    content:"";display:block;height:4px;border-radius:4px;background:var(--et-line);
    transition:background .3s ease;
}
.et-steps li.is-done::before{background:var(--et-good)}
.et-steps li.is-active::before{background:linear-gradient(90deg,var(--et-accent),var(--et-accent-2))}
.et-steps li.is-active{color:var(--et-ink)}

.pavos2{padding:0;text-align:left}
.pavos2 + .pavos2{margin-top:0}

.et-panel{
    background:var(--et-surface-2);
    border:1px solid var(--et-line);
    border-radius:var(--et-r);
    padding:16px;
    margin:0 0 22px;
}
@media (min-width:768px){ .et-panel{padding:22px} }

.et-panel__title{
    display:flex;align-items:center;gap:10px;
    font-family:var(--et-font);font-size:1rem;font-weight:700;
    margin:0 0 14px;color:var(--et-ink);
}
.et-panel__title span.et-num{
    display:grid;place-items:center;flex:0 0 auto;
    width:26px;height:26px;border-radius:50%;
    background:var(--et-ink);color:#fff;
    font-size:.78rem;font-weight:700;
}

/* amounts */
.pavos-gratis{text-align:left}
.pavos-gratis .row{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;margin:0 0 4px !important;
}
@media (min-width:520px){ .pavos-gratis .row{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){ .pavos-gratis .row{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px} }

.pavos-gratis .row > [class*="col-"]{
    width:100% !important;float:none !important;
    padding:0 !important;max-width:100% !important;flex:none !important;
}

.options{margin:0;position:relative;height:100%}
.options label{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    padding:16px 8px 14px;margin:0;
    background:var(--et-surface);
    border:2px solid var(--et-line) !important;
    border-radius:var(--et-r);
    cursor:pointer;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    height:100%;
}
.options label:hover{border-color:#c9cede !important;transform:translateY(-2px)}

/* a visible tick so it reads as something you pick */
.options label::after{
    content:"";
    position:absolute;top:8px;right:8px;
    width:18px;height:18px;border-radius:50%;
    border:2px solid var(--et-line);
    background:var(--et-surface);
    transition:border-color .15s ease, background .15s ease;
}
.check-pavos:checked + label::after{
    border-color:var(--et-accent-2);
    background:var(--et-accent-2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.options img{
    width:64px !important;height:64px;max-width:64px !important;
    object-fit:contain;background:none !important;
}
.pavos-gratis .amount,
.options .amount{
    background:none !important;color:var(--et-ink) !important;
    font-family:var(--et-font);font-size:1rem !important;font-weight:700;
    padding:0 !important;line-height:1.2;text-align:center;
}
.check-pavos{position:absolute;opacity:0;pointer-events:none}
.check-pavos:checked + label{
    border-color:var(--et-accent-2) !important;
    box-shadow:0 0 0 4px rgba(123,97,255,.14);
    background:#fbfaff;
}
.options:hover label{border:2px solid #c9cede}
.check-pavos:focus-visible + label{outline:2px solid var(--et-accent-2);outline-offset:2px}

/* username + platform */
.et-field{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.et-field > label,
.et-panel .title1{
    font-family:var(--et-font);font-size:.86rem !important;font-weight:600;
    color:var(--et-ink-soft);letter-spacing:.01em;text-transform:none;
}

.usernameimg{
    width:44px !important;height:44px;border-radius:50%;
    float:none !important;margin:0 10px 0 0 !important;
    vertical-align:middle;border:1px solid var(--et-line);background:#fff;
}

input.nameuser,
select.plataforma{
    display:block;width:100% !important;
    height:52px;
    font-family:var(--et-font) !important;
    font-size:1.05rem !important;font-weight:600;
    color:var(--et-ink) !important;
    background:var(--et-surface);
    border:1px solid var(--et-line);
    border-radius:var(--et-r-sm);
    padding:0 14px !important;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
input.nameuser::placeholder{color:var(--et-ink-faint);font-weight:400}
input.nameuser:focus,
select.plataforma:focus{border-color:var(--et-accent-2);box-shadow:0 0 0 4px rgba(123,97,255,.14)}
input.nameuser[aria-invalid="true"]{border-color:var(--et-danger);box-shadow:0 0 0 4px rgba(229,72,77,.12)}

select.plataforma{
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6172' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
    padding-right:42px !important;
}

.et-error{
    display:none;
    margin:8px 0 0;padding:10px 12px;
    border-radius:var(--et-r-sm);
    background:#fef3f2;border:1px solid #fecdc9;color:#a4262c;
    font-size:.88rem;
}
.et-error.is-visible{display:block}

/* the call to action */
.btn-gen,
a.btn-gen,
button.et-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;
    min-height:56px;
    padding:14px 24px !important;
    border:none;
    border-radius:999px;
    background:linear-gradient(135deg,var(--et-accent),#ffb703) !important;
    color:var(--et-accent-ink) !important;
    font-family:var(--et-font) !important;
    font-size:1.05rem !important;font-weight:700;letter-spacing:.01em;
    line-height:1.2 !important;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 10px 22px -12px rgba(255,183,3,.9);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
    margin:0 !important;
}
.btn-gen:hover,button.et-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
    color:var(--et-accent-ink) !important;
    box-shadow:0 16px 30px -14px rgba(255,183,3,.95);
}
.btn-gen:active,button.et-btn:active{transform:translateY(0)}
.btn-gen:focus-visible{outline:3px solid var(--et-accent-2);outline-offset:3px}

.et-btn--ghost{
    background:var(--et-surface) !important;
    color:var(--et-ink) !important;
    border:1px solid var(--et-line) !important;
    box-shadow:none;
}
.et-btn--ghost:hover{background:var(--et-surface-2) !important;color:var(--et-ink) !important}

.et-cta-wrap{margin:20px 0 6px}
@media (min-width:768px){
    .btn-gen,button.et-btn{width:auto;min-width:320px}
    .et-cta-wrap{display:flex;justify-content:center}
}

/* the yellow legacy label wrapper */
strong.pavos2-title3{display:block;width:100%;font-weight:400}
.back-yellow{background:none}

/* ---- loading step ---- */

#section-p2 .loading-car,
#section-p3{border:none}

.loading-car{
    display:block !important;
    background:var(--et-surface) !important;
    border:1px solid var(--et-line) !important;
    border-radius:var(--et-r);
    padding:22px 16px;
    text-align:center;
}
.loading-car .card-body{display:block !important;padding:0}

.searchwarp{
    position:relative;display:inline-block;
    width:180px;max-width:100%;aspect-ratio:1;
    border-radius:var(--et-r);overflow:hidden;
    background:var(--et-surface-2);border:1px solid var(--et-line);
}
.searchwarp > img{
    width:100% !important;height:100%;max-width:100% !important;
    object-fit:contain;padding:12px;display:block;
}
.loading-img{border-radius:var(--et-r-sm)}

.search{
    position:absolute;inset:0;display:none;place-items:center;
    background:rgba(16,18,25,.55);
    color:var(--et-accent);
    animation:et-spin 2.4s linear infinite;
}
.search svg{width:56px;height:56px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
@keyframes et-spin{to{transform:rotate(360deg)}}

#tex-load{
    font-family:var(--et-font);font-size:.98rem;font-weight:600;
    color:var(--et-ink);margin:16px 0 12px !important;min-height:1.6em;
}
#textLoad .title1{font-size:1rem;color:var(--et-ink-soft)}

.progress,
.progress.w-100.prog.mb-3{
    height:14px !important;
    border-radius:999px !important;
    background:var(--et-line) !important;
    overflow:hidden;
    box-shadow:none;
    padding:0;
    width:100%;
    display:block;
    margin:0 0 10px;
}
.progress-bar,.prog-1{
    height:100%;
    background:linear-gradient(90deg,var(--et-accent),var(--et-accent-2)) !important;
    border-radius:999px;
    transition:width .12s linear;
    box-shadow:none;
}
#barra-text{
    display:block;text-align:center;
    font-family:var(--et-font);font-size:1.1rem !important;font-weight:700;
    color:var(--et-ink);margin-bottom:8px;
}

/* ---- result step ---- */

#section-p3 .parrafo{text-align:left}
#section-p3 .text-center{text-align:center}
#section-p3 .connect{
    font-family:var(--et-font);font-weight:600;color:var(--et-ink-soft);
}
.total{
    width:auto !important;display:inline-flex;align-items:center;gap:10px;
    background:var(--et-dark);color:#fff;border-radius:999px;
    padding:10px 22px 10px 16px;margin:10px auto 22px !important;
}
.total .title1{font-size:1.5rem !important;display:flex;align-items:center;gap:10px;color:#fff}
.total-img{position:static !important;width:34px !important;max-width:34px !important;margin:0 !important}
#total,#total1{color:var(--et-accent) !important;padding:0 !important;line-height:1.2 !important;font-weight:700}

.haycodes{
    background:var(--et-surface) !important;
    border:1px solid var(--et-line);
    border-radius:var(--et-r) !important;
    padding:18px !important;
    text-align:left;
}
.haycodes ul{padding-left:1.2em}
.haycodes li{margin-left:0}

#codigosayer,
.codigoshoy{
    border:1px solid var(--et-line) !important;
    border-radius:var(--et-r) !important;
    background:var(--et-surface);
    padding:16px 18px !important;
    font-size:1rem !important;
}
#listcodes,#listcodesayer{list-style:none;padding:0;margin:0;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
#listcodes li,#listcodesayer li{
    margin:0 !important;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.9rem;letter-spacing:.04em;
    background:var(--et-surface-2);border:1px dashed var(--et-line);
    border-radius:var(--et-r-sm);padding:8px 10px;text-align:center;
}

/* ---- live stats row ---- */

.bannert{
    background:var(--et-surface) !important;
    border:1px solid var(--et-line);
    border-radius:var(--et-r);
    margin:26px 0 !important;
    padding:16px;
}
.bannert .row{margin:0}
.spritevbuck{max-width:64px !important}

.info-users{
    background:var(--et-surface) !important;
    border:1px solid var(--et-line);
    border-radius:var(--et-r-sm);
    padding:12px 14px !important;
    font-size:.86rem !important;
    text-align:center;
    margin-bottom:10px;
}
.info-users.estado{color:var(--et-good);background:#f0fdf6 !important;border-color:#bbf3d5}

.title1{font-size:1.15rem;font-weight:700;font-family:var(--et-font)}
.purple{color:var(--et-accent-2) !important}

/* ==========================================================================
   The SEO copy
   ========================================================================== */

.blog-contnet h2,
.seccion-interior h2{
    margin-top:1.4em;
    font-size:clamp(1.15rem,1.02rem + .7vw,1.5rem);
}
.blog-contnet p,
.seccion-interior p{
    color:var(--et-ink-soft);
    margin:0 0 1.05em;
}
.blog-contnet strong,.seccion-interior strong{color:var(--et-ink)}
.blog-contnet ol,.blog-contnet ul,
.seccion-interior ol,.seccion-interior ul{
    color:var(--et-ink-soft);padding-left:1.3em;margin:0 0 1.2em;
}
.blog-contnet li,.seccion-interior li{margin:0 0 .5em;text-align:left}

.newtext{
    background:var(--et-surface-2) !important;
    border:1px solid var(--et-line) !important;
    border-radius:var(--et-r) !important;
}

.video-container lite-youtube{border-radius:var(--et-r);overflow:hidden;max-width:100%}

.author-profile{
    background:var(--et-surface);border:1px solid var(--et-line);
    border-radius:var(--et-r);padding:14px 16px;margin-top:18px;
}
.author-profile fieldset{border:none;margin:0;padding:0}

/* ==========================================================================
   Legacy leftovers we simply neutralise
   ========================================================================== */

.footer-top-section,.footer-section{display:none !important}
.section.blog-title-section{margin:0}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   lite-youtube (extracted from the old theme stylesheet)
   ========================================================================== */
lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width: 100%;
    height: 100%;
    /* …but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ==========================================================================
   Giveaway landing blocks + daily codes form (were inline in index.php)
   ========================================================================== */

#genBtn{
    display:block;width:100%;margin:0;
    min-height:52px;padding:14px 24px;
    border:none;border-radius:999px;
    background:linear-gradient(135deg,var(--et-accent),#ffb703);
    color:var(--et-accent-ink);
    font-family:var(--et-font);font-size:1rem;font-weight:700;text-transform:uppercase;
    cursor:pointer;
}
#genBtn:disabled{filter:grayscale(1);cursor:default}

#cc-gen .card-footer{padding:0}
#cc-gen .progress{display:none;margin:14px 0 0}
#cc-gen .information{margin-top:14px}

.newtext{padding:20px;margin:22px 0}
.newcodeslinks{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:600px){ .newcodeslinks{grid-template-columns:1fr 1fr} }
.newcodes,.newlinks{
    background:var(--et-surface);border:1px solid var(--et-line);
    border-radius:var(--et-r);padding:14px 18px;width:auto;margin:0;
}
.newcodeslinks h2{font-size:1rem !important;font-weight:700 !important;margin-bottom:.6em}

.newcomment{
    background:var(--et-surface);border:1px solid var(--et-line);
    border-radius:var(--et-r);padding:14px 16px;box-shadow:var(--et-shadow);margin-bottom:6px;
}
.newanswer{
    margin:0 0 22px 26px;background:var(--et-surface-2);
    border:1px solid var(--et-line);border-radius:var(--et-r);padding:12px 16px;
}

.contact-form .form-group{margin-bottom:14px}
.contact-form label{display:block;font-family:var(--et-font);font-size:.85rem;font-weight:600;margin-bottom:6px}
.contact-form .required{color:var(--et-danger)}

/* ==========================================================================
   Result actions + amounts panel
   ========================================================================== */

.et-result-actions{
    display:flex;flex-direction:column;gap:10px;
    margin:22px 0 6px;
}
@media (min-width:768px){
    .et-result-actions{flex-direction:row;justify-content:center;flex-wrap:wrap}
    .et-result-actions > *{width:auto;min-width:0;flex:0 1 auto}
}

.et-soldout{
    display:flex;flex-direction:column;gap:6px;
    background:#fff8f8;border:1px solid #fecdc9;
    border-radius:var(--et-r);padding:16px 18px;text-align:center;
}
.et-soldout strong{
    font-family:var(--et-font);font-size:1.15rem;color:#b42318;
}
.et-soldout span{color:var(--et-ink-soft)}

.pavos-gratis{
    background:var(--et-surface-2);
    border:1px solid var(--et-line);
    border-radius:var(--et-r);
    padding:14px;
    margin-bottom:20px;
}
@media (min-width:768px){ .pavos-gratis{padding:18px} }

/* the heading that introduces an amounts panel */
.blog-contnet h2:has(+ .pavos-gratis){
    font-size:1.05rem;
    margin-bottom:.6em !important;
    color:var(--et-ink);
}

#section-p2,#section-p3{scroll-margin-top:90px}
#section-p11{scroll-margin-top:90px}

/* the loading and the result step only appear once the wizard is running */
#section-p2,#section-p3{display:none}

#imgloading5{
    width:140px;height:140px;object-fit:contain;
    display:block;margin:0 auto 18px;
}
#section-p3 .text-center > p:first-child{margin-bottom:14px}

/* on phones the article must come before the category / related sidebar */
@media (max-width:991.98px){
    .blog-container .row > .col-md-9{order:-1}
    .sidebar{margin-top:20px}
}

/* live counters band */
.et-stats{
    display:grid;gap:12px;
    grid-template-columns:1fr;
}
@media (min-width:700px){ .et-stats{grid-template-columns:1fr 1fr} }

.et-stat{
    display:flex;align-items:center;gap:14px;
    background:var(--et-surface-2);
    border:1px solid var(--et-line);
    border-radius:var(--et-r);
    padding:14px 16px;
}
.et-stat img{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.et-stat strong{display:block;font-size:1.35rem;line-height:1.2}
.et-stat span{display:block;font-size:.84rem;color:var(--et-ink-soft);line-height:1.4}

/* right to left languages */
[dir="rtl"] .et-search input{padding:0 46px 0 18px}
[dir="rtl"] .et-search svg{left:auto;right:16px}
[dir="rtl"] .et-section__head h2{padding-left:0;padding-right:14px}
[dir="rtl"] .et-section__head h2::before{left:auto;right:0}
[dir="rtl"] select.plataforma{background-position:left 14px center;padding-right:14px !important;padding-left:42px !important}
[dir="rtl"] .usernameimg{margin:0 0 0 10px !important}
[dir="rtl"] .newanswer{margin:0 26px 22px 0}

/* ==========================================================================
   Game header
   ========================================================================== */

.et-crumbs{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    font-family:var(--et-font);font-size:.78rem;
    color:rgba(255,255,255,.55);
    margin-bottom:16px;
}
.et-crumbs a{color:rgba(255,255,255,.78)}
.et-crumbs a:hover{color:var(--et-accent)}
.et-crumbs span[aria-hidden]{opacity:.4}

.et-gamehead{
    display:flex;align-items:center;gap:16px;
    flex-direction:column;text-align:center;
}
@media (min-width:768px){
    .et-gamehead{flex-direction:row;text-align:left;gap:22px}
}

.et-gamehead__logo{
    width:88px;height:88px;flex:0 0 auto;
    border-radius:20px;object-fit:cover;
    background:#fff;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.7);
    border:1px solid rgba(255,255,255,.14);
}
@media (min-width:768px){ .et-gamehead__logo{width:112px;height:112px;border-radius:24px} }

.et-gamehead .title-contnet{padding:0;flex:1 1 auto;min-width:0}
.et-gamehead h1{margin-bottom:.35em}

.et-gamehead__meta{
    display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0;
}
@media (min-width:768px){ .et-gamehead__meta{justify-content:flex-start} }
.et-gamehead__meta span{
    padding:4px 12px;border-radius:999px;
    background:rgba(255,255,255,.1);
    color:rgba(255,255,255,.82);
    font-family:var(--et-font);font-size:.72rem;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;
}

.et-card[hidden],[data-et-section][hidden]{display:none !important}

/* an amounts block that still needs a choice */
.pavos-gratis.is-invalid{
    border-color:#fecdc9;
    background:#fffafa;
    box-shadow:0 0 0 4px rgba(229,72,77,.10);
}
.pavos-gratis.is-invalid .options label{border-color:#f7c3bf !important}
.pavos-gratis > .et-error{margin:0 0 12px}

/* the poster we now ship inside <lite-youtube> so crawlers see the video */
lite-youtube > .lyt-poster{
    width:100%;height:100%;object-fit:cover;display:block;
    position:absolute;inset:0;
}
lite-youtube.lyt-activated > .lyt-poster{opacity:0;pointer-events:none}

/* ==========================================================================
   Layout stability + off-screen work
   ========================================================================== */

/* every ins.adsbygoogle is data-ad-format="auto" with no reserved height, so
   each one shoved the page down when it filled */
.et-ad,
.card-block:has(> .adsbygoogle),
.widget > .adsbygoogle{min-height:120px}
@media (min-width:768px){ .et-ad{min-height:280px} }

/* 468 cards is ~3140 elements; skip layout and paint for the sections that are
   not on screen yet */
.et-section{content-visibility:auto;contain-intrinsic-size:auto 620px}

/* the footer used to supply the only H3s on the page, which broke the outline */
.et-footer__title{
    color:#fff;font-family:var(--et-font);
    font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
    margin:0 0 12px;font-weight:600;
}