/* Spy v2: mobile design pass, Nov 2026.
   Every rule is scoped to body.spyv2, so nothing here applies until the switch is on (mu-plugin spy-v2.php).
   Idea: each block is a sheet in the same case file as the intro box: ink covers, beige file tabs,
   gold figures, red stamps. No coloured edge stripes. */

body.spyv2{--tab:#e8d9b0;--sheet:#fdf8ee;--edge:#cfc4ab}
@media (prefers-reduced-motion:no-preference){html:has(body.spyv2){scroll-behavior:smooth}}

/* ---------- all widths ---------- */

/* no coloured edge stripes */
body.spyv2 .card{border-top:1px solid var(--line);position:relative}
body.spyv2 .card-title a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
body.spyv2 .country{border-left:1px solid var(--edge)}
body.spyv2 .entry-content blockquote{border-left:0;border-radius:6px}

/* the file: intro box, opening and jump row are one block */
body.spyv2 .entry-content .spyf{margin-bottom:0;border-radius:14px 14px 0 0;box-shadow:none}
body.spyv2.single .entry-content .spyf + .lede{margin:0 0 22px;border:1px solid var(--edge);border-top:0;border-radius:0 0 14px 14px;background:var(--sheet);padding:16px 18px;font-size:1.0625rem;line-height:1.5}
body.spyv2.single .entry-content .spyf + .lede.sx-joined{margin:0;border-radius:0}
body.spyv2 .sx-strip{margin:0 0 22px;background:var(--paper-2);border:1px solid var(--edge);border-top:0;border-radius:0 0 14px 14px;padding:0 0 14px 16px}
body.spyv2 .sx-strip{position:relative}
body.spyv2 .sx-strip [data-t]::before{content:attr(data-t)}
body.spyv2 .sx-next{position:absolute;right:8px;top:37px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--paper-2),0 3px 10px rgba(27,26,33,.35);cursor:pointer;display:flex;align-items:center;justify-content:center}
body.spyv2 .sx-next::before{content:"";width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4b860' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
body.spyv2 .sx-next:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
body.spyv2 .sx-strip.sx-end .sx-next{display:none}
body.spyv2 .sx-strip.sx-end .sx-row{-webkit-mask-image:none;mask-image:none}
@media (max-width:720px){
body.spyv2 .entry-content .sx-strip.sx-fit .sx-row{padding-right:16px;overflow:hidden}
body.spyv2 .entry-content .sx-strip.sx-fit .sx-row li{flex:0 1 100px;min-width:0}
body.spyv2 .entry-content .sx-strip.sx-fit .sx-img{width:100%;height:auto;aspect-ratio:5 / 2}
}
body.spyv2 .entry-content .sx-tab{display:inline-block;margin:0 0 12px;font:800 12px/1 var(--sans);letter-spacing:.1em;color:var(--tab);background:var(--ink);padding:8px 11px 7px;border-radius:0 0 5px 5px}
body.spyv2 .entry-content .sx-row{list-style:none;margin:0;padding:0 16px 0 0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
body.spyv2 .sx-row::-webkit-scrollbar{display:none}
body.spyv2 .entry-content .sx-row li{flex:0 0 100px;margin:0;scroll-snap-align:start}
body.spyv2 .entry-content .sx-row a{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;text-decoration:none;color:var(--ink);font:600 .875rem/1.2 var(--sans);text-align:center;border-radius:6px}
body.spyv2 .entry-content .sx-row a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
body.spyv2 .entry-content .sx-row .sx-img{display:block;width:100px;height:40px;background:#fff center/contain no-repeat;border:1px solid var(--edge);border-radius:6px}
body.spyv2 .entry-content .sx-row i{font:600 .8125rem/1.1 var(--sans);font-style:normal;color:var(--acc-2);margin-top:-3px}
body.spyv2 .sx-row .sx-more b{display:flex;align-items:center;justify-content:center;width:100px;height:40px;border:1.5px dashed var(--ink);border-radius:6px;font:900 1.15rem/1 var(--serif);color:var(--ink)}
@media (min-width:721px){body.spyv2 .entry-content .sx-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));justify-items:center;overflow:visible;row-gap:14px}}
@media (max-width:720px){body.spyv2 .entry-content .sx-strip.sx-moved .sx-row{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 66px),transparent calc(100% - 52px));mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 66px),transparent calc(100% - 52px))}}
@keyframes sxNudge{0%,100%{transform:none}45%{transform:translateX(-46px)}}
@media (max-width:720px) and (prefers-reduced-motion:no-preference){body.spyv2 .entry-content .sx-strip:not(.sx-fit) .sx-row li{animation:sxNudge .9s ease-in-out 3s 1 both}}
@media (max-width:720px){body.spyv2 .entry-content .sx-row{padding-right:68px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 66px),transparent calc(100% - 52px));mask-image:linear-gradient(90deg,#000 calc(100% - 66px),transparent calc(100% - 52px))}}

body.spyv2 .entry-content ul.facts{padding:0}

/* sister headings: logo, casino name, then what sets it apart */
body.spyv2 .entry-content h2.sx-h{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:14px;align-items:center;border-top:2px solid var(--ink);padding-top:16px;margin:2em 0 .7em;scroll-margin-top:12px}
body.spyv2 .entry-content .sec-head + h2.sx-h{border-top:0;padding-top:0;margin-top:1.3em}
body.spyv2 .entry-content h2.sx-h .sx-logo{display:block;grid-column:1;grid-row:1;width:100px;height:40px;background:#fff center/contain no-repeat;border:1px solid var(--edge);border-radius:6px}
body.spyv2 h2.sx-h .sx-n{grid-column:2;grid-row:1;font-size:1.4rem;line-height:1.1}
body.spyv2 h2.sx-h .sx-c{font-size:0}
body.spyv2 h2.sx-h .sx-w{grid-column:1 / -1;margin-top:10px;font:600 1.0625rem/1.35 var(--sans);letter-spacing:0;color:var(--ink-2)}
body.spyv2 h2.sx-h .sx-w::first-letter{text-transform:uppercase}
body.spyv2 .sis-grid,body.spyv2 .sis{scroll-margin-top:12px}
body.spyv2 .sis h3 .sx-not{display:block;margin-top:4px;font:600 .8125rem/1.1 var(--sans);font-style:normal;letter-spacing:0;color:var(--acc-2)}
body.spyv2 .sis h3 .sx-not::before{content:attr(data-t)}
body.spyv2 .terms-h.terms-h-long b{font-size:1.2rem;line-height:1.25}

/* home, category and search cards: logo and a checked stamp */
body.spyv2 .sx-card .sx-card-logo{display:block;width:100px;height:40px;margin:14px 0 0 16px;background:#fff center/contain no-repeat;border:1px solid var(--edge);border-radius:6px}
body.spyv2 .sx-card.has-logo .card-body{padding-top:10px}
body.spyv2 .sx-card .card-date{align-self:flex-start;margin-top:4px;font:900 .72rem/1 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:#b3263c;border:2px solid #b3263c;border-radius:5px;padding:5px 7px 3px;transform:rotate(-3deg)}
body.spyv2 .sx-card.has-logo .card-date{position:absolute;top:20px;right:14px;margin:0}
body.spyv2 .country b{flex:none;font:900 1rem/1 var(--serif);color:#e4b860;background:var(--ink);border-radius:4px;padding:6px 7px 4px}
body.spyv2 .country b::before{content:attr(data-t)}
body.spyv2 .country i{display:none}

/* linked casino names on sister cards look like links */
body.spyv2.single .sis h3 a{display:inline-block;padding:11px 0;margin:-11px 0;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px}

/* desktop: the top menu wraps instead of pushing the page sideways on laptops */
@media (min-width:721px){body.spyv2 .topnav ul{flex-wrap:wrap;justify-content:flex-end}}
@media (min-width:721px) and (max-width:1400px){body.spyv2 .topbar-tag{display:none}body.spyv2 .topnav li a{padding:12px 8px;font-size:.74rem;letter-spacing:.03em}}

/* ---------- offer box on phones ---------- */
@media (max-width:860px){
body.spyv2 .spyob{margin:18px 0 22px}
body.spyv2 .spyob-row:not(.spyob-top){grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"logo main cta" "rate main cta";column-gap:10px;row-gap:3px;padding:10px 10px 10px 12px;align-items:center}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-logo{align-self:end}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-logo img{width:76px;height:31px}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-rank{top:3px;left:3px;width:19px;height:19px;font-size:10.5px}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-rate{align-self:start}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-stars{font-size:11px;letter-spacing:0}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-cta{grid-area:cta;align-self:center}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-btn{display:flex;align-items:center;justify-content:center;width:auto;min-width:0;min-height:44px;padding:0 12px;font-size:14px}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-feat{display:none}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-name{font-size:12px;margin-bottom:2px}
body.spyv2 .spyob-foot{font-size:12px;line-height:1.45}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-bonus{font-size:15px;line-height:1.25}
body.spyv2 .spyob-row:not(.spyob-top) .spyob-plain{font-size:15px;line-height:1.25}
}

/* ---------- phones ---------- */
@media (max-width:720px){
/* one slim ink bar: logo left, menu right */
body.spyv2 .site-head{position:relative}
body.spyv2 .topbar-in{min-height:52px;justify-content:flex-end}
body.spyv2 .burger{min-height:48px;padding:0 0 0 16px;gap:10px}
body.spyv2 .burger span{display:none}
body.spyv2 .burger::before{content:"";flex:none;width:22px;height:16px;background:linear-gradient(#fff 0 2px,transparent 2px 7px,#fff 7px 9px,transparent 9px 14px,#fff 14px 16px)}
body.spyv2 .burger i{margin-left:0}
body.spyv2 .topnav{top:52px}
body.spyv2 .topnav li a{padding:15px 20px}
body.spyv2 .masthead{background:var(--ink);border-bottom:0}
body.spyv2 .masthead-in{padding:0 16px}
body.spyv2 .brand{position:absolute;top:0;left:16px;height:52px;display:flex;align-items:center;justify-content:flex-start;z-index:2}
body.spyv2 .brand a{display:flex;align-items:center;min-height:44px}
body.spyv2 .brand img{max-height:40px;width:auto;filter:brightness(0) invert(1)}
body.spyv2 .masthead .search{margin:2px 0 12px}
body.spyv2 .masthead .search input{padding:12px 16px}
body.spyv2 .arc-head{padding:18px 0 16px}
body.spyv2 .arc-head .crumbs{margin-bottom:4px}
body.spyv2 .arc-head .crumbs a{display:inline-block;padding:12px 0}
body.spyv2 .arc-title{font-size:1.65rem;line-height:1.1}
body.spyv2.home .masthead .search,body.spyv2.single .masthead .search{display:none}

/* post head: the answer on the first screen */
body.spyv2.single .crumbs{display:none}
body.spyv2.single article.post-single{padding:16px 16px 26px}
body.spyv2 .post-title{font-size:1.65rem;line-height:1.1;margin:0 0 10px}
body.spyv2 .post-meta{margin-bottom:14px;gap:8px}
body.spyv2 .post-single:has(.spyf) .meta-checked{display:none}
body.spyv2 .pill{position:relative}
body.spyv2 .pill::after{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}

/* reading size */
body.spyv2 .entry-content{font-size:1.0625rem;line-height:1.6}
body.spyv2 .entry-content>p:first-of-type{font-size:1.0625rem}
body.spyv2 .entry-content p{margin:0 0 1.05em}
body.spyv2 .entry-content h2{font-size:1.45rem;margin:1.8em 0 .55em}
body.spyv2 .entry-content h2.sx-h{margin:1.9em 0 .6em}
body.spyv2 .entry-content .sec-head h2{margin:0 0 8px;font-size:1.3rem}
body.spyv2 .entry-content .spy-more h2{margin:0 0 14px}

/* sister cards: logo beside the name, labels side by side */
body.spyv2 .sis-grid{gap:10px}
body.spyv2.single .sis-grid .sis{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px 12px;align-items:center;padding:12px;border:1px solid var(--edge);border-radius:10px;box-shadow:none}
body.spyv2 .sis .sis-head{display:contents}
body.spyv2.single .sis img.sis-logo{width:100px;height:40px;margin:0;object-fit:contain;background:#fff;border-color:var(--edge)}
body.spyv2.single .sis h3{margin:0!important;font-size:1.2rem;line-height:1.15}
body.spyv2.single .sis p{grid-column:1 / -1;margin:0}
body.spyv2.single .sis p:empty{display:none}
body.spyv2.single .sis ul.tick{grid-column:1 / -1;margin:0;gap:6px}
body.spyv2.single .sis .tick li{margin:0;padding:5px 9px;font-size:.9375rem;line-height:1.3}

/* terms cards, questions and tools: nothing small */
body.spyv2.single .terms li,body.spyv2.single .terms-list li{font-size:1rem;padding:12px 14px}
body.spyv2 .terms-h span{font-size:.875rem}
body.spyv2 .qa p{font-size:1rem}
body.spyv2 .ppl p.ppl-sub{font-size:16px}
body.spyv2 .ppl-ctl label{font-size:14px;flex:1 1 100%}
body.spyv2 .ppl-chips button{min-height:44px;padding:8px 14px}
body.spyv2 .ppl-row small{font-size:14px}
body.spyv2 .ppl-row .ppl-s{font-size:16px}
body.spyv2 .ppl-foot{font-size:14px}
body.spyv2 .post-modified-info{font-size:.875rem}

/* sticky offer bar: lower, with full-size tap targets */
body.spyv2 .spyob-bar{gap:9px;padding:8px 2px calc(8px + env(safe-area-inset-bottom,0px)) 10px;border-top-width:2px;border-radius:12px 12px 0 0}
body.spyv2 .spyob-bar img{width:70px;height:34px}
body.spyv2 .spyob-bar-b{font-size:14px;line-height:1.2}
body.spyv2 .spyob-bar .spyob-bar-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
body.spyv2 .spyob-bar-n::after{position:absolute;top:-10px;left:14px;margin:0;background:#1b1a21;padding:2px 5px 1px;font-size:10px;line-height:1.2}
body.spyv2 .spyob-bar a.spyob-bar-cta{display:flex;align-items:center;min-height:44px;padding:0 12px}
body.spyv2 .spyob-bar-x{width:40px;height:44px;line-height:44px}
body.spyv2 .site-foot{padding-bottom:76px}

/* foot of the page: shorter lists, bigger taps */
body.spyv2 .related{margin-top:30px}
body.spyv2 .related .grid{gap:10px}
body.spyv2 .related .card-body{padding:13px 16px}
body.spyv2 .related .card-x{display:none}
body.spyv2 .sidebar .groups{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
body.spyv2 .sidebar li{padding:0}
body.spyv2 .sidebar li{font-size:1rem}
body.spyv2 .sidebar li a{flex:1;padding:12px 0}
body.spyv2 .sidebar .latest-list span{font-size:.8125rem}
body.spyv2 .sidebar .groups span{font-size:.8125rem}
body.spyv2 .site-foot{font-size:1rem}
body.spyv2 .foot-legal{font-size:.875rem}
body.spyv2 .spy-more-s{font-size:14px}
body.spyv2 .facts li{font-size:1rem}
body.spyv2 .site-foot li{padding:0}
body.spyv2 .site-foot li a{display:block;padding:11px 0}

/* home */
body.spyv2 .hero:before,body.spyv2 .hero:after{display:none}
body.spyv2 .hero-in{padding:26px 20px 30px}
body.spyv2 .hero .kick{background:var(--tab);color:#111;padding:8px 11px 7px;border-radius:3px;letter-spacing:.1em;font-size:.75rem;margin-bottom:14px}
body.spyv2 .hero h1{font-size:1.6rem;line-height:1.12}
body.spyv2 .hero p{font-size:1rem;margin-bottom:18px}
body.spyv2 .countries{margin:26px 0 6px}
body.spyv2 .countries .grid{grid-template-columns:1fr 1fr;gap:10px}
body.spyv2 .country{gap:8px;min-height:58px;padding:12px 12px;font-size:1rem;line-height:1.2;box-shadow:none}
body.spyv2 .latest{margin:30px 0 6px}
body.spyv2 .latest .grid{gap:10px}
body.spyv2 .card-body{padding:14px 16px}
body.spyv2 .card-x{font-size:1rem}
body.spyv2 .card-date{font-size:.8125rem}
body.spyv2 .home-copy .entry-content{padding:20px 18px}
}