.cx-box{position:relative;padding:56px var(--gutter) 60px;background:radial-gradient(1000px 420px at 88% -10%,rgba(255,61,128,.2),transparent 62%),radial-gradient(700px 360px at 0 110%,rgba(110,80,255,.16),transparent 60%),#121116;color:#f5f5f7}
.cx-box .container{container:cxbox/inline-size;max-width:var(--container-extra-wide);margin:0 auto;padding:0 var(--gutter)}
.cx-box a{text-decoration:none}
.cx-head.related__header{align-items:center;flex-wrap:wrap;gap:6px 18px;border-bottom-color:rgba(255,255,255,.14)}
.cx-head .related__title{color:#fff}
.cx-head-sub{font-size:11px;font-weight:600;letter-spacing:.16em;color:#ff8fb6}
.cx-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.cxw{--fg:#fff;--pad:18px;--bg:#2a2930;container-type:inline-size;position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:216px;overflow:hidden;border-radius:24px;background:var(--bg);color:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 40px -26px rgba(0,0,0,.95);transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s;-webkit-tap-highlight-color:transparent}
.cx-box a.cxw,.cx-box a.cxw:hover,.cx-box a.cxw:focus,.cx-box a.cxw:visited{color:var(--fg)}
.cxw:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 46px -24px rgba(0,0,0,.95)}
.cxw:focus-visible,.cxg:focus-visible{outline:3px solid #ff3d80;outline-offset:3px}
.cxw-b{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;min-width:0;padding:var(--pad) var(--pad) 4px}
.cxw--m{grid-column:span 2;flex-direction:row}
.cxw--m .cxw-b{flex:1 1 56%;padding-bottom:var(--pad)}
.cxw-l{display:flex;align-items:center;gap:7px;min-width:0;font-size:10.5px;font-weight:700;line-height:1.25;letter-spacing:.12em;opacity:.92}
.cxw-l svg{flex:0 0 auto}
.cxw-l b{font-weight:700}
.cxw-live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:10px;letter-spacing:.12em}
.cxw-live i{width:7px;height:7px;border-radius:50%;background:#ff5f6d;animation:cxPulse 1.8s ease-out infinite}
@keyframes cxPulse{0%{box-shadow:0 0 0 0 rgba(255,95,109,.6)}70%{box-shadow:0 0 0 8px rgba(255,95,109,0)}100%{box-shadow:0 0 0 0 rgba(255,95,109,0)}}
.cxw-big{font-size:clamp(34px,22cqi,52px);font-weight:700;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cxw-big small{margin:0 6px;font-size:14px;font-weight:600;letter-spacing:0;opacity:.85}
.cxw-big small:last-child{margin-right:0}
.cxw-t{font-size:clamp(18px,9cqi,23px);font-weight:600;line-height:1.15;letter-spacing:-.01em}
.cxw-names{font-size:clamp(21px,7.4cqi,31px);font-weight:600;line-height:1.12;letter-spacing:-.015em}
.cxw-s{font-size:13px;line-height:1.42;opacity:.88}
.cxw-clamp,.cxw-clamp2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.cxw-clamp2{-webkit-line-clamp:2}
.cxw-f{font-size:12.5px;font-weight:700;line-height:1.3}
.cxw--m .cxw-f{margin-top:auto}
.cxw-ph{position:relative;flex:1 0 92px;overflow:hidden;pointer-events:none}
.cxw-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(to top,#000 52%,transparent);mask-image:linear-gradient(to top,#000 52%,transparent);transition:transform .8s cubic-bezier(.23,1,.32,1)}
.cxw--m .cxw-ph{flex:0 0 44%}
.cxw--m .cxw-ph img{-webkit-mask-image:linear-gradient(to left,#000 48%,transparent);mask-image:linear-gradient(to left,#000 48%,transparent)}
.cx-box .cxw:hover .cxw-ph img{transform:scale(1.07)}
.cxw-zodia{--bg:linear-gradient(160deg,#3d2aa3 0%,#1a1047 72%)}
.cxw-sign{display:flex;align-items:center;gap:12px;margin-top:4px}
.cxw-glyph{display:grid;flex:0 0 auto;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 26px rgba(160,140,255,.45);font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","DejaVu Sans",sans-serif;font-size:30px;line-height:1}
.cxw-sign-b{display:grid;gap:2px;min-width:0}
.cxw-sign-b small{font-size:11.5px;opacity:.78}
.cxw-sign-b b{font-size:clamp(20px,7cqi,26px);font-weight:600;line-height:1.1}
.cxw-stars{display:flex;gap:3px;margin-top:2px}
.cxw-stars i{width:12px;height:12px;background:rgba(255,255,255,.26);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.cxw-stars i.is-on{background:#ffd54a}
.cxw-eortologio{--fg:#3d0b22;--bg:linear-gradient(160deg,#ffe7da 0%,#ffb5cb 100%)}
.cxw-eortologio .cxw-l{color:#b30f4f;opacity:1}
.cxw-lexi{--bg:linear-gradient(160deg,#ff5590 0%,#b50c4b 100%)}
.cxw-tiles{display:flex;gap:6px;margin:4px 0 2px}
.cxw-tiles i{display:grid;place-items:center;width:clamp(30px,8.6cqi,42px);aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);font-size:clamp(15px,4.4cqi,21px);font-style:normal;font-weight:700;transition:transform .45s cubic-bezier(.23,1,.32,1)}
.cxw-tiles i.is-g{background:#2fb45a;box-shadow:none}
.cxw-tiles i.is-y{background:#e8b21f;box-shadow:none}
.cxw-tiles i.is-q{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.cx-box .cxw-lexi:hover .cxw-tiles i{transform:rotateX(360deg)}
.cxw-tiles i:nth-child(2){transition-delay:.06s}
.cxw-tiles i:nth-child(3){transition-delay:.12s}
.cxw-tiles i:nth-child(4){transition-delay:.18s}
.cxw-tiles i:nth-child(5){transition-delay:.24s}
.cxw-pazl{--fg:#1e1b16;--bg:#f6efe2}
.cxw-pazl .cxw-l{color:#b30f4f;opacity:1}
.cxw-ph--pz{-webkit-mask-image:linear-gradient(to left,#000 70%,transparent);mask-image:linear-gradient(to left,#000 70%,transparent)}
.cxw-ph--pz img{-webkit-mask-image:none;mask-image:none}
.cxw-jig{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cxw-jig path{vector-effect:non-scaling-stroke}
.cxw-jig-l{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6}
.cxw-jig-hole{fill:#f6efe2;opacity:.92;transition:opacity .5s}
.cxw-jig-p{fill:rgba(255,255,255,.22);stroke:#fff;stroke-width:2.4;transform-box:fill-box;transform-origin:center;transform:translate(16%,-22%) rotate(-8deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));transition:transform .6s cubic-bezier(.23,1,.32,1),opacity .6s}
.cx-box .cxw-pazl:hover .cxw-jig-p{transform:none;opacity:0}
.cx-box .cxw-pazl:hover .cxw-jig-hole{opacity:0}
.cxw-kouiz{--fg:#2a1d00;--bg:linear-gradient(160deg,#ffe066 0%,#ffae17 100%)}
.cxw-tv{--bg:linear-gradient(160deg,#4a83ff 0%,#1a39a3 100%)}
.cxw-reality{--bg:linear-gradient(160deg,#d0369a 0%,#5c1060 100%)}
.cxw-poios-einai{--bg:linear-gradient(160deg,#ff8a4c 0%,#c9381a 100%)}
.cxw-sosto-lathos{--bg:linear-gradient(160deg,#27c99b 0%,#0a7055 100%)}
.cxw-megalyteros{--bg:linear-gradient(160deg,#9c6dff 0%,#4a21ae 100%)}
.cxw-ph [data-ph="eortologio"]{object-position:50% 40%}
.cxw-ph [data-ph="tv"]{object-position:50% 35%}
.cxw-ph [data-ph="reality"]{object-position:50% 30%}
.cxw-ph [data-ph="kouiz"]{object-position:50% 45%}
.cx-games{margin-top:44px}
.cx-sub{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:0 0 18px}
.cx-sub h3{display:flex;align-items:center;gap:9px;margin:0;font-size:15px;font-weight:600;letter-spacing:.16em;color:#fff}
.cx-sub h3 svg{color:#ff3d80}
.cx-box .cx-sub a,.cx-box .cx-sub a:visited{font-size:13px;font-weight:600;color:#ff8fb6}
.cx-box .cx-sub a:hover{color:#fff}
.cx-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.cxg{display:flex;flex-direction:column;gap:4px;min-width:0;border-radius:18px}
.cx-box a.cxg,.cx-box a.cxg:hover,.cx-box a.cxg:visited{color:#f5f5f7}
.cxg-ph{position:relative;display:block;aspect-ratio:16/10;margin-bottom:8px;overflow:hidden;border-radius:16px;background:#26252c;box-shadow:0 18px 30px -22px #000}
.cxg-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.23,1,.32,1)}
.cx-box .cxg:hover .cxg-ph img{transform:scale(1.08)}
.cxg-k{font-size:10.5px;font-weight:600;letter-spacing:.13em;color:#ff6fa2}
.cxg-t{font-size:16px;font-weight:600;line-height:1.2}
.cx-box .cxg:hover .cxg-t{color:#ff8fb6}
.cxg-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12.5px;line-height:1.42;color:#b6b6bf}
.cxg-f{margin-top:4px;font-size:12.5px;font-weight:600;color:#fff}
.cxg-f.is-done{color:#62e2a0}
html[data-theme="dark"] .cx-box{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .cx-box{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}}
@container cxbox (max-width:1080px){
.cx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cx-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3.25);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.cxg{scroll-snap-align:start}
}
@container cxbox (max-width:600px){
.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cxw{--pad:15px;min-height:178px;border-radius:20px}
.cxw--m{min-height:190px}
.cxw--m .cxw-ph{flex-basis:40%}
.cxw-l{font-size:10px;letter-spacing:.1em}
.cxw:not(.cxw--m) .cxw-live{gap:0;font-size:0}
.cxw-s{font-size:12.5px}
.cxw-glyph{width:48px;height:48px;font-size:25px}
.cx-row{grid-auto-columns:64%;gap:14px}
.cx-games{margin-top:36px}
.cx-head-sub{display:none}
}
@media (max-width:600px){
.cx-box{padding:40px var(--gutter) 44px}
}
@media (prefers-reduced-motion:reduce){
.cxw,.cxw-ph img,.cxg-ph img,.cxw-tiles i,.cxw-jig-p,.cxw-jig-hole{transition:none}
.cxw-live i{animation:none}
}
