:root{ --bg:#ffe9f4; --bg-dot:#ffd4e9; --panel:#fffaf4; --panel2:#ffffff; --pink:#ff5fa6; --pink-d:#e23c86; --hot:#ff2e88; --lilac:#c9a3ff; --mint:#7fe0bb; --yellow:#ffd451; --sky:#9bd6ff; --ink:#5a2347; --ink-soft:#9a5a80; --outline:#3a1430; --press:'Press Start 2P',cursive; --pix:'Pixelify Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --ad-top-h:56px; --ad-bot-h:56px; --shell:1160px; } @media(min-width:760px){:root{--ad-top-h:68px; --ad-bot-h:68px}} @media(min-width:1100px){:root{--ad-top-h:98px}} *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--pix); color:var(--ink); line-height:1.55; min-height:100svh; background-color:var(--bg); background-image:radial-gradient(var(--bg-dot) 2.5px, transparent 2.6px); background-size:18px 18px; /* padding-top is gone: it existed only to clear the top ad bar while that bar was position:fixed. The bar now flows under the header, so reserving the space as well left 68px of empty page above the header. The BOTTOM bar is still fixed, so its reservation stays. */ padding-bottom:calc(var(--ad-bot-h) + env(safe-area-inset-bottom)); /* clip, not hidden: `hidden` forces overflow-y to auto and makes a scroll container it can never scroll, which kills touch scrolling on a phone. */ overflow-x:hidden; overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ---------- ads ---------- */ .adbanner{position:fixed;left:0;right:0;z-index:90;overflow:hidden; display:flex;align-items:center;justify-content:center;background:var(--panel)} /* The top banner used to be pinned to the viewport with position:fixed, so it painted above the site header no matter where it sat in the HTML - the brand was never the first thing on the page. It now flows in the document, directly under the header. */ .adbanner.top{position:static;top:auto;height:var(--ad-top-h); border-bottom:3px solid var(--outline);border-top:3px solid var(--outline)} .adbanner.bot{bottom:0;border-top:3px solid var(--outline); height:calc(var(--ad-bot-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)} /* Rails only exist when the viewport clears the 1160px content shell on both sides AND is tall enough for a 600px unit between the two fixed strips. ads.js matches this query exactly, so a rail unit is never loaded while it is invisible and the two stand-in slots take over below this size. */ .ad-row{display:flex;justify-content:center;width:100%;margin:clamp(18px,3.2vw,30px) 0;overflow:hidden} /* KRITRIM_NOHSCROLL: 100vw counts the scrollbar but clientWidth does not, so this sat ~8-15px wider than the viewport at desktop widths. It was masked by .ad-row{overflow:hidden} until the caption fix changed that to visible. The ad inside is centred and never wider than 728px, so full-bleed bought nothing. */ .ad-row.wide{width:100%;margin-left:0;margin-right:0} .grid > .ad-row{grid-column:1/-1;margin:6px 0} .ad-slot{line-height:0;max-width:100vw} .ad-slot iframe{border:0;display:block;max-width:100vw} .ad-native{width:min(var(--shell),100% - 28px);margin:clamp(18px,3.2vw,30px) auto} [hidden]{display:none !important} /* ---------- header ---------- */ /* top:0 now that nothing is pinned above it - it was offset by the fixed ad bar's height. */ .site{position:sticky;top:0;z-index:70;background:var(--panel); border-bottom:3px solid var(--outline);display:flex;align-items:center;gap:12px; padding:10px clamp(12px,3vw,22px);flex-wrap:wrap} .logo{display:flex;align-items:center;gap:9px} .logo .mark{font-size:22px;line-height:1} .logo .name{font-family:var(--press);font-size:clamp(11px,2.4vw,14px);color:var(--ink)} .burger{margin-left:auto;font-size:20px;background:var(--panel2);color:var(--ink); border:3px solid var(--outline);box-shadow:3px 3px 0 var(--pink);padding:4px 11px;cursor:pointer} .menu{display:none;width:100%;flex-direction:column;gap:2px;padding:8px 0 4px} .menu.open{display:flex} .menu a{font-size:15px;font-weight:600;color:var(--ink-soft);padding:7px 9px;border:3px solid transparent} .menu a:hover,.menu a.on{color:var(--ink);background:#ffeef7;border-color:var(--outline)} @media(min-width:980px){ .burger{display:none} .menu{display:flex !important;flex-direction:row;width:auto;margin-left:auto;flex-wrap:wrap;padding:0} .menu a{font-size:14px;padding:5px 9px} } /* ---------- layout ---------- */ .hero,.section,.chead,.detail,.prose{width:min(var(--shell),100% - 28px);margin-inline:auto} .hero{padding:clamp(26px,5vw,52px) 0 6px;text-align:center} .hero h1{font-family:var(--press);font-size:clamp(17px,4.4vw,34px);line-height:1.55;color:var(--ink)} .hero .pk{color:var(--hot)} .hero p{margin-top:16px;color:var(--ink-soft);font-size:clamp(15px,2.2vw,18px)} .section{padding:clamp(14px,2.6vw,26px) 0} .section-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap} .section-head h2{font-family:var(--press);font-size:clamp(11px,2.4vw,15px);color:var(--ink)} .section-head .more{margin-left:auto;font-size:14px;font-weight:700;color:var(--pink-d)} /* ---------- category cards ---------- */ .cat-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .cat-card{--a:var(--pink);position:relative;background:var(--panel);border:3px solid var(--outline); box-shadow:5px 5px 0 var(--a);padding:16px 16px 14px;display:flex;flex-direction:column;gap:3px; transition:transform .12s,box-shadow .12s} .cat-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--a)} .cat-card .cemoji{font-size:24px;line-height:1} .cat-card b{font-family:var(--press);font-size:11px;margin-top:6px} .cat-card i{font-style:normal;font-size:13px;color:var(--ink-soft)} .cthumbs{display:flex;gap:5px;margin-top:11px} .cthumbs img{width:60px;height:80px;object-fit:cover;border:2px solid var(--outline)} /* ---------- search ---------- */ .searchbar{margin-bottom:16px} #q{width:100%;font-family:var(--pix);font-size:16px;font-weight:600;color:var(--ink); background:var(--panel2);border:3px solid var(--outline);box-shadow:4px 4px 0 var(--pink);padding:11px 13px} #q:focus{outline:none;box-shadow:4px 4px 0 var(--hot)} .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px} .chip{font-family:var(--pix);font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer; background:var(--panel);border:3px solid var(--outline);padding:5px 11px} .chip.on{background:var(--hot);color:#fff} /* ---------- wallpaper grid ---------- */ .grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} @media(min-width:720px){.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}} /* Device filter active -> every card takes the wallpaper's own shape (--ar) so the full image shows instead of a 3/4 centre-crop. Landscape and square sets also get wider columns, otherwise a 16:9 card ends up a thin letterbox. */ .grid.dev-desktop{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} @media(min-width:720px){.grid.dev-desktop{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}} .grid.dev-square{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))} @media(min-width:720px){.grid.dev-square{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}} .tile{background:var(--panel);border:3px solid var(--outline);box-shadow:4px 4px 0 var(--pink); display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s} .tile:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--hot)} .tile .ph{display:block;aspect-ratio:3/4;background:var(--c,#ffe8f4);overflow:hidden} .grid.dev-on .tile .ph{aspect-ratio:var(--ar,3/4)} .tile .ph img{width:100%;height:100%;object-fit:cover} .tile .meta{padding:8px 9px 9px;display:block} .tile .meta b{display:block;font-size:14px;font-weight:700;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tile .meta i{font-style:normal;font-size:11px;color:var(--ink-soft)} .empty{text-align:center;color:var(--ink-soft);padding:28px 0;font-size:16px} /* ---------- category head ---------- */ .chead{--a:var(--pink);padding:clamp(20px,4vw,40px) 0 4px} .crumb{font-size:13px;color:var(--ink-soft);margin-bottom:12px} .crumb a{color:var(--pink-d);font-weight:700} .crumb span{margin:0 5px} .chead h1{font-family:var(--press);font-size:clamp(14px,3.2vw,24px);line-height:1.5; display:flex;align-items:center;gap:11px;flex-wrap:wrap} .cemoji.big{font-size:28px} .csub{margin-top:13px;color:var(--ink-soft);font-size:16px;max-width:62ch} .ccount{margin-top:7px;font-family:var(--press);font-size:9px;color:var(--pink-d)} .pill-row{display:flex;gap:9px;flex-wrap:wrap} .pill{--a:var(--pink);background:var(--panel);border:3px solid var(--outline);box-shadow:3px 3px 0 var(--a); padding:7px 12px;font-size:14px;font-weight:700} .pill:hover{transform:translate(-1px,-1px)} /* ---------- detail ---------- */ .detail{padding:clamp(18px,3.4vw,34px) 0} .detail h1{font-family:var(--press);font-size:clamp(13px,2.9vw,20px);line-height:1.55;margin-bottom:4px} .stage{background:var(--c,#ffe8f4);border:3px solid var(--outline);box-shadow:7px 7px 0 var(--pink); padding:12px;display:flex;justify-content:center} .stage img{max-height:74vh;width:auto;object-fit:contain;border:2px solid rgba(58,20,48,.35)} .dl{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px} .btn{font-family:var(--pix);font-size:15px;font-weight:700;color:var(--ink);cursor:pointer; background:var(--panel);border:3px solid var(--outline);box-shadow:4px 4px 0 var(--pink);padding:10px 16px} .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hot)} .btn.primary{background:var(--hot);color:#fff;box-shadow:4px 4px 0 var(--outline)} .specs{list-style:none;display:grid;gap:9px;margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .specs li{background:var(--panel);border:3px solid var(--outline);padding:9px 11px} .specs b{display:block;font-family:var(--press);font-size:8px;color:var(--ink-soft);margin-bottom:5px} .specs span{font-size:15px;font-weight:600} .specs a{color:var(--pink-d);font-weight:700} .prevnext{display:grid;gap:11px;grid-template-columns:1fr;margin-top:8px} @media(min-width:640px){.prevnext{grid-template-columns:1fr 1fr}} .pn{background:var(--panel);border:3px solid var(--outline);box-shadow:4px 4px 0 var(--lilac);padding:11px 13px} .pn.right{text-align:right} .pn i{font-style:normal;display:block;font-size:12px;color:var(--ink-soft)} .pn b{font-size:15px} /* ---------- prose ---------- */ .prose{padding-block:clamp(14px,2.6vw,26px)} .prose h2{font-family:var(--press);font-size:clamp(11px,2.3vw,14px);margin:22px 0 11px} .prose h3{font-size:18px;font-weight:700;margin:18px 0 8px} .prose p{margin-bottom:13px;font-size:16px;color:#6b3055;max-width:74ch} .prose ul,.prose ol{margin:0 0 13px 20px;font-size:16px;color:#6b3055;max-width:74ch} .prose li{margin-bottom:7px} .prose a{color:var(--pink-d);font-weight:700;text-decoration:underline} /* ---------- footer ---------- */ .foot{margin-top:clamp(24px,4vw,46px);background:var(--panel);border-top:3px solid var(--outline); padding:24px clamp(12px,3vw,22px) 26px} .fwrap{width:min(var(--shell),100%);margin-inline:auto;display:flex;gap:18px; justify-content:space-between;flex-wrap:wrap} .fbrand{font-family:var(--press);font-size:12px} .fsub{font-size:14px;color:var(--ink-soft);margin-top:5px} .flinks{display:flex;gap:13px;flex-wrap:wrap;align-items:flex-start} .flinks a{font-size:14px;font-weight:600;color:var(--ink-soft)} .flinks a:hover{color:var(--pink-d)} .copy{width:min(var(--shell),100%);margin:16px auto 0;font-size:12px;color:var(--ink-soft)} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} html{scroll-behavior:auto} } /* KRITRIM_CAPFIT ------------------------------------------------------------ The "ADVERTISEMENT" caption reserves 18px of padding at the TOP of .ad-slot, but the row around it is sized to the creative exactly (60/90/250px) and clips its overflow. So the iframe started 18px down and the bottom 18px of every ad on this site was sheared off - the Opera player controls, the BC.GAME strapline, the "LEARN MORE" button. Drop the padding, hang the caption in the row margin above the ad, and stop the rows clipping. ------------------------------------ */ .adbanner .ad-slot, .ad-row .ad-slot { padding-top: 0 !important; } .adbanner .ad-slot::before, .ad-row .ad-slot::before { top: -17px !important; } .ad-row { overflow: visible !important; margin-top: calc(clamp(18px,3.2vw,30px) + 18px) !important; } .adbanner.top { height: auto !important; overflow: visible !important; padding: 22px 0 6px !important; } /* KRITRIM_ADLABEL_ONFILL: the caption stays - a reader is entitled to know which part of the page was paid for, and an unlabelled block that mimics site content is what networks treat as deceptive placement. What changed is WHEN it is drawn. It used to hang off :not(:empty), and a slot holding an UNFILLED iframe is still non-empty, so the label printed over blank space. It now hangs off .kr-filled, which ads.js sets only after a real cross-origin creative has arrived. */ .ad-frame:not(:empty)::before,.card-ad:not(:empty)::before, .ad-slot:not(:empty)::before,.kr-auto-ad:not(:empty)::before{content:none!important} .ad-frame:not(:empty),.card-ad:not(:empty), .ad-slot:not(:empty),.kr-auto-ad:not(:empty){padding-top:0!important} /* The caption used to reserve 18px of padding-top on every filled slot, which pushed the surrounding layout down and left a pale band above each advert. The label is now a small corner chip drawn OVER the creative: it still discloses the advert, but occupies no layout space at all, so nothing around it shifts. padding-top is forced back to 0. */ .ad-frame.kr-filled.kr-filled,.card-ad.kr-filled.kr-filled, .ad-slot.kr-filled.kr-filled,.kr-auto-ad.kr-filled.kr-filled{ position:relative!important;padding-top:0!important} .ad-frame.kr-filled.kr-filled::before,.card-ad.kr-filled.kr-filled::before, .ad-slot.kr-filled.kr-filled::before,.kr-auto-ad.kr-filled.kr-filled::before{ content:"Ad"!important;display:block!important; position:absolute;top:0;left:0; padding:1px 5px;border-radius:0 0 4px 0;white-space:nowrap; font:700 10px/13px system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.08em; color:#fff;background:rgba(0,0,0,.55);pointer-events:none;z-index:3} /* The sticky strips are built by each page's own shell() at the exact creative size, so a centred chip would sit on top of the ad. Corner chip instead. */ [data-kr-ad].kr-filled::before{ content:"Ad";position:absolute;top:0;left:0;z-index:2; padding:1px 5px;border-radius:0 0 4px 0;white-space:nowrap; font:700 10px/13px system-ui,-apple-system,sans-serif;letter-spacing:.08em; color:#fff;background:rgba(0,0,0,.55);pointer-events:none} /* KRITRIM_TAPLOCK: the site already blocks pinch-zoom (user-scalable=no + a gesturestart handler for iOS, which ignores the meta tag). Neither stops DOUBLE-TAP zoom on iOS - only touch-action does. "manipulation" kills the double-tap while leaving pan and scroll completely intact; "none" would break scrolling, so do not use it here. */ html,body{touch-action:manipulation} /* KRITRIM_TAPTARGET: measured across hub, category, wallpaper, privacy and terms - the header nav sat at 38px, the filter chips 32px, breadcrumbs 16px and the footer links 20px, all under the 44px minimum. Uses min-height, never padding: every page carries an inline `body>footer *{padding:0!important}` rule that silently eats footer padding. */ header nav a, .nav a, .cats a, .chip, .filter, .tab, .crumbs a, .breadcrumb a, footer a, .brand { min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }