/* /companies pages (picker and company pages). Same look as the Events page and the home page job cards.
   Arial from /public/css/style.css; bold is 700, never 800/900 (Windows draws Arial 900 as Arial Black). */
:root { --onsite:#60a5fa; --hybrid:#2dd4bf; --remote:#fbbf24; }
[hidden] { display:none !important; }
.accent-text { background:linear-gradient(to right,#e9d5ff,#60a5fa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.glass-card { background:#1e293b; border:1px solid #334155; }
.star-sparkle { background:white; clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%); box-shadow:0 0 10px 2px rgba(255,255,255,0.5); }
@keyframes rise { 0% { transform:translateY(0); opacity:0; } 15% { opacity:0.6; } 85% { opacity:0.6; } 100% { transform:translateY(-110vh); opacity:0; } }
@keyframes twinkle { 0%,100% { transform:scale(0.5); opacity:0.3; } 50% { transform:scale(1.2); opacity:1; } }
@keyframes pop { from { transform:translateY(6px); opacity:0; } to { transform:none; opacity:1; } }
:focus-visible { outline:2px solid #c084fc; outline-offset:2px; }

/* shared controls */
.kpi-chip { font-size:12px; color:#94a3b8; background:#1e293b; border:1px solid #334155; border-radius:99px; padding:4px 12px; }
.kpi-chip b { color:#e2e8f0; font-weight:700; }
.bar { padding:14px 16px; border-radius:20px; }
.search { display:flex; align-items:center; gap:8px; background:#0f172a; border:1px solid #334155; border-radius:12px; padding:0 12px; cursor:text; transition:border-color 0.15s, box-shadow 0.15s; }
.search:focus-within { border-color:rgba(168,85,247,0.7); box-shadow:0 0 0 3px rgba(168,85,247,0.15); }
.search input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:#f1f5f9; font:inherit; font-size:14px; padding:10px 0; }
.search input::placeholder { color:#64748b; }
.search kbd { font-family:inherit; font-size:10px; color:#64748b; border:1px solid #334155; border-radius:5px; padding:0 6px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 11px; border-radius:99px; border:1px solid #334155; background:transparent; color:#94a3b8; cursor:pointer; font-family:inherit; transition:all 0.15s; white-space:nowrap; }
.chip:hover { color:#e2e8f0; border-color:#475569; }
.chip.on { color:#e9d5ff; border-color:rgba(168,85,247,0.6); background:rgba(168,85,247,0.18); }
.chip .dot { width:8px; height:8px; border-radius:50%; background:var(--c); }
.chip .n { font-size:10px; color:#64748b; }
.chip.on .n { color:#c4b5fd; }
.empty { grid-column:1/-1; text-align:center; padding:48px 20px; color:#94a3b8; }
.note { font-size:11px; color:#64748b; margin-top:10px; line-height:1.5; }
.act { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:9px 13px; border-radius:9px; border:1px solid #334155; color:#cbd5e1; background:rgba(15,23,42,0.5); text-decoration:none; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.act:hover { border-color:#a855f7; color:#e9d5ff; }
.act.main { background:linear-gradient(to right,#7c3aed,#4f46e5); border-color:transparent; color:#fff; }
.act.main:hover { opacity:0.9; color:#fff; }
.crumb { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#64748b; margin-bottom:16px; flex-wrap:wrap; }
.crumb a { color:#94a3b8; text-decoration:none; }
.crumb a:hover { color:#c084fc; }

/* picker */
.az { display:flex; flex-wrap:wrap; gap:4px; margin-top:12px; }
.az button { min-width:30px; height:30px; padding:0 6px; border-radius:8px; border:1px solid #334155; background:transparent; color:#94a3b8; font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.15s; }
.az button:hover { color:#e2e8f0; border-color:#475569; }
.az button.on { color:#e9d5ff; border-color:rgba(168,85,247,0.6); background:rgba(168,85,247,0.18); }
.az button:disabled { opacity:0.3; cursor:default; }
.count { font-size:12px; color:#94a3b8; margin:0 0 14px; }
.count b { color:#e2e8f0; }
.grid-co { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.co { display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; background:#1e293b; border:1px solid #334155; text-decoration:none; color:inherit; transition:border-color 0.2s, transform 0.2s; min-width:0; }
.co:hover { border-color:rgba(139,92,246,0.6); transform:translateY(-3px); }
.co.new { animation:pop 0.3s ease-out both; }
.co-logo { width:52px; height:52px; border-radius:12px; background:#0f172a; border:1px solid #1e293b; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#94a3b8; }
.co-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.co-name { display:block; font-size:16px; font-weight:700; color:#fff; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-where { display:block; font-size:11px; font-weight:500; color:#94a3b8; text-transform:uppercase; letter-spacing:-0.3px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-arrow { margin-left:auto; color:#c084fc; font-weight:700; flex-shrink:0; }
.co:hover .co-arrow { color:#fff; }
.letter { grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:10px 0 2px; font-size:14px; font-weight:700; color:#c084fc; letter-spacing:0.12em; }
.letter::after { content:""; flex:1; height:1px; background:#1e293b; }
.letter:first-child { margin-top:0; }
.loadmore { margin-top:22px; text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:#64748b; min-height:20px; }

/* company page: hero (the Events page's "next up" box) */
.hero { position:relative; overflow:hidden; border-radius:24px; padding:26px 28px; border:1px solid rgba(168,85,247,0.45); background:linear-gradient(135deg,rgba(124,58,237,0.22),rgba(30,41,59,0.95) 55%); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:start; }
.hero-logo { width:96px; height:96px; border-radius:20px; overflow:hidden; background:#0f172a; border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:#94a3b8; }
.hero-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-k { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#c084fc; }
.hero h1 { font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-0.01em; color:#fff; line-height:1.1; margin-top:6px; }
.hero-m { color:#cbd5e1; font-size:13px; margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 16px; }
.hero-m span { display:inline-flex; align-items:center; gap:6px; }
.hero-m svg { width:15px; height:15px; color:#c084fc; flex-shrink:0; }
.hero-d { color:#cbd5e1; font-size:14px; line-height:1.65; margin-top:14px; max-width:68ch; }
.acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.count-box { text-align:center; min-width:130px; padding:16px 18px; border-radius:18px; background:rgba(15,23,42,0.65); border:1px solid #334155; }
.count-n { font-size:44px; font-weight:700; line-height:1; color:#fff; }
.count-l { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:#94a3b8; margin-top:6px; }
.count-s { font-size:11px; font-weight:700; color:#34d399; margin-top:8px; }
@media (max-width:820px) {
  .hero { grid-template-columns:minmax(0,1fr); }
  .hero-logo { width:72px; height:72px; }
  .count-box { display:flex; align-items:baseline; justify-content:center; gap:10px; min-width:0; }
  .count-n { font-size:30px; }
  .count-s { margin-top:0; }
}

/* sections */
.sec { margin-top:40px; }
.sec-h { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.sec-dot { width:18px; height:18px; border-radius:50%; background:#0f172a; border:2px solid #a855f7; box-shadow:0 0 12px rgba(168,85,247,0.5); flex-shrink:0; }
.sec-t { font-size:16px; font-weight:700; color:#e2e8f0; text-transform:uppercase; letter-spacing:0.12em; white-space:nowrap; }
.sec-n { font-size:10px; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; white-space:nowrap; }
.rule { flex:1; height:1px; background:#1e293b; min-width:10px; }

/* home page job card */
.jobs { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.job-card { background:#1e293b; border-radius:16px; border:1px solid #334155; padding:22px; display:flex; flex-direction:column; justify-content:space-between; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); text-decoration:none; color:inherit; min-width:0; }
.job-card:hover { transform:translateY(-8px); border-color:rgba(139,92,246,0.5); }
.jc-top { display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; }
.jc-logo { width:56px; height:56px; background:#0f172a; border-radius:12px; overflow:hidden; border:1px solid #1e293b; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#94a3b8; }
.jc-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.tags { display:flex; flex-wrap:wrap; gap:4px; }
.tg { font-size:9px; font-weight:700; text-transform:uppercase; padding:4px 8px; border-radius:4px; border:1px solid; }
.tg.wp { background:rgba(20,83,45,0.3); color:#4ade80; border-color:rgba(34,197,94,0.3); }
.tg.ct { background:rgba(8,47,73,0.5); color:#38bdf8; border-color:rgba(14,165,233,0.3); }
.i0 { background:rgba(51,65,85,0.3); border-color:rgba(71,85,105,0.3); color:#fff; }
.i1 { background:rgba(131,24,67,0.3); border-color:rgba(236,72,153,0.3); color:#f472b6; }
.i2 { background:rgba(22,78,99,0.3); border-color:rgba(6,182,212,0.3); color:#22d3ee; }
.i3 { background:rgba(120,53,15,0.3); border-color:rgba(245,158,11,0.3); color:#fbbf24; }
.i4 { background:rgba(49,46,129,0.3); border-color:rgba(99,102,241,0.3); color:#818cf8; }
.i5 { background:rgba(124,45,18,0.3); border-color:rgba(249,115,22,0.3); color:#fb923c; }
.i6 { background:rgba(6,78,59,0.3); border-color:rgba(16,185,129,0.3); color:#34d399; }
.i7 { background:rgba(30,58,138,0.3); border-color:rgba(59,130,246,0.3); color:#60a5fa; }
.i8 { background:rgba(127,29,29,0.3); border-color:rgba(239,68,68,0.3); color:#f87171; }
.i9 { background:rgba(76,29,149,0.3); border-color:rgba(139,92,246,0.3); color:#a78bfa; }
.jc-co { font-size:12px; font-weight:500; color:#94a3b8; text-transform:uppercase; letter-spacing:-0.3px; margin-bottom:4px; }
.jc-t { font-size:18px; font-weight:700; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.jc-sal { color:#c084fc; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.025em; margin-top:6px; }
.jc-foot { margin-top:16px; padding-top:16px; border-top:1px solid rgba(51,65,85,0.5); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.jc-loc { display:flex; align-items:center; color:#94a3b8; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:-0.25px; min-width:0; }
.jc-loc svg { width:24px; height:24px; margin-right:4px; flex-shrink:0; }
.jc-loc span { display:flex; flex-direction:column; }
.jc-go { flex-shrink:0; padding:6px 12px; border-radius:8px; background:#9333ea; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:-0.3px; color:#fff; white-space:nowrap; transition:background-color .15s; }
.job-card:hover .jc-go { background:#a855f7; }
.new-rib { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; padding:3px 8px; border-radius:7px; color:#34d399; background:rgba(6,78,59,0.8); border:1px solid rgba(52,211,153,0.4); margin-left:auto; white-space:nowrap; align-self:flex-start; }

/* games */
.games { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.game { display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; min-width:0; }
.cover { position:relative; aspect-ratio:2/3; max-width:100%; border-radius:14px; overflow:hidden; border:1px solid #334155; background:#1e293b; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s; }
.cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cover img.wide { object-fit:contain; background:#0f172a; }
/* mobile games: the app icon, sharp, in the middle of a plain tile */
.cover.icon { background:#0f172a; }
.cover.icon img.art { position:absolute; left:50%; top:46%; width:72%; height:auto; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:22%; object-fit:cover; }
.cover .stars { position:absolute; top:8px; right:8px; padding:3px 7px; border-radius:7px; font-size:11px; font-weight:700; color:#0f172a; background:#fbbf24; }
.g-plats { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:#c084fc; line-height:1.4; }
.game:hover .cover { transform:translateY(-6px); border-color:rgba(139,92,246,0.6); box-shadow:0 18px 24px -8px rgba(0,0,0,0.6); }
.cover .yr-b { position:absolute; top:8px; left:8px; font-size:9px; font-weight:700; letter-spacing:0.08em; padding:3px 7px; border-radius:6px; color:#fff; background:rgba(15,23,42,0.85); border:1px solid rgba(255,255,255,0.12); }
.cover .mc { position:absolute; top:8px; right:8px; min-width:28px; height:28px; padding:0 6px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#0f172a; }
.cover .latest { position:absolute; left:0; right:0; bottom:0; padding:18px 8px 8px; font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#34d399; background:linear-gradient(to top,rgba(15,23,42,0.95),transparent); }
.g-name { font-size:14px; font-weight:700; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.g-meta { font-size:10px; font-weight:500; color:#94a3b8; text-transform:uppercase; letter-spacing:-0.25px; }

/* panels */
.two { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; }
@media (max-width:860px) { .two { grid-template-columns:minmax(0,1fr); } }
.three { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; }
.panel { border-radius:20px; padding:20px 22px; min-width:0; }
.pk { font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#c084fc; margin-bottom:14px; }
.months { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; align-items:end; height:180px; }
.mcol { display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; min-width:0; }
.stack { width:100%; max-width:34px; display:flex; flex-direction:column-reverse; gap:2px; }
.stack i { display:block; width:100%; }
.stack i.o { background:linear-gradient(to top,#7c3aed,#a855f7); }
.stack i.c { background:#475569; }
.stack i:last-child { border-radius:5px 5px 0 0; }
.mnum { font-size:11px; font-weight:700; color:#e2e8f0; }
.mlab { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#64748b; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:#94a3b8; margin-top:12px; }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:3px; display:block; }
.cats { display:flex; flex-direction:column; gap:9px; }
.cats div { display:grid; grid-template-columns:96px minmax(0,1fr) 24px; gap:10px; align-items:center; font-size:12px; font-weight:700; color:#cbd5e1; }
.cats em { display:block; height:8px; border-radius:4px; background:var(--c); }
.cats b { text-align:right; color:#e2e8f0; }
.mix { display:flex; height:10px; border-radius:5px; overflow:hidden; gap:2px; background:#0f172a; margin-top:6px; }
.again { display:flex; flex-direction:column; gap:8px; }
.again div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:#0f172a; border:1px solid #1e293b; font-size:14px; font-weight:700; color:#f1f5f9; }
.again small { font-size:10px; font-weight:700; color:#c084fc; text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; }
.past { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; }
.past div { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:#1e293b; border:1px solid #334155; opacity:0.6; min-width:0; }
.past div:hover { opacity:0.9; }
.past b { flex:1; min-width:0; font-size:14px; font-weight:700; color:#f1f5f9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.past small { font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }
.closed { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; padding:3px 8px; border-radius:7px; color:#cbd5e1; background:#334155; border:1px solid #475569; white-space:nowrap; }
.locs { display:flex; flex-direction:column; gap:8px; }
.locs div { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; }
.locs svg { width:18px; height:18px; color:#c084fc; flex-shrink:0; }
.locs span { flex:1; }
.locs small { font-size:11px; color:#94a3b8; font-weight:700; }
.calm { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:rgba(6,78,59,0.35); border:1px solid rgba(52,211,153,0.35); color:#a7f3d0; font-size:13px; font-weight:700; }
.calm .d { width:8px; height:8px; border-radius:50%; background:#34d399; flex-shrink:0; }
.lay { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:12px; background:rgba(127,29,29,0.25); border:1px solid rgba(239,68,68,0.35); margin-bottom:8px; font-size:13px; color:#fecaca; }
.lay b { color:#f87171; font-weight:700; }
.lay span { flex:1; min-width:0; }
.lay a { color:#fca5a5; font-size:11px; font-weight:700; text-decoration:none; }
.link { color:#c084fc; font-size:12px; font-weight:700; text-decoration:none; display:inline-block; margin-top:12px; }
.link:hover { color:#e9d5ff; }
.near { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.near a { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:#1e293b; border:1px solid #334155; text-decoration:none; color:inherit; transition:border-color 0.2s, transform 0.2s; min-width:0; }
.near a:hover { border-color:#a855f7; transform:translateY(-3px); }
.near-logo { width:42px; height:42px; border-radius:10px; background:#0f172a; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#94a3b8; }
.near-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.near b { display:block; font-size:15px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.near small { display:block; font-size:11px; font-weight:500; color:#94a3b8; text-transform:uppercase; letter-spacing:-0.3px; }

@media (max-width:520px) { .sec-t { white-space:normal; font-size:14px; min-width:0; } .rule { display:none; } .sec-n { margin-left:auto; } }
@media (max-width:700px) { main { padding-top:72px !important; } main.cj-modal { padding-top:16px !important; } .hero { padding:20px; } .bar { padding:12px; } .search kbd { display:none; } }
@media (prefers-reduced-motion:reduce) { .job-card, .near a, .co, .co.new, .cover { transition:none; animation:none; } }

/* ── Company picker, restyled 10.10.2026 ─────────────────────────────────── */
.cx-hero { position:relative; text-align:center; padding:28px 0 26px; }
.cx-glow { position:absolute; left:50%; top:-40px; width:min(720px,100%); height:260px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(168,85,247,0.22), rgba(96,165,250,0.08) 45%, transparent 70%); filter:blur(10px); z-index:-1; }
.cx-title { font-size:clamp(40px,7vw,72px); font-weight:700; letter-spacing:-0.03em; line-height:1.02; }
.cx-sub { color:#94a3b8; font-size:clamp(14px,1.6vw,17px); margin:14px auto 0; max-width:56ch; }
.cx-search { display:flex; align-items:center; gap:12px; max-width:620px; margin:20px 0 0; padding:0 8px 0 20px; height:58px; border-radius:999px;
  background:rgba(30,41,59,0.75); border:1px solid #334155; color:#94a3b8; cursor:text; transition:border-color .2s, box-shadow .2s, background .2s;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.cx-search:focus-within { border-color:rgba(168,85,247,0.75); box-shadow:0 0 0 4px rgba(168,85,247,0.15), 0 18px 40px -18px rgba(124,58,237,0.6); background:rgba(30,41,59,0.95); color:#c084fc; }
.cx-search input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:#f1f5f9; font:inherit; font-size:16px; }
.cx-search input::placeholder { color:#64748b; }
.cx-search kbd { font-family:inherit; font-size:12px; font-weight:700; color:#94a3b8; border:1px solid #334155; border-radius:999px; padding:6px 12px; background:#0f172a; }

.cx-recent { margin:4px 0 22px; }
.cx-recent-h { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#94a3b8; margin-bottom:10px; }
.cx-live { width:8px; height:8px; border-radius:50%; background:#34d399; animation:cx-pulse 1.8s ease-out infinite; }
@keyframes cx-pulse { 0% { box-shadow:0 0 0 0 rgba(52,211,153,.55); } 100% { box-shadow:0 0 0 9px rgba(52,211,153,0); } }
.cx-strip { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 6px; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); }
.cx-strip::-webkit-scrollbar { display:none; }
.cx-strip.at-end { -webkit-mask-image:none; mask-image:none; }
.cx-strip.drag-ready { cursor:grab; }
.cx-strip.dragging { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.cx-strip.dragging .cx-chip { pointer-events:none; }
.cx-strip img { -webkit-user-drag:none; user-select:none; }
.cx-chip { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px; background:#1e293b; border:1px solid #334155;
  text-decoration:none; color:#e2e8f0; font-size:13px; font-weight:700; transition:border-color .2s, transform .2s, background .2s; max-width:240px; }
@media (hover:hover) { .cx-chip:hover { border-color:rgba(168,85,247,.6); background:#24324a; transform:translateY(-2px); } }
.cx-chip-logo { width:32px; height:32px; border-radius:50%; overflow:hidden; background:#0f172a; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#94a3b8; }
.cx-chip-logo img { width:100%; height:100%; object-fit:cover; }
.cx-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cx-az { position:sticky; top:52px; z-index:20; display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:10px; margin:0 0 18px; border-radius:16px;
  background:rgba(15,23,42,0.78); border:1px solid rgba(51,65,85,.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.cx-az button { min-width:32px; height:32px; padding:0 9px; border-radius:999px; border:0; background:transparent; color:#94a3b8; font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; }
.cx-az button:hover { color:#f1f5f9; background:#1e293b; }
.cx-az button.on { color:#fff; background:linear-gradient(to right,#7c3aed,#4f46e5); }
.cx-az button:disabled { opacity:.25; cursor:default; background:transparent; }

.cx-count { font-size:13px; color:#94a3b8; margin:0 2px 14px; }
.cx-count b { color:#f1f5f9; }
.cx-count button { background:none; border:0; color:#c084fc; font:inherit; font-weight:700; cursor:pointer; padding:0; }
.cx-count button:hover { color:#e9d5ff; }

.cx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.cx-card { position:relative; display:flex; align-items:center; gap:14px; padding:16px 16px 16px 14px; border-radius:18px; text-decoration:none; color:inherit; min-width:0;
  background:linear-gradient(#1e293b,#1e293b) padding-box, linear-gradient(135deg,#334155,#334155) border-box; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, background .25s; }
.cx-card:hover { transform:translateY(-4px);
  background:linear-gradient(#1f2b40,#1f2b40) padding-box, linear-gradient(135deg,#a855f7,#60a5fa) border-box; }
.cx-card.new { animation:pop .3s ease-out both; }
.cx-logo { width:58px; height:58px; border-radius:16px; overflow:hidden; flex-shrink:0; background:#0f172a; border:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#94a3b8; }
.cx-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.cx-text { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.cx-name { font-size:16px; font-weight:700; color:#fff; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-place { display:flex; align-items:center; gap:4px; font-size:11px; font-weight:500; color:#94a3b8; text-transform:uppercase; letter-spacing:-.2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cx-place svg { flex-shrink:0; color:#c084fc; }
.cx-new { position:absolute; top:10px; right:12px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:3px 7px; border-radius:6px;
  color:#34d399; background:rgba(6,78,59,.75); border:1px solid rgba(52,211,153,.35); }
.cx-arrow { color:#475569; flex-shrink:0; transition:transform .25s, color .25s; }
.cx-card:hover .cx-arrow { color:#c084fc; transform:translateX(4px); }
.cx-letter { grid-column:1/-1; display:flex; align-items:center; gap:14px; margin:18px 0 2px; }
.cx-letter:first-child { margin-top:0; }
.cx-letter span { font-size:30px; font-weight:700; line-height:1; background:linear-gradient(to bottom,#e9d5ff,#7c3aed); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cx-letter::after { content:""; flex:1; height:1px; background:linear-gradient(to right,rgba(168,85,247,.45),transparent); }
.cx-empty { grid-column:1/-1; text-align:center; padding:56px 20px; border:1px dashed #334155; border-radius:20px; color:#94a3b8; display:flex; flex-direction:column; gap:6px; }
.cx-empty b { color:#e2e8f0; font-size:16px; }

@media (max-width:640px) {
  .cx-hero { padding-top:12px; }
  .cx-search { height:52px; }
  .cx-search kbd { display:none; }
  .cx-az { top:52px; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:2px; padding:6px; border-radius:999px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); }
  .cx-az.at-end { -webkit-mask-image:none; mask-image:none; }
  .cx-az::-webkit-scrollbar { display:none; }
  .cx-az button { flex:0 0 auto; min-width:34px; height:34px; padding:0; font-size:13px; }
  .cx-az button[data-l=""] { padding:0 14px; }
  .cx-az button:disabled { display:none; }
  .cx-az button:hover { background:transparent; }
  .cx-az button.on:hover { background:linear-gradient(to right,#7c3aed,#4f46e5); }
  .cx-grid { grid-template-columns:1fr; gap:10px; }
}
@media (prefers-reduced-motion:reduce) { .cx-card, .cx-chip, .cx-arrow { transition:none; } .cx-live { animation:none; } }

/* games on phones: three small covers per row (10.10.2026) */
@media (max-width:640px) {
  .games { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .cover { border-radius:10px; }
  .cover .yr-b { top:5px; left:5px; font-size:8px; padding:2px 5px; border-radius:5px; }
  .cover .mc, .cover .stars { top:5px; right:5px; min-width:22px; height:20px; padding:0 4px; font-size:10px; border-radius:5px; }
  .cover .stars { height:auto; padding:2px 5px; }
  .cover .latest { padding:12px 5px 5px; font-size:7px; letter-spacing:.08em; }
  .game { gap:5px; }
  .g-name { font-size:12px; }
  .g-plats { font-size:8px; }
  .g-meta { font-size:9px; }
  .game:hover .cover { transform:none; }
}
@media (max-width:360px) { .games { grid-template-columns:repeat(2,minmax(0,1fr)); } }