/* Kasiinokompass Casino Finder - front end. Every rule is scoped to #kk-leidja. Verified empirically by assets/_leak-test.html: no declaration in this file reaches any element outside that container. */ /* ---------- Elav: chosen 14.08.2026. Rahulik and Öö token sets are recorded in the project doc ---------- */:root, #kk-leidja{ --r-panel:26px; --r-tile:20px; --r-chip:999px; --logo:112px; --paper:#FCF1DE; --tile:#ffffff; --body:#FFFCF5; --hair:rgba(94,62,16,.13); --hair2:rgba(94,62,16,.22); --ink:#181F29; --ink2:#57606E; --ink3:#6E6959; --brass-soft:rgba(214,146,20,.20); --brass-ink:#96650A; --brass:#D69214; --teal-soft:rgba(11,138,118,.15); --teal-ink:#0B7A68; --clay-soft:rgba(199,58,24,.13); --clay-ink:#AE3616; --sh-panel:0 1px 3px rgba(94,62,16,.04),0 18px 44px -26px rgba(94,62,16,.20); --sh-tile:0 1px 2px rgba(94,62,16,.07),0 12px 26px -14px rgba(94,62,16,.34); --sh-pop:0 2px 8px rgba(94,62,16,.08),0 32px 64px -28px rgba(94,62,16,.36); --sh-lift:0 3px 8px rgba(94,62,16,.09),0 28px 54px -20px rgba(94,62,16,.48); --play:linear-gradient(180deg,#E0A522,#C0730C); --play-fg:#fff; --shell:rgba(255,252,245,.88); --medal-ink:#96650A; --ovbg:#F1E6D2; --al:44%; --as:72%; --atint:14%; --aink:30%; --bandmix:13%; --glow:none; } /* --- Defensive reset ------------------------------------------------------- Class names like .card, .chip, .grid and .tag are common in WordPress themes. Everything below is scoped to #kk-leidja, which stops the finder leaking out; this block stops the theme leaking in. Runs before our own rules, so ours still win. ------------------------------------------------------------------------- */#kk-leidja, #kk-leidja *, #kk-leidja *::before, #kk-leidja *::after{ box-sizing:border-box; margin:0; padding:0; border:0; outline:0; background:none; font:inherit; font-size:inherit; font-weight:inherit; font-style:normal; line-height:inherit; letter-spacing:normal; color:inherit; text-align:left; text-transform:none; text-decoration:none; text-shadow:none; box-shadow:none; border-radius:0; list-style:none; float:none; position:static; transform:none; min-width:0; max-width:none; min-height:0; height:auto; width:auto; } #kk-leidja table{border-collapse:separate; border-spacing:0} #kk-leidja img{display:block; max-width:100%} #kk-leidja button, #kk-leidja input, #kk-leidja select{-webkit-appearance:none; appearance:none} #kk-leidja a{color:inherit} /* ---------- Elav: chosen 14.08.2026. Rahulik and Öö token sets are recorded in the project doc ---------- */ :root, #kk-leidja{ --r-panel:26px; --r-tile:20px; --r-chip:999px; --logo:112px; --paper:#FCF1DE; --tile:#ffffff; --body:#FFFCF5; --hair:rgba(94,62,16,.13); --hair2:rgba(94,62,16,.22); --ink:#181F29; --ink2:#57606E; --ink3:#6E6959; --brass-soft:rgba(214,146,20,.20); --brass-ink:#96650A; --brass:#D69214; --teal-soft:rgba(11,138,118,.15); --teal-ink:#0B7A68; --clay-soft:rgba(199,58,24,.13); --clay-ink:#AE3616; --sh-panel:0 1px 3px rgba(94,62,16,.04),0 18px 44px -26px rgba(94,62,16,.20); --sh-tile:0 1px 2px rgba(94,62,16,.07),0 12px 26px -14px rgba(94,62,16,.34); --sh-pop:0 2px 8px rgba(94,62,16,.08),0 32px 64px -28px rgba(94,62,16,.36); --sh-lift:0 3px 8px rgba(94,62,16,.09),0 28px 54px -20px rgba(94,62,16,.48); --play:linear-gradient(180deg,#E0A522,#C0730C); --play-fg:#fff; --shell:rgba(255,252,245,.88); --medal-ink:#96650A; --ovbg:#F1E6D2; --al:44%; --as:72%; --atint:14%; --aink:30%; --bandmix:13%; --glow:none; } #kk-leidja, #kk-leidja *{box-sizing:border-box} #kk-leidja{-webkit-text-size-adjust:100%} #kk-leidja{margin:0;background:var(--body);color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} #kk-leidja h1, #kk-leidja h2, #kk-leidja h3, #kk-leidja h4{margin:0;font-weight:650;letter-spacing:-.011em;line-height:1.25} #kk-leidja a{color:inherit} #kk-leidja button, #kk-leidja input, #kk-leidja select{font:inherit;color:inherit} #kk-leidja button{cursor:pointer;border:0;background:none} #kk-leidja .wrap{max-width:1280px;margin:0 auto;padding:0 20px}/* ---------- page head ---------- */ #kk-leidja .phead{padding:38px 0 22px} #kk-leidja .phead .eyebrow{font-size:12.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--brass-ink);font-weight:650} #kk-leidja .phead h1{font-size:clamp(28px,4vw,40px);margin:10px 0 12px} #kk-leidja .phead .lede{max-width:66ch;color:var(--ink2);font-size:16.5px;margin:0 0 16px} #kk-leidja .stamp{display:inline-flex;align-items:center;gap:0;background:var(--paper);border-radius:var(--r-chip); padding:6px 14px;font-size:12.5px;color:var(--ink2)} #kk-leidja .stamp b{font-weight:600;color:var(--ink)}/* ---------- toolbar ---------- */ #kk-leidja .toolbar{position:sticky;top:0;z-index:40;background:var(--shell);backdrop-filter:blur(10px); padding:12px 0;margin-bottom:18px;box-shadow:0 1px 0 var(--hair)} #kk-leidja .toolbar .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} #kk-leidja .srch{position:relative;flex:1 1 260px;min-width:0} #kk-leidja .srch input{width:100%;background:var(--tile);border-radius:var(--r-chip);padding:11px 16px 11px 40px; border:0;box-shadow:var(--sh-tile);outline:none} #kk-leidja .srch input:focus{box-shadow:var(--sh-tile),0 0 0 2.5px var(--brass-soft)} #kk-leidja .srch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);opacity:.45} #kk-leidja .sel{background:var(--tile);border-radius:var(--r-chip);padding:11px 14px;box-shadow:var(--sh-tile); border:0;outline:none;max-width:100%} #kk-leidja .sel:focus{box-shadow:var(--sh-tile),0 0 0 2.5px var(--brass-soft)} #kk-leidja .fbtn{display:none;align-items:center;gap:8px;background:var(--brass-soft);color:var(--brass-ink); border-radius:var(--r-chip);padding:11px 18px;font-weight:600} #kk-leidja .fbtn .n{background:var(--brass-ink);color:#fff;border-radius:999px;min-width:20px;height:20px; display:inline-grid;place-items:center;font-size:12px;padding:0 6px} #kk-leidja .fbtn .n[hidden]{display:none}/* ---------- layout ---------- */ #kk-leidja .cols{display:grid;grid-template-columns:296px minmax(0,1fr);gap:26px;align-items:start;padding-bottom:120px}/* ---------- filter rail ---------- */ #kk-leidja .rail{background:var(--paper);border-radius:var(--r-panel);padding:8px;box-shadow:var(--sh-panel); position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain} #kk-leidja .rail::-webkit-scrollbar{width:8px}#kk-leidja .rail::-webkit-scrollbar-thumb{background:var(--hair2);border-radius:8px} #kk-leidja .railhead{display:flex;align-items:baseline;justify-content:space-between;padding:12px 14px 10px} #kk-leidja .railhead h2{font-size:14px;letter-spacing:.02em} #kk-leidja .rst{font-size:12.5px;color:var(--brass-ink);font-weight:600;padding:4px 8px;border-radius:8px} #kk-leidja .rst:hover{background:var(--brass-soft)} #kk-leidja .rst[disabled]{color:var(--ink3);font-weight:500;cursor:default} #kk-leidja .rst[disabled]:hover{background:none} #kk-leidja .grp{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--sh-tile);margin:0 0 8px;overflow:hidden} #kk-leidja .grp>summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center; justify-content:space-between;gap:8px;font-weight:600;font-size:13.5px} #kk-leidja .grp>summary::-webkit-details-marker{display:none} #kk-leidja .grp>summary .car{transition:transform .18s ease;opacity:.45;flex:0 0 auto} #kk-leidja .grp[open]>summary .car{transform:rotate(180deg)} #kk-leidja .grp>summary .on{background:var(--teal-soft);color:var(--teal-ink);border-radius:999px; font-size:11.5px;font-weight:650;padding:1px 8px;margin-left:auto} #kk-leidja .gbody{padding:2px 15px 15px} #kk-leidja .cov{font-size:11.5px;color:var(--ink3);line-height:1.4;margin:0 0 10px} #kk-leidja .sub{font-size:12px;font-weight:650;color:var(--ink2);letter-spacing:.02em;margin:14px 0 8px} #kk-leidja .sub:first-child{margin-top:2px}/* chips */ #kk-leidja .chips{display:flex;flex-wrap:wrap;gap:6px} #kk-leidja .chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border-radius:var(--r-chip); padding:5px 11px;font-size:12.5px;color:var(--ink2);transition:background .12s,color .12s} #kk-leidja .chip:hover{background:var(--brass-soft)} #kk-leidja .chip .c{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums} #kk-leidja .chip.on{background:var(--teal-soft);color:var(--teal-ink);font-weight:600} #kk-leidja .chip.on .c{color:var(--teal-ink);opacity:.7} #kk-leidja .chip[disabled]{opacity:.36;cursor:default} #kk-leidja .chip[disabled]:hover{background:var(--paper)}/* sliders */ #kk-leidja .sl{margin:0 0 4px} #kk-leidja .sl .lab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;margin-bottom:6px} #kk-leidja .sl .lab span:first-child{color:var(--ink2)} #kk-leidja .sl .lab b{font-weight:650;font-variant-numeric:tabular-nums} #kk-leidja .sl .lab b.off{font-weight:500;color:var(--ink3)} #kk-leidja input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;margin:0} #kk-leidja input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:var(--hair2)} #kk-leidja input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%; background:#fff;box-shadow:0 1px 4px rgba(60,45,25,.35),0 0 0 1.5px var(--brass);margin-top:-6.5px} #kk-leidja input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--hair2)} #kk-leidja input[type=range]::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;background:#fff; box-shadow:0 1px 4px rgba(60,45,25,.35),0 0 0 1.5px var(--brass)} #kk-leidja input[type=range]:focus{outline:none} #kk-leidja input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 1px 4px rgba(60,45,25,.35),0 0 0 1.5px var(--brass),0 0 0 5px var(--brass-soft)}/* switch */ #kk-leidja .sw{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;font-size:13px} #kk-leidja .sw input{position:absolute;opacity:0;pointer-events:none} #kk-leidja .sw .tr{flex:0 0 auto;width:36px;height:21px;border-radius:999px;background:var(--hair2);position:relative;transition:background .16s} #kk-leidja .sw .tr::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(60,45,25,.3);transition:transform .16s} #kk-leidja .sw input:checked+.tr{background:var(--teal-ink)} #kk-leidja .sw input:checked+.tr::after{transform:translateX(15px)} #kk-leidja .sw input:focus-visible+.tr{box-shadow:0 0 0 4px var(--brass-soft)} #kk-leidja .sw .tx{color:var(--ink2)} #kk-leidja .sw input:checked~.tx{color:var(--ink);font-weight:550}/* ---------- results ---------- */ #kk-leidja .rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 14px} #kk-leidja .rcount{font-size:13.5px;color:var(--ink2)} #kk-leidja .rcount b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums} #kk-leidja .active{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px} #kk-leidja .active:empty{display:none} #kk-leidja .ac{display:inline-flex;align-items:center;gap:7px;background:var(--teal-soft);color:var(--teal-ink); border-radius:var(--r-chip);padding:5px 8px 5px 12px;font-size:12.5px;font-weight:600} #kk-leidja .ac button{width:17px;height:17px;border-radius:50%;display:grid;place-items:center; background:rgba(31,107,107,.14);color:var(--teal-ink);font-size:13px;line-height:1} #kk-leidja .ac button:hover{background:rgba(31,107,107,.28)} #kk-leidja .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} #kk-leidja .card{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--sh-tile),var(--glow); display:flex;flex-direction:column;overflow:hidden;position:relative; --ac:hsl(var(--ah) var(--as) var(--al)); --ac-tint:hsl(var(--ah) var(--as) var(--al) / var(--atint)); --ac-ink:hsl(var(--ah) calc(var(--as) - 8%) var(--aink)); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease} #kk-leidja .card:hover{transform:translateY(-3px);box-shadow:var(--sh-lift),var(--glow)} #kk-leidja .card.cmp{box-shadow:var(--sh-tile),0 0 0 2px var(--teal-ink)} #kk-leidja .card::before{content:"";position:absolute;inset:0 0 auto;height:3px; background:linear-gradient(90deg,var(--ac),transparent 78%);opacity:.85}/* header band */ #kk-leidja .ctop{display:flex;gap:15px;align-items:center;padding:18px 18px 16px; background:linear-gradient(155deg,color-mix(in srgb,var(--ac) var(--bandmix),var(--tile)),var(--tile) 82%)} #kk-leidja .logo{flex:0 0 auto;width:var(--logo);height:var(--logo);border-radius:calc(var(--logo) * .24); background:var(--tile);display:grid;place-items:center;overflow:hidden;position:relative; font-weight:750;font-size:calc(var(--logo) * .3);color:var(--ac-ink);letter-spacing:-.04em; box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 20px -12px rgba(0,0,0,.35),inset 0 0 0 1px var(--hair); transition:width .2s ease,height .2s ease} #kk-leidja .logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; padding:0;background:var(--tile)} #kk-leidja .ctop .nm{min-width:0;flex:1} #kk-leidja .ctop h3{font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em} #kk-leidja .ctop .yr{font-size:12px;color:var(--ink3);font-weight:500;margin-top:3px} #kk-leidja .ctop .op{font-size:11.5px;color:var(--ink3);margin-top:5px} #kk-leidja .ctop .op b{font-weight:600;color:var(--ink2)}/* rating medal */ #kk-leidja .rate{flex:0 0 auto;align-self:flex-start;width:56px;height:56px;border-radius:50%; display:grid;place-items:center;line-height:1;text-align:center; background:var(--tile);box-shadow:inset 0 0 0 2px var(--hair2),0 4px 12px -6px rgba(0,0,0,.3)} #kk-leidja .rate .n{font-size:16px;font-weight:750;color:var(--ink)} #kk-leidja .rate .d{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:1px} #kk-leidja .rate.t1{background:radial-gradient(circle at 32% 28%,#FFF0C4,var(--brass-soft)); box-shadow:inset 0 0 0 2px var(--brass),0 5px 16px -6px rgba(192,139,46,.6)} #kk-leidja .rate.t1 .n{color:var(--medal-ink)} #kk-leidja .rate.t1 .d{color:var(--medal-ink);opacity:.62} #kk-leidja .rate.t2{box-shadow:inset 0 0 0 2px var(--hair2),0 4px 12px -6px rgba(0,0,0,.28)} #kk-leidja .rate.t3{box-shadow:inset 0 0 0 2px var(--clay-soft),0 4px 12px -6px rgba(0,0,0,.22)} #kk-leidja .rate.na .n{font-size:18px;color:var(--ink3);font-weight:500} #kk-leidja .cbody{padding:0 18px 16px;display:flex;flex-direction:column;gap:13px;flex:1}/* bonus headline: parsed figures big, sheet prose small */ #kk-leidja .bonus{background:var(--ac-tint);border-radius:15px;padding:13px 15px} #kk-leidja .bonus .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ac-ink); font-weight:700;margin-bottom:5px} #kk-leidja .bonus .hd{font-size:20px;font-weight:750;letter-spacing:-.025em;line-height:1.2;color:var(--ink)} #kk-leidja .bonus .hd .pl{color:var(--ac-ink);font-weight:700} #kk-leidja .bonus .hd.na{font-size:16px;font-weight:600;color:var(--ink3)} #kk-leidja .bonus .shaky{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:650;letter-spacing:.02em; background:var(--clay-soft);color:var(--clay-ink);border-radius:var(--r-chip);padding:3px 10px} #kk-leidja .bonus .raw{font-size:11.5px;color:var(--ink3);margin-top:5px;line-height:1.42; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #kk-leidja .mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair); border-radius:14px;overflow:hidden} #kk-leidja .met{background:var(--tile);padding:10px 11px} #kk-leidja .met .k{font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);font-weight:650; white-space:normal;line-height:1.25;min-height:2.5em;display:flex;align-items:flex-start} #kk-leidja .met .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;letter-spacing:-.02em} #kk-leidja .met .v.na{color:var(--ink3);font-weight:500} #kk-leidja .met .v.good{color:var(--teal-ink)} #kk-leidja .met .v.warn{color:var(--clay-ink)} #kk-leidja .met .s{font-size:10.5px;color:var(--ink3);margin-top:1px} #kk-leidja .pts{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2)} #kk-leidja .pt{display:flex;gap:9px;align-items:flex-start} #kk-leidja .pt .s{flex:0 0 auto;width:16px;height:16px;border-radius:50%;display:grid;place-items:center; font-size:11px;font-weight:750;margin-top:2px} #kk-leidja .pt.p .s{background:var(--teal-soft);color:var(--teal-ink)} #kk-leidja .pt.n .s{background:var(--clay-soft);color:var(--clay-ink)} #kk-leidja .pt span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #kk-leidja .tags{display:flex;flex-wrap:wrap;gap:5px} #kk-leidja .tag{background:var(--paper);border-radius:var(--r-chip);padding:4px 10px;font-size:11.5px;color:var(--ink2)} #kk-leidja .tag.fl{background:var(--clay-soft);color:var(--clay-ink)} #kk-leidja .cfoot{display:flex;gap:9px;align-items:center;margin-top:auto;padding-top:4px} #kk-leidja .play{flex:1;background:var(--play);color:var(--play-fg);border-radius:var(--r-chip);padding:12px 16px; font-weight:700;font-size:14px;text-align:center;text-decoration:none;letter-spacing:.01em; box-shadow:0 2px 5px rgba(0,0,0,.16),0 10px 22px -12px rgba(0,0,0,.45); transition:transform .14s ease,box-shadow .14s ease} #kk-leidja .play:hover{transform:translateY(-1px);box-shadow:0 3px 7px rgba(0,0,0,.2),0 14px 28px -12px rgba(0,0,0,.55)} #kk-leidja .play:active{transform:translateY(0)} #kk-leidja .ghost{background:var(--paper);color:var(--ink2);border-radius:var(--r-chip);padding:12px 15px; font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap} #kk-leidja .ghost:hover{background:var(--brass-soft);color:var(--brass-ink)} #kk-leidja .ghost.off{opacity:.42;pointer-events:none} #kk-leidja .cmpb{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--paper);display:grid; place-items:center;color:var(--ink3);transition:background .14s,color .14s} #kk-leidja .cmpb:hover{background:var(--teal-soft);color:var(--teal-ink)} #kk-leidja .cmpb.on{background:var(--teal-ink);color:var(--tile)} #kk-leidja .empty{background:var(--paper);border-radius:var(--r-panel);padding:44px 28px;text-align:center;box-shadow:var(--sh-panel)} #kk-leidja .empty h3{font-size:19px;margin-bottom:8px} #kk-leidja .empty p{color:var(--ink2);max-width:46ch;margin:0 auto 18px} #kk-leidja .empty button{background:var(--brass-ink);color:#fff;border-radius:var(--r-chip);padding:10px 20px;font-weight:650}/* payload never arrived: a stated failure, not an empty result set */ #kk-leidja .kkerr{background:var(--clay-soft);border-radius:var(--r-panel);padding:32px 28px;text-align:center; display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-panel)} #kk-leidja .kkerr b{font-size:17px;font-weight:650;color:var(--clay-ink)} #kk-leidja .kkerr span{color:var(--ink2);max-width:52ch;margin:0 auto} #kk-leidja .more{display:block;width:100%;margin:16px 0 0;background:var(--paper);border-radius:var(--r-chip); padding:13px;font-weight:650;color:var(--ink2);box-shadow:var(--sh-tile)} #kk-leidja .more:hover{color:var(--brass-ink)}/* ---------- comparison on a phone (under 700px) ------------------------------- The column table needs 2,3 screen widths at 338px and shows one casino at a time, so below 700px the same rows are drawn criterion first. Class names are prefixed m so nothing here can collide with the table above. -------------------------------------------------------------------------- */ #kk-leidja .mjump{display:flex;gap:5px;padding:2px 0 8px;overflow-x:auto;scrollbar-width:none} #kk-leidja .mjump::-webkit-scrollbar{display:none} #kk-leidja .mjump a{flex:0 0 auto;background:var(--tile);border-radius:var(--r-chip);padding:5px 11px;font-size:11.5px; font-weight:650;color:var(--ink2);text-decoration:none;box-shadow:var(--sh-tile);white-space:nowrap}/* the strip names the columns and stays put: --ohh is the measured height of the panel header above it, so the two never overlap whatever the header holds */ #kk-leidja .mcolhd{position:sticky;top:var(--ohh,44px);z-index:5;display:grid;gap:6px;background:var(--ovbg); padding:7px 0 8px;box-shadow:0 10px 14px -10px rgba(94,62,16,.45),0 1px 0 rgba(94,62,16,.14)} #kk-leidja .mcolhd .c{display:flex;align-items:center;gap:5px;background:var(--tile);border-radius:10px; box-shadow:0 1px 2px rgba(94,62,16,.09);padding:5px 6px;min-width:0} #kk-leidja .mcolhd .c .mlg{width:20px;height:20px;border-radius:6px;font-size:8px} #kk-leidja .mcolhd .c .n{font-size:11px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #kk-leidja .mband{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:16px 2px 8px;scroll-margin-top:132px} #kk-leidja .mband .st{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--brass-ink)} #kk-leidja .mband .sh{font-size:11px;color:var(--ink3)} #kk-leidja .mlg{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--tile);display:grid;place-items:center; font-size:9.5px;font-weight:800;color:var(--brass-ink);box-shadow:0 1px 2px rgba(94,62,16,.14);overflow:hidden} #kk-leidja .mlg img{width:100%;height:100%;object-fit:contain;padding:0;display:block} #kk-leidja .mcrit{background:var(--tile);border-radius:var(--r-tile);box-shadow:var(--sh-tile);padding:10px 12px; margin:0 0 7px;scroll-margin-top:132px} #kk-leidja .mcrit .mk{font-size:13px;font-weight:650;margin:0 0 6px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} #kk-leidja .mcrit .mk .mx{font-size:10.5px;font-weight:600;color:var(--clay-ink)}/* numbers and codes: all of them on one line, which is the point of comparing */ #kk-leidja .mtri{display:grid;gap:6px} #kk-leidja .mtri .cel{min-width:0;display:flex;flex-direction:column;gap:3px} #kk-leidja .mtri .cel .v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;min-width:0; overflow-wrap:break-word;line-height:1.25} #kk-leidja .mtri .cel .v.sm{font-size:12px;font-weight:600} #kk-leidja .mtri .cel .s{font-size:10px;color:var(--ink3);line-height:1.3} #kk-leidja .mtri .cel .win{align-self:flex-start}/* a short list needs the width: one casino per line, wrapping at spaces */ #kk-leidja .mrow{display:grid;grid-template-columns:22px 1fr minmax(0,52%);gap:8px;align-items:baseline;padding:5px 0} #kk-leidja .mrow+.mrow{border-top:1px solid rgba(94,62,16,.09)} #kk-leidja .mrow .mlg{width:22px;height:22px;border-radius:6px;font-size:8.5px;align-self:center} #kk-leidja .mrow .n{font-size:12px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #kk-leidja .mrow .v{font-size:12.5px;font-weight:600;line-height:1.4;overflow-wrap:normal;word-break:normal;hyphens:none}/* a sentence gets its own paragraph, clamped until asked */ #kk-leidja .mpr{padding:6px 0} #kk-leidja .mpr+.mpr{border-top:1px solid rgba(94,62,16,.09)} #kk-leidja .mpr .hd{display:flex;align-items:center;gap:8px;margin:0 0 3px} #kk-leidja .mpr .hd .n{font-size:12px;font-weight:650} #kk-leidja .mpr .tx{font-size:12.5px;color:var(--ink2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} #kk-leidja .mpr.open .tx{-webkit-line-clamp:unset;overflow:visible} #kk-leidja .mpr .mo{font-size:11px;font-weight:650;color:var(--brass-ink);margin-top:2px} #kk-leidja .mrow .v .s{font-weight:500;color:var(--ink3);font-size:10.5px} #kk-leidja .mcta{display:grid;gap:7px;margin:16px 0 0}/* compare tray + overlay */ #kk-leidja .tray{position:fixed;left:0;right:0;bottom:0;z-index:1060;transform:translateY(120%);transition:transform .24s cubic-bezier(.2,.8,.2,1)} #kk-leidja .tray.up{transform:none} #kk-leidja .tray .in{max-width:1280px;margin:0 auto;background:var(--tile);border-radius:22px 22px 0 0;box-shadow:var(--sh-pop); padding:13px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} #kk-leidja .tray .slots{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0} #kk-leidja .tslot{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border-radius:var(--r-chip); padding:6px 8px 6px 13px;font-size:13px;font-weight:600} #kk-leidja .tslot button{width:18px;height:18px;border-radius:50%;background:var(--hair2);display:grid;place-items:center;font-size:13px;line-height:1} #kk-leidja .tray .go{background:var(--teal-ink);color:#fff;border-radius:var(--r-chip);padding:10px 20px;font-weight:650;font-size:13.5px} #kk-leidja .tray .clr{font-size:12.5px;color:var(--ink3);font-weight:600} #kk-leidja .tmsg{font-size:12.5px;color:var(--clay-ink);background:var(--clay-soft);border-radius:var(--r-chip);padding:5px 12px} #kk-leidja .ov{position:fixed;inset:0;z-index:1080;background:rgba(29,37,48,.42);backdrop-filter:blur(3px); display:none;padding:24px;overflow:auto} #kk-leidja .ov.up{display:block} #kk-leidja .ovin{max-width:1180px;margin:0 auto;background:var(--ovbg);border-radius:var(--r-panel);box-shadow:var(--sh-pop);padding:22px} #kk-leidja .ovin .oh{display:flex;align-items:center;gap:12px;flex-wrap:wrap; /* The panel is taller than a phone screen, so the overlay scrolls. A header that scrolls away takes the close button with it, and a phone has no Escape key and only a 10px strip of backdrop to tap. It stays pinned. The 16px gap is padding, not margin, so the background covers it and table rows do not slide through underneath. */ position:sticky;top:0;z-index:6;background:var(--ovbg);margin:0;padding:0 0 16px} #kk-leidja .ovin h2{font-size:20px} #kk-leidja .ovsub{margin:4px 0 0;font-size:12px;color:var(--ink3)} #kk-leidja .xb{width:34px;height:34px;border-radius:50%;background:var(--tile);display:grid;place-items:center;font-size:19px;box-shadow:var(--sh-tile)}/* No horizontal padding: padding sits inside the scrollport, so the sticky label column pins to the content edge and anything scrolling past shows through the 2px strip to its left. The 14px border-spacing already gives the column cards their breathing room. */ #kk-leidja .ctabwrap{overflow:auto;max-height:calc(100vh - 210px);padding:0;-webkit-overflow-scrolling:touch}/* the 14px gutter is the only separator: each casino reads as its own column card */ #kk-leidja .ctab{width:100%;border-collapse:separate;border-spacing:14px 0;table-layout:fixed} #kk-leidja .ctab th, #kk-leidja .ctab td{padding:12px 15px;text-align:left;font-size:13px;vertical-align:top} #kk-leidja .ctab td{font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere;background:var(--tile)} #kk-leidja .ctab th{overflow-wrap:break-word} #kk-leidja .ctab td.na{color:var(--ink3)} #kk-leidja .ctab .best{color:var(--teal-ink);font-weight:650}/* column head: card top, accent rule, logo, name, medal */ #kk-leidja .ctab thead th{position:sticky;top:0;z-index:2;background:var(--tile); border-radius:20px 20px 0 0;padding:18px 18px 16px;vertical-align:bottom} #kk-leidja .ctab thead th.cx{--ac:hsl(var(--ah) var(--as) var(--al)); --ac-ink:hsl(var(--ah) calc(var(--as) - 8%) var(--aink)); box-shadow:inset 0 4px 0 var(--ac)} #kk-leidja .ch{display:flex;flex-direction:column;align-items:flex-start;gap:10px} #kk-leidja .clogo{width:84px;height:84px;border-radius:22px;position:relative;overflow:hidden; background:linear-gradient(155deg,color-mix(in srgb,var(--ac) 18%,var(--tile)),var(--tile) 84%); display:grid;place-items:center;font-weight:750;font-size:27px;letter-spacing:-.04em;color:var(--ac-ink); box-shadow:0 1px 2px rgba(94,62,16,.08),0 10px 22px -12px rgba(94,62,16,.45),inset 0 0 0 1px var(--hair)} #kk-leidja .clogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0;background:var(--tile)} #kk-leidja .ch .cn{font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.2} #kk-leidja .ch .cm{display:inline-flex;align-items:baseline;gap:3px;background:var(--tile);border-radius:var(--r-chip); padding:3px 10px;font-size:12px;font-weight:700;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--hair2)} #kk-leidja .ch .cm.t1{background:radial-gradient(circle at 30% 26%,#FFF0C4,var(--brass-soft));color:var(--medal-ink); box-shadow:inset 0 0 0 1.5px var(--brass)} #kk-leidja .ch .cm.na{color:var(--ink3);font-weight:500} #kk-leidja .ch .cm i{font-style:normal;font-size:9.5px;opacity:.65}/* the pinned label rail sits on the panel, opaque, and paints its own gutter */ #kk-leidja .ctab thead th:first-child, #kk-leidja .ctab tbody th, #kk-leidja .ctab tfoot th{position:sticky;left:0;z-index:1; background:var(--ovbg);box-shadow:14px 0 0 var(--ovbg)} #kk-leidja .ctab thead th:first-child{z-index:3;border-radius:0} #kk-leidja .ctab tbody th{color:var(--ink2);font-weight:650;font-size:12.5px;padding-left:2px} #kk-leidja .thn{display:block;margin-top:4px;font-weight:500;font-size:10.5px;color:var(--clay-ink);line-height:1.3}/* section bands ride the panel, not the cards */ #kk-leidja .ctab tbody tr.sec th{padding:24px 2px 8px} #kk-leidja .ctab tbody tr.sec td{background:none;padding:24px 2px 8px} #kk-leidja .ctab tbody tr.sec .st{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:750;color:var(--brass-ink)} #kk-leidja .ctab tbody tr.sec .sh{font-size:11px;color:var(--ink3);font-weight:500;letter-spacing:0;text-transform:none} #kk-leidja .ctab tbody tr.dat+tr.dat td{border-top:1px solid rgba(94,62,16,.10)} #kk-leidja .ctab tbody tr.dat:hover td{background:#FFFDF7}/* value + magnitude meter. one hue, single series: length is the only encoding */ #kk-leidja .cv{display:flex;flex-direction:column;gap:6px} #kk-leidja .cvt{display:flex;align-items:center;gap:7px;flex-wrap:wrap} #kk-leidja .cvn{font-weight:400;color:var(--ink)} #kk-leidja .cvn.num{font-weight:700;font-size:14px} #kk-leidja .cvs{font-size:11px;color:var(--ink3);font-weight:500} #kk-leidja .trk{height:6px;border-radius:3px;background:rgba(214,146,20,.18);max-width:190px;overflow:hidden} #kk-leidja .fil{height:100%;background:var(--brass);border-radius:0 3px 3px 0}/* status marker: never colour alone, always the tick plus the word */ #kk-leidja .win{display:inline-flex;align-items:center;gap:4px;background:var(--teal-soft);color:var(--teal-ink); border-radius:var(--r-chip);padding:2px 8px 2px 6px;font-size:10.5px;font-weight:700;letter-spacing:.01em} #kk-leidja .win svg{flex:0 0 auto}/* card foot */ #kk-leidja .ctab tfoot td{background:var(--tile);border-radius:0 0 20px 20px; border-top:1px solid rgba(94,62,16,.10);padding:14px 15px} #kk-leidja .cplay{display:block;text-align:center;background:var(--play);color:var(--play-fg);border-radius:var(--r-chip); padding:11px 14px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap; box-shadow:0 2px 5px rgba(94,62,16,.18),0 8px 18px -10px rgba(94,62,16,.5)} #kk-leidja .cplay:hover{filter:brightness(1.05)} #kk-leidja .cplay+.cghost{display:block;text-align:center;margin-top:7px;font-size:11.5px;font-weight:600; color:var(--ink3);text-decoration:none} #kk-leidja .cplay+.cghost:hover{color:var(--brass-ink)} #kk-leidja .hidn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 4px 0;font-size:11.5px;color:var(--ink3)} #kk-leidja .hidn button{background:var(--tile);border-radius:var(--r-chip);padding:5px 12px; font-size:11.5px;font-weight:650;color:var(--brass-ink)} #kk-leidja .hidn button:hover{background:var(--brass-soft)} #kk-leidja .note{background:var(--paper);border-radius:var(--r-panel);padding:22px 24px;box-shadow:var(--sh-panel);margin:26px 0 40px} #kk-leidja .note h2{font-size:16px;margin-bottom:10px} #kk-leidja .note p{color:var(--ink2);font-size:13.5px;margin:0 0 9px;max-width:88ch} #kk-leidja .note p:last-child{margin-bottom:0} #kk-leidja .note code{background:var(--tile);border-radius:6px;padding:1px 6px;font-size:12.5px}/* The theme's sticky site header is z-index 100 and its back-to-top button 90. Anything of ours that covers the page has to clear both, or a modal renders underneath the site header, which is what happened on mobile. */ #kk-leidja .scrim{position:fixed;inset:0;background:rgba(29,37,48,.3);z-index:1040;display:none} #kk-leidja .scrim.up{display:block} @media(max-width:1080px){#kk-leidja .grid{grid-template-columns:minmax(0,1fr)}} @media(max-width:900px){ #kk-leidja .cols{grid-template-columns:minmax(0,1fr)} #kk-leidja .fbtn{display:inline-flex} #kk-leidja .rail{position:fixed;z-index:1050;top:0;bottom:0;left:0;width:min(340px,88vw);max-height:none;border-radius:0 var(--r-panel) var(--r-panel) 0; transform:translateX(-102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);padding-bottom:80px} #kk-leidja .rail.up{transform:none} #kk-leidja .railclose{display:block !important}} #kk-leidja .railclose{display:none;width:100%;background:var(--brass-ink);color:#fff;border-radius:var(--r-chip);padding:12px;font-weight:650;margin:4px 0 6px} @media(max-width:699px){ #kk-leidja .ovsub{display:none} #kk-leidja .ovin .oh{padding-bottom:10px}} @media(max-width:560px){ #kk-leidja .wrap{padding:0 14px} #kk-leidja .grid{gap:12px} #kk-leidja .mets{grid-template-columns:repeat(3,minmax(0,1fr))} #kk-leidja .met .k{font-size:9.5px} #kk-leidja .met .v{font-size:14px} #kk-leidja .cfoot{flex-wrap:wrap} #kk-leidja .play{flex:1 1 100%} #kk-leidja .tray .in{border-radius:18px 18px 0 0;padding:11px 14px} #kk-leidja .ov{padding:10px} #kk-leidja .ovin{padding:16px} #kk-leidja .ctabwrap{max-height:calc(100vh - 150px)} #kk-leidja .clogo{width:60px;height:60px;border-radius:16px;font-size:19px} #kk-leidja .ctab thead th:first-child, #kk-leidja .ctab tbody th, #kk-leidja .ctab tfoot th{width:120px;min-width:120px}} /* --- Structural lock ------------------------------------------------------- A theme rule carrying !important beats specificity alone, and themes do ship things like .grid{display:block!important}. These declarations are the ones that break the layout outright rather than merely restyling it, so they are locked. Nothing decorative is locked; the theme is welcome to lose those on specificity. ------------------------------------------------------------------------- */#kk-leidja{display:block!important;position:relative!important;float:none!important;width:auto!important} #kk-leidja .cols{display:grid!important;grid-template-columns:296px minmax(0,1fr)!important} #kk-leidja .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important} #kk-leidja .card{display:flex!important;flex-direction:column!important;float:none!important; width:auto!important;text-transform:none!important;border:0!important;border-radius:var(--r-tile)!important; background:var(--tile)!important;font-family:inherit!important;font-size:15px!important} #kk-leidja .mets{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important} #kk-leidja .met{display:block!important} /* Stacking is structural. A theme rule that lowers these turns a modal into something rendered behind the page. The values clear the theme's own sticky header (100) and back-to-top button (90). */ /* Locking position and stacking without locking the hidden state is worse than not locking at all: a theme rule of .ov{display:block!important} would leave a full-screen modal permanently over the page, swallowing every tap. The closed state is part of the same invariant, so both halves are locked, and .x.up wins over .x on specificity. Found by adversarial.mjs, which broke on exactly this. */ #kk-leidja .ov{position:fixed!important;z-index:1080!important;display:none!important} #kk-leidja .ov.up{display:block!important} #kk-leidja .scrim{position:fixed!important;z-index:1040!important;display:none!important} #kk-leidja .scrim.up{display:block!important} #kk-leidja .tray{position:fixed!important;z-index:1060!important;transform:translateY(120%)!important} #kk-leidja .tray.up{transform:none!important} #kk-leidja .ovin .oh{position:sticky!important;top:0!important;z-index:6!important} #kk-leidja .rail{position:sticky!important} #kk-leidja .toolbar{position:sticky!important} #kk-leidja .ctop, #kk-leidja .cfoot, #kk-leidja .cvt, #kk-leidja .chips, #kk-leidja .tags, #kk-leidja .pt, #kk-leidja .ch{display:flex!important} #kk-leidja .pts, #kk-leidja .cbody, #kk-leidja .cv{display:flex!important;flex-direction:column!important} /* box-sizing and the padding of the fixed-size tiles are structural: a theme rule of *{box-sizing:content-box!important} plus any padding turns a 112px logo into a 164px one. Found by the adversarial harness, not by reasoning. */ #kk-leidja, #kk-leidja *, #kk-leidja *::before, #kk-leidja *::after{box-sizing:border-box!important} #kk-leidja .wrap{font-family:inherit!important;font-size:15px!important;text-transform:none!important; background:none!important;float:none!important;width:auto!important} #kk-leidja .logo, #kk-leidja .rate, #kk-leidja .clogo{padding:0!important} #kk-leidja .logo, #kk-leidja .rate{display:grid!important;place-items:center!important} #kk-leidja .logo{width:var(--logo)!important;height:var(--logo)!important} #kk-leidja .rate{width:56px!important;height:56px!important;border-radius:50%!important} #kk-leidja .clogo{width:84px!important;height:84px!important;display:grid!important} #kk-leidja table.ctab{display:table!important;border-collapse:separate!important;table-layout:fixed!important} #kk-leidja .ctab thead{display:table-header-group!important} #kk-leidja .ctab tbody{display:table-row-group!important} #kk-leidja .ctab tfoot{display:table-footer-group!important} #kk-leidja .ctab tr{display:table-row!important} #kk-leidja .ctab th, #kk-leidja .ctab td{display:table-cell!important;border:0!important; background:none;padding:12px 15px!important;font-size:13px!important;font-family:inherit!important} #kk-leidja .ctab tbody td{background:var(--tile)!important} #kk-leidja .ctab thead th{background:var(--tile)!important} #kk-leidja .ctab thead th:first-child, #kk-leidja .ctab tbody th, #kk-leidja .ctab tfoot th{background:var(--ovbg)!important} #kk-leidja .ctab tfoot td{background:var(--tile)!important} /* Filter chips are