/* ============ CORE ============ */
* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-user-select:none; }
input, textarea, [contenteditable="true"] { user-select:text; -webkit-user-select:text; }
:root {
  --vio:#8b5cf6; --vio-bright:#a78bfa; --cyan:#22d3ee; --cyan-bright:#67e8f9;
  --danger:#ff3b5c; --danger-bright:#ff6b85; --ok:#34d399;
  --bg:#070a14; --panel:#0e1424; --txt:#e6eaf5; --txt-dim:#8b93ad;
  --grad:linear-gradient(135deg,#8b5cf6,#22d3ee);
}
/* tło bazowe jasne jak aplikacja (#F4F1FD); --bg zostaje ciemne dla starych elementów, które z niego korzystają */
html,body { width:100%; height:100%; overflow:hidden; background:#F4F1FD; overscroll-behavior:none;
  font-family:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; }
body { perspective:1400px; }
canvas#fx { position:fixed; inset:0; z-index:3; pointer-events:none; }
canvas#smoke { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.7; }

/* background: near-black with two soft accent glows in the corners */
.aurora { position:fixed; inset:-20%; z-index:0; pointer-events:none; filter:blur(80px); opacity:.32;
  background:
    radial-gradient(circle at 12% 10%, rgba(139,92,246,.30) 0%, transparent 30%),
    radial-gradient(circle at 88% 88%, rgba(34,211,238,.18) 0%, transparent 30%);
  animation:aurora 20s ease-in-out infinite alternate; }
@keyframes aurora { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(3%, -2%) scale(1.08)} }

.vignette { position:fixed; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 34%, rgba(4,6,12,.5) 78%, rgba(2,3,8,.9) 100%); }

.danger-vignette { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .6s;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(255,59,92,.28) 100%); }
body.danger .danger-vignette { opacity:1; animation:pulse-red 1.2s ease-in-out infinite; }
@keyframes pulse-red { 0%,100%{opacity:.5} 50%{opacity:1} }

body.shake .stage { animation:shake .45s; }
@keyframes shake { 0%,100%{transform:translate(0)} 15%{transform:translate(-14px,6px) rotate(-.6deg)} 30%{transform:translate(11px,-8px) rotate(.5deg)} 45%{transform:translate(-9px,4px)} 60%{transform:translate(7px,-3px)} 80%{transform:translate(-4px,2px)} }

/* ============ ARENA ============ */
.stage { position:fixed; inset:0; z-index:2; }
.board { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:min(520px,86vw); height:min(300px,40vh); border-radius:28px;
  background:linear-gradient(160deg, rgba(20,28,52,.55) 0%, rgba(10,14,28,.65) 100%);
  border:1px solid rgba(139,92,246,.28);
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08), 0 0 60px rgba(139,92,246,.08);
  animation:boardfloat 6s ease-in-out infinite; }
@keyframes boardfloat { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-8px)} }
.board::before { content:''; position:absolute; inset:-1px; border-radius:28px; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(139,92,246,.6), transparent 30%, transparent 70%, rgba(34,211,238,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.board .drop-hint { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:rgba(139,146,173,.35); font-size:13px; letter-spacing:5px; text-transform:uppercase; font-weight:600; white-space:nowrap; transition:opacity .4s; }
.spot { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); width:120vmin; height:80vmin; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(139,92,246,.10) 0%, rgba(34,211,238,.04) 40%, transparent 70%); }

/* ============ CARDS ============ */
.card { width:110px; height:158px; position:absolute; transform-style:preserve-3d; cursor:default;
  transition:transform .55s cubic-bezier(.2,.9,.25,1.15), filter .3s; will-change:transform; }
.card .face { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.6); overflow:hidden; }
.card .back { transform:rotateY(180deg); background:linear-gradient(160deg,#141b30 0%,#0c1122 100%); border:1px solid rgba(139,92,246,.4); }
.card .back::before { content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(139,92,246,.25) 0%, transparent 55%),
    repeating-linear-gradient(115deg, transparent 0 12px, rgba(139,92,246,.07) 12px 13px); }
.card .back::after { content:'◆'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:36px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 12px rgba(139,92,246,.8)); }
.card .front { background:linear-gradient(165deg,#f6f8ff 0%,#e9edf8 100%); border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; }
.card .front::before { content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.75) 0%, transparent 30%); }
.card .front .pip { position:absolute; font-size:18px; font-weight:800; line-height:1; }
.card .front .pip.tl { top:10px; left:11px; }
.card .front .pip.br { bottom:10px; right:11px; transform:rotate(180deg); }
.card .front .art { font-size:62px; filter:drop-shadow(0 3px 6px rgba(20,30,60,.3)); }
.card.rK .front { color:#2563eb; } .card.rQ .front { color:#db2777; } .card.rA .front { color:#0f172a; } .card.rJ .front { color:#7c3aed; }
.card.selectable { cursor:pointer; }
.card.selectable:hover { filter:brightness(1.12) drop-shadow(0 0 14px rgba(139,92,246,.6)); }
.card.selected { filter:brightness(1.15) drop-shadow(0 0 20px var(--vio-bright)); }
.card.selected::after { content:''; position:absolute; inset:-4px; border-radius:17px; border:2px solid var(--cyan-bright); animation:selglow 1.2s ease-in-out infinite; }
@keyframes selglow { 0%,100%{box-shadow:0 0 10px rgba(34,211,238,.5)} 50%{box-shadow:0 0 26px var(--cyan-bright)} }

#playerHand, #botHand, #pile { position:fixed; z-index:2; }
#playerHand { left:50%; bottom:2vh; width:0; height:0; }
#botHand { left:50%; top:4vh; width:0; height:0; }
#pile { left:50%; top:47%; width:0; height:0; }

/* ============ BOT OPPONENT (practice) ============ */
.opponent { position:fixed; top:1.2vh; left:50%; transform:translateX(-50%); z-index:2; text-align:center; pointer-events:none; }
.opponent svg { width:118px; height:118px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(139,92,246,.25)); }
.opponent .eyes { animation:eyeglow 3.5s ease-in-out infinite; }
@keyframes eyeglow { 0%,100%{opacity:.95} 50%{opacity:.5} }
.opp-name { color:var(--txt-dim); font-size:12px; letter-spacing:5px; text-transform:uppercase; margin-top:-6px; font-weight:600; }

.bubble { position:fixed; top:12vh; left:calc(50% + 90px); z-index:6; background:rgba(14,20,36,.85); border:1px solid rgba(139,92,246,.4);
  color:var(--txt); padding:10px 16px; border-radius:16px 16px 16px 4px; font-size:14px; max-width:230px;
  backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; transform:translateY(8px) scale(.9); transition:all .35s; pointer-events:none; }
.bubble.show { opacity:1; transform:translateY(0) scale(1); }

/* ============ ONLINE OPPONENTS BAR ============ */
#opponents { position:fixed; top:1.6vh; left:50%; transform:translateX(-50%); z-index:6; display:none; gap:14px; }
#opponents.show { display:flex; }
.opp { background:rgba(14,20,36,.6); border:1px solid rgba(139,92,246,.25); border-radius:16px; padding:10px 16px; text-align:center;
  backdrop-filter:blur(10px); transition:all .3s; min-width:118px; }
.opp.turn { border-color:var(--cyan); box-shadow:0 0 22px rgba(34,211,238,.35); }
.opp.dead { opacity:.35; filter:grayscale(1); }
.opp .nm { color:var(--txt); font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.opp .meta { color:var(--txt-dim); font-size:11px; letter-spacing:1px; margin-top:2px; }
.backs { display:flex; gap:3px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.backs i { width:13px; height:19px; border-radius:3px; background:linear-gradient(160deg,#141b30,#0c1122); border:1px solid rgba(139,92,246,.5); display:block; }
.opp .chambers { justify-content:center; }

/* ============ HUD ============ */
.hud-top { position:fixed; top:2vh; width:100%; display:flex; justify-content:space-between; padding:0 3vw; z-index:6; pointer-events:none; }
.score { color:var(--txt-dim); font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600;
  background:rgba(14,20,36,.55); border:1px solid rgba(139,92,246,.25); border-radius:16px; padding:12px 18px; backdrop-filter:blur(12px); }
.score b { font-size:28px; display:block; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.chambers { display:flex; gap:5px; margin-top:8px; }
.chamber { width:11px; height:11px; border-radius:50%; border:1.5px solid rgba(139,92,246,.5); background:transparent; transition:all .4s; }
.chamber.spent { background:var(--danger); border-color:var(--danger); box-shadow:0 0 10px var(--danger); }

.claim-banner { position:fixed; top:24vh; left:50%; transform:translateX(-50%); z-index:6; text-align:center; pointer-events:none; }
.claim-banner .lbl { color:var(--txt-dim); font-size:11px; letter-spacing:6px; text-transform:uppercase; font-weight:600; }
.claim-banner .val { font-size:42px; letter-spacing:8px; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(139,92,246,.5)); }

.status { position:fixed; bottom:33vh; left:50%; transform:translateX(-50%); z-index:6; color:var(--txt);
  font-size:16px; letter-spacing:.3px; text-shadow:0 2px 8px #000; opacity:.92; text-align:center; pointer-events:none;
  transition:opacity .3s; max-width:90vw; }

/* ============ BUTTONS / INPUTS ============ */
.actions { position:fixed; bottom:23vh; left:50%; transform:translateX(-50%); z-index:7; display:flex; gap:16px; }
.btn { position:relative; padding:15px 36px; font-family:inherit; font-size:15px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
  color:#fff; background:var(--grad); border:none; border-radius:999px;
  cursor:pointer; transition:all .22s;
  box-shadow:0 8px 28px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.btn:hover:not(:disabled) { transform:translateY(-2px) scale(1.03); box-shadow:0 12px 36px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.btn:active:not(:disabled) { transform:translateY(0) scale(.98); }
.btn:disabled { opacity:.3; cursor:default; filter:saturate(.4); }
:focus-visible { outline:3px solid var(--cyan-bright); outline-offset:3px; }
.btn.liar { background:linear-gradient(135deg,#ff3b5c,#ff7849); box-shadow:0 8px 28px rgba(255,59,92,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.liar:hover:not(:disabled) { box-shadow:0 12px 36px rgba(255,59,92,.55); }
.btn.small { padding:10px 20px; font-size:12px; letter-spacing:1.5px; }
.btn.ghost { background:transparent; border:1px solid rgba(139,92,246,.55); box-shadow:none; color:var(--vio-bright); }
.btn.ghost:hover:not(:disabled) { border-color:var(--cyan); color:var(--cyan-bright); box-shadow:0 0 18px rgba(34,211,238,.25); }
.input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(139,92,246,.35); background:rgba(7,10,20,.7);
  color:var(--txt); font-size:15px; outline:none; font-family:inherit; transition:border .2s; }
.input:focus { border-color:var(--cyan); }
.hidden { display:none !important; }

/* ============ MENU ============ */
#menu { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:18px;
  background:#0a0e1a;
  background-image:
    linear-gradient(125deg, rgba(7,10,20,1), rgba(11,20,32,1) 44%, rgba(20,16,30,1)),
    radial-gradient(ellipse at 18% 16%, rgba(34,211,238,.16), transparent 38%),
    radial-gradient(ellipse at 86% 84%, rgba(255,59,92,.13), transparent 34%);
  transition:opacity .8s; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:28px 22px; }
#menu.gone { opacity:0; pointer-events:none; }
/* Ekran gry nadal istniał i animował się pod nieprzezroczystym menu. Chromium
   renderowało więc pełnoekranową aurorę z blur(80px), stół i canvasy mimo że
   użytkownik ich nie widział. Wycinamy te warstwy z renderowania na stronie głównej. */
body:has(#menu:not(.gone)) { perspective:none; }
/* Perspektywa body czyni z niego blok zawierający dla .ng (position:fixed). Gdy fokus
   lub scrollIntoView przewinie body (np. okno zasad w Literakach/Kalamburach), cały
   ekran gry wyjeżdżał ponad widok. Na ekranach gry perspektywa nie jest potrzebna. */
body:has(.ng.show) { perspective:none; }
body:has(#menu:not(.gone)) > .aurora,
body:has(#menu:not(.gone)) > .vignette,
body:has(#menu:not(.gone)) > .danger-vignette,
body:has(#menu:not(.gone)) > .stage,
body:has(#menu:not(.gone)) > #smoke,
body:has(#menu:not(.gone)) > #fx { display:none !important; }
#menu::before, #menu::after { content:''; position:fixed; pointer-events:none; font-size:min(22vw,220px); font-weight:900; }
#menu::before { content:'♠'; top:1%; left:1%; color:rgba(255,255,255,.028); }
#menu::after { content:'♦'; bottom:1%; right:1%; color:rgba(34,211,238,.035); }
.logo { position:relative; z-index:1; font-size:min(7.2vw,56px); letter-spacing:.1em; font-weight:900; text-align:center; line-height:1.02;
  background:linear-gradient(115deg,#f6f8ff 0%,#67e8f9 48%,#ff6b85 100%); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 34px rgba(139,92,246,.45));
  animation:logosheen 5s linear infinite; }
.logo .thin { display:block; font-size:.23em; letter-spacing:.55em; margin-left:.12em; color:var(--txt-dim); -webkit-text-fill-color:var(--txt-dim); font-weight:600; margin-top:12px; filter:none; }
@keyframes logosheen { to{background-position:200% 0} }
.brand-badge { color:var(--cyan-bright); font-size:10px; letter-spacing:4px; text-transform:uppercase; font-weight:800;
  border:1px solid rgba(34,211,238,.35); background:rgba(34,211,238,.08); padding:6px 14px; border-radius:999px; margin-bottom:2px; }
.menu-grid { display:grid; grid-template-columns:minmax(270px,.9fr) minmax(390px,1.35fr) minmax(270px,.9fr); grid-template-areas:"profile play friends" "stats play friends"; gap:18px; width:min(1180px,100%); align-items:stretch; }
.side-stack { display:grid; gap:18px; min-width:0; }
.panel { position:relative; background:rgba(14,20,36,.68); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:20px 20px 20px 22px; backdrop-filter:blur(14px);
  min-width:0; box-shadow:0 20px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05); }
.panel::before { content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:3px; background:var(--panel-accent,var(--vio)); opacity:.7; }
.panel.play-panel { padding:22px; background:linear-gradient(180deg, rgba(16,24,45,.82), rgba(10,14,28,.72)); border-color:rgba(34,211,238,.18); }
.menu-grid .panel:nth-child(1) { grid-area:profile; --panel-accent:var(--vio); }
.menu-grid .panel:nth-child(2) { grid-area:play; padding:22px 22px 22px 24px; background:linear-gradient(180deg, rgba(16,24,45,.86), rgba(10,14,28,.76)); border-color:rgba(34,211,238,.2); --panel-accent:var(--cyan); }
.menu-grid .panel:nth-child(3) { grid-area:friends; --panel-accent:#ff6b85; }
.menu-grid .panel:nth-child(4) { grid-area:stats; --panel-accent:var(--ok); }
#menu > .logo { width:min(1180px,100%); }
.panel h3 { display:flex; align-items:center; gap:8px; color:var(--txt-dim); font-size:11px; letter-spacing:4px; text-transform:uppercase; margin-bottom:14px; font-weight:700; }
.panel h3 i { font-style:normal; font-size:14px; }
.avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:900; font-size:16px; color:#fff; flex:none;
  background:var(--grad); box-shadow:0 6px 16px rgba(139,92,246,.35); }
.profile-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.profile-head .input { margin:0; }
.panel .row { display:flex; gap:10px; margin-top:10px; }
.play-buttons { display:grid; gap:12px; }
.menu-grid .panel:nth-child(2) .play-buttons > .btn { display:flex; align-items:center; justify-content:flex-start; min-height:62px; width:100%; border-radius:16px; padding:14px 18px; text-align:left; letter-spacing:1.2px; box-shadow:0 18px 34px rgba(0,0,0,.22); }
.menu-grid .panel:nth-child(2) .play-buttons > .btn::after { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); color:#fff; font-size:18px; letter-spacing:0; }
.menu-grid .panel:nth-child(2) #btnRanked { background:linear-gradient(135deg,#ff3b5c,#ff8a3d); border:none; color:#fff; }
.menu-grid .panel:nth-child(2) #btnRanked::after { content:'!'; }
.menu-grid .panel:nth-child(2) #btnCreateLobby { background:linear-gradient(135deg,#1e293b,#2563eb); border-color:rgba(255,255,255,.12); color:#fff; }
.menu-grid .panel:nth-child(2) #btnCreateLobby::after { content:'+'; }
.menu-grid .panel:nth-child(2) #btnPractice { background:linear-gradient(135deg,#0f766e,#22d3ee); border-color:rgba(255,255,255,.12); color:#fff; }
.menu-grid .panel:nth-child(2) #btnPractice::after { content:'AI'; font-size:13px; font-weight:900; }
.menu-grid .panel:nth-child(2) #btnPushFortune { background:linear-gradient(135deg,#312e81,#111827 58%,#34d399); border-color:rgba(255,255,255,.12); color:#fff; }
.menu-grid .panel:nth-child(2) #btnPushFortune::after { content:'SUM'; font-size:11px; font-weight:900; }
.menu-grid .panel:nth-child(2) .row { display:grid; grid-template-columns:1fr auto; margin-top:0; }
.menu-grid .panel:nth-child(2) .row .btn { border-radius:12px; }
.mode-card { position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; border:none; border-radius:18px; padding:20px 22px; text-align:left;
  color:#fff; cursor:pointer; font-family:inherit; overflow:hidden; transition:transform .2s, filter .2s, border-color .2s; border:1px solid rgba(255,255,255,.12); }
.mode-card:disabled { opacity:.42; cursor:default; filter:saturate(.4); }
.mode-card:not(:disabled):hover { transform:translateY(-2px); filter:brightness(1.08); }
.mode-card strong { display:block; font-size:18px; letter-spacing:1.4px; text-transform:uppercase; line-height:1.1; }
.mode-card span { display:block; margin-top:7px; color:rgba(255,255,255,.72); font-size:12px; letter-spacing:.6px; line-height:1.45; text-transform:none; }
.mode-card i { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; flex:none; font-style:normal; font-size:25px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); }
.mode-ranked { background:linear-gradient(135deg,#ff3b5c,#ff8a3d); box-shadow:0 18px 36px rgba(255,59,92,.22); }
.mode-lobby { background:linear-gradient(135deg,#1e293b,#2563eb); }
.mode-practice { background:linear-gradient(135deg,#0f766e,#22d3ee); }
.mode-push { background:linear-gradient(135deg,#312e81,#111827 58%,#34d399); }
.join-strip { display:grid; grid-template-columns:1fr auto; gap:10px; margin:2px 0 6px; }
.section-title { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.section-title h3 { margin-bottom:0; }
.status-pill { color:var(--txt-dim); font-size:11px; letter-spacing:1.3px; text-transform:uppercase; border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:6px 9px; background:rgba(7,10,20,.42); }
.code-chip { font-weight:800; letter-spacing:4px; color:var(--cyan-bright); background:rgba(34,211,238,.08);
  border:1px dashed rgba(34,211,238,.4); padding:8px 14px; border-radius:10px; cursor:pointer; display:inline-block; font-size:16px; }
.elo-chip { color:var(--vio-bright); font-weight:800; font-size:22px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:4px 0 14px; }
.stat-box { border:1px solid rgba(139,92,246,.2); background:rgba(7,10,20,.35); border-radius:12px; padding:10px; text-align:center; }
.stat-box b { display:block; color:var(--txt); font-size:20px; line-height:1; margin-bottom:5px; }
.stat-box span { color:var(--txt-dim); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; }
.leader-list { display:flex; flex-direction:column; gap:7px; max-height:30vh; overflow:auto; }
.leader-row { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; color:var(--txt); font-size:13px; padding:8px 2px; border-bottom:1px solid rgba(139,92,246,.12); }
.leader-row.mine { color:var(--cyan-bright); }
.leader-row .place { color:var(--txt-dim); font-weight:800; }
.leader-row .elo { color:var(--vio-bright); font-weight:800; }
.lbl-sm { color:var(--txt-dim); font-size:11px; letter-spacing:2px; text-transform:uppercase; margin:12px 0 6px; font-weight:600; }
.rail-links { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.rail-link { display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--txt-dim); font-size:12.5px; font-weight:700;
  padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); transition:.15s; }
.rail-link:hover { color:var(--txt); border-color:var(--cyan); background:rgba(34,211,238,.08); }
.friend-row { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid rgba(139,92,246,.12); color:var(--txt); font-size:14px; }
.friend-row .fname { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.friend-row .felo { color:var(--txt-dim); font-size:12px; }
.dot { width:8px; height:8px; border-radius:50%; background:#4b5470; flex:none; }
.dot.on { background:var(--ok); box-shadow:0 0 8px var(--ok); }
.mini-btn { background:transparent; border:1px solid rgba(139,92,246,.4); color:var(--vio-bright); font-size:11px; border-radius:8px;
  padding:4px 10px; cursor:pointer; font-weight:700; letter-spacing:1px; transition:all .2s; font-family:inherit; }
.mini-btn:hover { border-color:var(--cyan); color:var(--cyan-bright); }
.mini-btn.warn { border-color:rgba(255,59,92,.4); color:var(--danger-bright); }
.offline-note { color:var(--danger-bright); font-size:13px; text-align:center; }
.rules-hint { color:var(--txt-dim); font-size:13px; max-width:560px; text-align:center; line-height:1.8; padding:0 20px; }
.rules-hint b { color:var(--danger-bright); }

/* ============ QUEUE / LOBBY OVERLAYS ============ */
#queueOv, #lobbyOv, #soloPicker, #hubJoinOv { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:rgba(4,6,12,.7); backdrop-filter:blur(8px); overflow-y:auto; padding:4vh 3vw; }
#queueOv.show, #lobbyOv.show, #soloPicker.show, #hubJoinOv.show { display:flex; }
.diff-grid { display:flex; flex-direction:column; gap:10px; margin:6px 0 14px; }
.diff-btn { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:14px 20px; border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.3); transition:transform .15s, filter .15s; }
.diff-btn:hover { transform:translateY(-2px); filter:brightness(1.1); }
.diff-btn::after { content:''; position:absolute; left:-80%; top:0; width:50%; height:100%; transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transition:left .5s ease; }
.diff-btn:hover::after { left:130%; }
.diff-btn b { font-size:15px; }
.diff-btn span { font-size:11px; color:rgba(255,255,255,.78); font-weight:500; letter-spacing:.03em; }
.diff-btn[data-diff="easy"] { background:linear-gradient(120deg,#0e8074,#17b8cf); border:none; color:#fff; }
.diff-btn[data-diff="medium"] { background:linear-gradient(120deg,#7c52ea,#3b5fe0); border:none; color:#fff; }
.diff-btn[data-diff="hard"] { background:linear-gradient(120deg,#dc2a55,#e88f2b); border:none; color:#fff; }
.ov-panel { background:rgba(14,20,36,.85); border:1px solid rgba(139,92,246,.35); border-radius:24px; padding:34px 40px;
  text-align:center; width:min(440px,94vw); max-height:92vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; box-sizing:border-box; margin:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.7); position:relative; }
.ov-close { position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:#fff; font-size:18px; line-height:1; cursor:pointer; z-index:2; }
.ov-close:hover { background:rgba(255,255,255,.18); }
.ov-panel h2 { color:var(--txt); font-size:20px; letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; font-weight:800; }
.spinner { width:46px; height:46px; border-radius:50%; border:3px solid rgba(139,92,246,.25); border-top-color:var(--cyan);
  animation:spin 1s linear infinite; margin:0 auto 18px; }
@keyframes spin { to{transform:rotate(360deg)} }
.lobby-code { font-size:40px; font-weight:900; letter-spacing:12px; margin:6px 0 16px; cursor:pointer;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lobby-modes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 16px; }
.mode-pick { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; border-radius:16px;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); color:var(--txt-dim); font-family:inherit;
  font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.mode-pick:hover:not(:disabled) { color:#fff; border-color:rgba(150,120,255,.4); transform:translateY(-2px); }
.mode-pick i { font-style:normal; font-size:26px; }
.mode-pick.active { border-color:rgba(154,120,255,.55); color:#fff; background:linear-gradient(120deg,rgba(126,89,255,.3),rgba(24,160,192,.2)); box-shadow:0 0 22px rgba(110,77,240,.25); }
.mode-pick:disabled { cursor:default; }
.mode-pick .mp-count { font-style:normal; font-size:9px; letter-spacing:0; color:var(--txt-dim); opacity:.85; }
.mode-pick.locked { opacity:.32; filter:grayscale(.7); }
.mode-pick.locked .mp-count { color:#f87171; }
.lobby-count { color:var(--txt-dim); font-size:11px; letter-spacing:2px; text-transform:uppercase; margin-top:-8px; margin-bottom:10px; }
.lobby-players { margin:10px 0 20px; }
.lobby-players .lp { display:flex; align-items:center; gap:8px; color:var(--txt); padding:8px 0; border-bottom:1px solid rgba(139,92,246,.12); font-size:15px; }
.lobby-players .lp .host-tag { color:var(--cyan-bright); font-size:11px; letter-spacing:2px; margin-left:auto; }
.ov-hint { color:var(--txt-dim); font-size:12px; margin-top:14px; letter-spacing:1px; }

/* ============ NOWOCZESNE LOBBY ============ */
#lobbyOv { overflow-x:hidden; }
#lobbyOv .ov-panel { width:min(720px,94vw); max-width:100%; padding:30px 32px 24px; text-align:left; position:relative; overflow:hidden;
  background:radial-gradient(circle at 82% -10%,rgba(34,211,238,.10),transparent 42%),linear-gradient(160deg,rgba(20,27,50,.98),rgba(9,13,26,.99));
  border:1px solid rgba(103,232,249,.22); box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02) inset; }
#lobbyOv .ov-panel h2 { text-align:left; margin:0 0 16px; font-size:24px; letter-spacing:2px; color:var(--txt); }
/* ---- kod gry ---- */
#lobbyOv .code-card { position:relative; display:flex; align-items:center; gap:16px; width:100%; margin:2px 0 20px;
  padding:14px 20px; border-radius:16px; cursor:pointer;
  background:linear-gradient(160deg,rgba(34,211,238,.08),rgba(139,92,246,.06)),rgba(6,9,18,.6);
  border:1px solid rgba(103,232,249,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:border-color .18s,box-shadow .18s; }
#lobbyOv .code-card:hover { border-color:rgba(103,232,249,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 24px rgba(34,211,238,.14); }
#lobbyOv .code-card.copied { border-color:var(--ok); }
#lobbyOv .code-label { flex:none; font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase;
  color:var(--txt-dim); writing-mode:vertical-rl; transform:rotate(180deg); }
#lobbyOv .code-value { flex:1 1 auto; min-width:0; font-size:clamp(30px,9vw,42px); font-weight:900; letter-spacing:.12em; line-height:1;
  background:linear-gradient(90deg,#67e8f9,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent; }
#lobbyOv .code-copy { flex:none; font-size:18px; opacity:.55; transition:opacity .18s; }
#lobbyOv .code-card:hover .code-copy { opacity:1; }
#lobbyOv .code-card:hover .code-copy { opacity:1; transform:scale(1.15) rotate(-8deg); }
#lobbyOv .lobby-modes { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 16px;
  max-height:min(42vh,340px); overflow-y:auto; padding:2px 8px 2px 2px; scrollbar-width:thin; scrollbar-color:rgba(103,232,249,.5) transparent; }
#lobbyOv .lobby-modes::-webkit-scrollbar { width:6px; }
#lobbyOv .lobby-modes::-webkit-scrollbar-thumb { background:rgba(103,232,249,.45); border-radius:6px; }
#lobbyOv .mode-pick { min-height:92px; padding:12px 8px; border-radius:15px; background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
  border-color:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.22);
  transition:transform .18s,background .18s,border-color .18s,box-shadow .18s; }
#lobbyOv .mode-pick:hover:not(:disabled) { transform:translateY(-3px); border-color:rgba(34,211,238,.55); background:linear-gradient(160deg,rgba(34,211,238,.16),rgba(139,92,246,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 28px rgba(0,0,0,.34); }
#lobbyOv .mode-pick i { font-size:29px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
#lobbyOv .mode-pick.active { border-color:var(--cyan); background:linear-gradient(160deg,rgba(139,92,246,.30),rgba(34,211,238,.20)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(34,211,238,.3),0 0 26px rgba(34,211,238,.28); }
#lobbyOv .lobby-count { margin:0 0 8px; padding-top:2px; font-weight:800; color:var(--cyan-bright); }
#lobbyOv .lobby-players { margin:0 0 16px; border:1px solid rgba(103,232,249,.14); border-radius:16px; padding:6px 16px;
  background:linear-gradient(180deg,rgba(34,211,238,.05),rgba(7,10,20,.4)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
#lobbyOv #btnStartLobby:not(:disabled) { background:linear-gradient(135deg,#7c3aed,#22d3ee); border:none; color:#fff; font-weight:800;
  letter-spacing:1px; box-shadow:0 8px 24px rgba(34,211,238,.35),0 0 0 1px rgba(255,255,255,.1) inset; }
#lobbyOv #btnStartLobby:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(34,211,238,.5); }
#lobbyOv .end-actions { justify-content:flex-end; }
.lobby-kicker{display:block;margin-bottom:8px;color:var(--cyan);font-size:9px;font-weight:800;letter-spacing:.22em}
#lobbyOv .lobby-lead{margin:-8px 0 18px;color:var(--txt-dim);font-size:13px;line-height:1.5}
.lobby-game-summary{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.035)}
.lobby-game-summary>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(139,92,246,.16);font-size:23px}.lobby-game-summary div{display:flex;flex:1;flex-direction:column}.lobby-game-summary small{color:var(--txt-dim);font-size:8px;letter-spacing:.15em}.lobby-game-summary b{margin-top:3px;color:var(--txt);font-size:17px}.lobby-game-summary button{border:0;background:none;color:var(--cyan);font-weight:700;cursor:pointer}
.lobby-share-actions{display:grid;grid-template-columns:1fr auto;gap:9px;margin-bottom:11px}.lobby-share-actions .btn{min-height:48px}.lobby-code-row{text-align:center;color:var(--txt-dim);font-size:12px}.lobby-code-row button{margin-left:5px;padding:5px 9px;border:1px solid rgba(103,232,249,.24);border-radius:8px;background:rgba(34,211,238,.07);color:var(--cyan-bright);font-weight:900;letter-spacing:.14em;cursor:pointer}
.lobby-settings{margin-top:14px}.lobby-settings-title{margin-bottom:8px;color:var(--txt-dim);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lobby-public-row{display:flex;align-items:center;gap:11px;margin:0 0 15px;cursor:pointer}.lobby-public-row input{position:absolute;opacity:0}.lobby-switch{position:relative;width:42px;height:24px;flex:none;border-radius:999px;background:#30374a;transition:.2s}.lobby-switch::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.lobby-public-row input:checked+.lobby-switch{background:linear-gradient(90deg,#7c3aed,#22d3ee)}.lobby-public-row input:checked+.lobby-switch::after{transform:translateX(18px)}.lobby-public-row>span:last-child{display:flex;flex-direction:column;color:var(--txt)}.lobby-public-row small{margin-top:2px;color:var(--txt-dim);font-size:10px}
.lobby-start-hint{margin:-5px 0 9px;text-align:center;color:var(--txt-dim);font-size:11px}.lobby-bottom-actions{display:grid!important;grid-template-columns:1fr auto;gap:10px!important}.lobby-bottom-actions #btnStartLobby{min-height:48px}
.hub-join-panel{position:relative;width:min(460px,calc(100vw - 28px));text-align:left!important}.hub-join-panel h2{margin:0 0 8px!important;text-align:left!important}.hub-join-panel>p{margin:0 0 20px;color:var(--txt-dim);font-size:13px}.hub-join-modal-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.hub-join-modal-form input{min-width:0;height:54px;padding:0 16px;border:1px solid rgba(103,232,249,.32);border-radius:14px;outline:none;background:rgba(3,8,20,.72);color:#fff;text-align:center;text-transform:uppercase;font:800 20px var(--font-d);letter-spacing:.35em}.hub-join-modal-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.1)}.hub-join-modal-form .btn{height:54px;border-radius:14px;padding:0 24px}
.hero-join{max-width:560px;margin-top:28px;padding:15px 16px;border:1px solid rgba(103,232,249,.25);border-radius:18px;background:rgba(12,22,39,.78);box-shadow:0 14px 40px rgba(0,0,0,.2)}.hero-join>span{display:block;margin-bottom:9px;color:var(--ink);font-size:13px;font-weight:700}.hero-join .home-code-form{margin:0}.hero-join .input{text-align:left;letter-spacing:.2em}.show-all-games{display:block;margin:22px auto 0;padding:13px 22px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--ink);font-weight:700;cursor:pointer}.game-card.catalog-hidden{display:none!important}.home-action-grid{grid-template-columns:1fr}.home-party-card{max-width:760px;margin:0 auto;width:100%}
@media(max-width:560px){
  #lobbyOv .ov-panel { padding:26px 18px 20px; }
  #lobbyOv .lobby-modes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #lobbyOv .mode-pick { min-height:82px; }
  .lobby-share-actions{grid-template-columns:1fr}.lobby-share-actions .btn{width:100%}
  .hub-join-modal-form{grid-template-columns:1fr}.hub-join-modal-form .btn{width:100%}
}

/* ============ RULES OVERLAY ============ */
#rulesOv { position:fixed; inset:0; z-index:41; display:none; align-items:center; justify-content:center;
  background:rgba(4,6,12,.78); backdrop-filter:blur(8px); padding:4vh 4vw; }
#rulesOv.show { display:flex; }
.rules-panel { background:linear-gradient(180deg,rgba(16,24,45,.96),rgba(10,14,28,.96)); border:1px solid rgba(139,92,246,.35);
  border-radius:22px; padding:28px 30px; max-width:560px; width:100%; max-height:92vh; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; box-shadow:0 30px 80px rgba(0,0,0,.7); }
.rules-panel h2 { color:var(--txt); font-size:22px; letter-spacing:2px; text-transform:uppercase; font-weight:800; text-align:center; margin-bottom:20px; }
.rules-block { margin-bottom:18px; }
.rules-block h4 { display:flex; align-items:center; gap:8px; color:var(--cyan-bright); font-size:15px; font-weight:800; letter-spacing:1px; margin-bottom:8px; }
.rules-block h4 i { font-style:normal; font-size:20px; }
.rules-block p { color:var(--txt); font-size:14px; line-height:1.7; }
.rules-block p b { color:var(--danger-bright); }
.rules-block ul { margin:8px 0 0 20px; color:var(--txt); font-size:14px; line-height:1.7; }
.rules-panel .btn { width:100%; margin-top:10px; }



/* ============ END-OF-GAME PANEL ============ */
#endOv, #partyOv { position:fixed; inset:0; z-index:55; display:none; align-items:center; justify-content:center;
  background:rgba(4,6,12,.72); backdrop-filter:blur(9px); }
#endOv.show, #partyOv.show { display:flex; }
#partyOv .end-sub { margin-bottom:14px; }
.party-spin { width:26px; height:26px; margin:10px auto 0; border-radius:50%; border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--cyan); animation:spin 1s linear infinite; }
.end-panel { background:linear-gradient(180deg,rgba(16,24,45,.97),rgba(10,14,28,.97)); border:1px solid rgba(139,92,246,.4);
  border-radius:24px; padding:32px 42px; text-align:center; min-width:300px; max-width:90vw;
  box-shadow:0 30px 80px rgba(0,0,0,.7); animation:endpop .45s cubic-bezier(.2,1.1,.35,1); }
@keyframes endpop { from{opacity:0; transform:translateY(20px) scale(.92)} }
.end-emoji { font-size:52px; margin-bottom:8px; }
.end-panel h2 { color:var(--txt); font-size:24px; font-weight:900; letter-spacing:1px; margin-bottom:6px; }
.end-sub { color:var(--txt-dim); font-size:13px; min-height:18px; margin-bottom:20px; }
.end-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Emotki, czat i rzucanki przy stole: style w assets/game-overlays.css (dok #tableDock). */

/* ============ GAME HUB (per-game subpage) ============ */
#gameHub { position:fixed; inset:0; z-index:30; display:none; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:#04060e;
  font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif; }
#gameHub.show { display:flex; animation:hubin .35s ease; }
@keyframes hubin { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.hub-hero { position:relative; padding:64px 22px 46px; text-align:center; overflow:hidden; flex-shrink:0; isolation:isolate; }
.hub-hero::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px; }
.hub-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,6,14,.1) 0%,rgba(4,6,14,.28) 45%,#04060e 100%); }
.hub-hero > * { position:relative; z-index:1; }
.hub-back { position:fixed; top:max(14px, env(safe-area-inset-top)); left:14px; z-index:35; background:rgba(4,6,14,.6); border:1px solid rgba(255,255,255,.22);
  color:#fff; border-radius:999px; padding:11px 20px; font:600 13.5px inherit; cursor:pointer; backdrop-filter:blur(10px); transition:.18s; }
.hub-back:hover { border-color:rgba(150,120,255,.6); background:rgba(139,108,255,.18); transform:translateY(-2px); }
.hub-glyph { font-size:78px; line-height:1; display:inline-block; filter:drop-shadow(0 14px 34px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(255,255,255,.15)); animation:hubfloat 4s ease-in-out infinite; }
@keyframes hubfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hub-title { font-size:clamp(34px,6vw,58px); font-weight:700; letter-spacing:-.045em; margin:12px 0 8px; color:#fff; text-shadow:0 6px 34px rgba(0,0,0,.6); }
.hub-tag { max-width:560px; margin:0 auto; color:rgba(255,255,255,.85); font-size:15px; line-height:1.6; }
.hub-chips { display:flex; gap:8px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.hub-chip { background:rgba(4,6,14,.5); border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:999px;
  padding:8px 15px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; padding:6px 22px 46px; max-width:1080px; margin:0 auto; width:100%; box-sizing:border-box; flex-shrink:0; }
.hub-card { position:relative; background:#0b0f1d; border:1px solid rgba(255,255,255,.075); border-radius:24px; padding:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 46px rgba(0,0,0,.3); }
.hub-card::before { content:''; position:absolute; inset:-1px; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(150,120,255,.32),transparent 32%,transparent 70%,rgba(47,215,233,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.hub-card h3 { margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#67708d; display:flex; align-items:center; gap:8px; }
.hub-editorial { grid-column:1/-1; padding:clamp(24px,4vw,48px); color:#cbd3e7; line-height:1.75; }
.hub-editorial::before { background:linear-gradient(120deg,rgba(150,120,255,.48),transparent 35%,transparent 66%,rgba(47,215,233,.34)); }
.hub-editorial-kicker { color:#2fd7e9; font-size:11px; font-weight:800; letter-spacing:.2em; margin-bottom:8px; }
.hub-editorial h2 { margin:0; color:#fff; font-size:clamp(28px,4vw,45px); line-height:1.1; letter-spacing:-.035em; }
.hub-editorial .hub-editorial-lead { max-width:850px; margin:18px 0 20px; color:#aeb8d0; font-size:clamp(15px,2vw,18px); }
.hub-editorial-facts { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; }
.hub-editorial-facts span { border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:7px 11px; color:#dce3f5; font-size:12px; background:rgba(255,255,255,.045); }
.hub-editorial-columns { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,52px); }
.hub-editorial section { min-width:0; }
.hub-editorial section h3 { margin:0 0 12px; color:#fff; font-size:16px; letter-spacing:0; text-transform:none; }
.hub-editorial ol,.hub-editorial ul { margin:0; padding-left:21px; }
.hub-editorial li { margin:8px 0; padding-left:4px; }
.hub-editorial-section { margin-top:34px; max-width:880px; }
.hub-editorial-section p { margin:0 0 12px; }
.hub-editorial-section ul { margin-top:4px; }
.hub-editorial-mistakes { margin-top:30px; padding:22px; border-radius:18px; background:rgba(255,92,138,.07); border:1px solid rgba(255,92,138,.16); }
.hub-editorial-faq { margin-top:32px; }
.hub-editorial details { border-top:1px solid rgba(255,255,255,.09); padding:15px 0; }
.hub-editorial details:last-child { border-bottom:1px solid rgba(255,255,255,.09); }
.hub-editorial summary { color:#eef1fb; font-weight:700; cursor:pointer; }
.hub-editorial details p { margin:8px 0 0; }
.hub-editorial footer { display:flex; flex-wrap:wrap; gap:18px; margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); }
.hub-editorial footer a { color:#62dcea; font-weight:700; text-decoration:none; }
.hub-editorial-meta{display:grid;gap:7px;margin-top:28px;padding:18px 20px;border:1px solid rgba(47,215,233,.16);border-radius:16px;background:rgba(47,215,233,.055);font-size:12px}.hub-editorial-meta strong{color:#eef3ff}.hub-editorial-meta span{color:#9faac2}.hub-editorial-meta a{color:#63deed;font-weight:700;text-decoration:none}
body > #gameEditorialSource { max-width:1036px; margin:40px auto; }
@media(max-width:720px){ .hub-editorial-columns{grid-template-columns:1fr}.hub-editorial{padding:24px 18px}.hub-editorial-mistakes{padding:17px} }
.hub-play { display:flex; flex-direction:column; gap:10px; }
.hub-play button { border:none; border-radius:16px; padding:15px 18px; font:700 15px inherit; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); transition:transform .15s, box-shadow .15s, border-color .15s; text-align:left; }
.hub-play button:hover { transform:translateY(-2px); border-color:rgba(150,120,255,.45); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.hub-play button.primary { position:relative; overflow:hidden; background:linear-gradient(115deg,#9268ff,#6b48f2 52%,#149fc0); border:none;
  box-shadow:0 14px 30px rgba(110,77,240,.3), inset 0 1px 0 rgba(255,255,255,.25); }
.hub-play button.primary::after { content:''; position:absolute; left:-80%; top:0; width:50%; height:100%; transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transition:left .5s ease; }
.hub-play button.primary:hover::after { left:130%; }
.hub-play button small { display:block; font-weight:500; font-size:12px; opacity:.72; margin-top:3px; }
.hub-lobby-list { display:flex; flex-direction:column; gap:8px; min-height:52px; }
.hub-empty { color:#67708d; font-size:13px; padding:8px 2px; line-height:1.55; }
.hub-rank-list { display:flex; flex-direction:column; gap:6px; }
.hub-podium { display:flex; align-items:flex-end; justify-content:center; gap:10px; margin:6px 0 16px; }
.hub-pod { flex:1; max-width:110px; text-align:center; border-radius:14px 14px 6px 6px; padding:11px 6px 9px;
  background:linear-gradient(180deg,rgba(139,108,255,.26),rgba(139,108,255,.05)); border:1px solid rgba(139,108,255,.3); }
.hub-pod.p1 { padding-top:24px; background:linear-gradient(180deg,rgba(242,196,100,.34),rgba(242,196,100,.05)); border-color:rgba(242,196,100,.45); box-shadow:0 0 26px rgba(242,196,100,.12); }
.hub-pod .medal { font-size:24px; }
.hub-pod .nm { font-size:12.5px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-pod .ws { font-size:11px; color:#67708d; }
.hub-rank-row { display:flex; gap:10px; align-items:center; font-size:13px; color:#e8ecf8;
  background:rgba(255,255,255,.032); border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:8px 12px; }
.hub-rank-row .place { color:#67708d; font-weight:700; width:26px; }
.hub-rank-row .w { margin-left:auto; font-weight:700; color:#4ce0b3; }
.hub-rules-body { color:#c3cade; font-size:13.5px; line-height:1.6; }
.hub-rules-body ul { padding-left:18px; margin:8px 0 0; }
.hub-rules-body li { margin-bottom:5px; }
@media(max-width:720px){ .hub-hero{ padding:58px 14px 34px; } .hub-grid{ padding:4px 12px 30px; } }

/* GAME HUB V2 — wspólny, nowoczesny szablon wszystkich podstron gier */
#gameHub {
  --hub-accent:#8b6cff;
  --hub-accent-2:#2fd7e9;
  background:
    radial-gradient(circle at 12% 8%,rgba(113,79,224,.14),transparent 28rem),
    radial-gradient(circle at 88% 25%,rgba(24,163,196,.08),transparent 30rem),
    #050710;
}
#gameHub::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px; mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
.hub-hero {
  min-height:560px; box-sizing:border-box; display:grid; place-items:center; padding:76px 30px 90px;
  text-align:left; background:none!important;
}
.hub-hero::before {
  opacity:.75; background:
    radial-gradient(circle at 74% 46%,color-mix(in srgb,var(--hub-accent) 24%,transparent),transparent 25rem),
    radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--hub-accent-2) 10%,transparent),transparent 23rem);
}
.hub-hero::after { background:linear-gradient(180deg,transparent 55%,#050710 100%); }
.hub-hero-inner {
  position:relative; z-index:1; width:min(1180px,100%); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(38px,7vw,100px); align-items:center;
}
.hub-copy { max-width:650px; }
.hub-kicker {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; color:#cbd3ea;
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
.hub-kicker::before { content:""; width:30px; height:1px; background:linear-gradient(90deg,var(--hub-accent),var(--hub-accent-2)); }
.hub-title {
  max-width:760px; margin:0 0 18px; font-size:clamp(44px,6vw,78px); line-height:.96; letter-spacing:-.06em;
  font-weight:720; text-wrap:balance; text-shadow:0 18px 50px rgba(0,0,0,.4);
}
.hub-title em {
  display:block; margin-top:9px; font-style:normal; font-size:.27em; line-height:1; letter-spacing:.18em;
  text-transform:uppercase; color:#929db9;
}
.hub-tag { max-width:610px; margin:0; color:#aab4cb; font-size:clamp(15px,1.6vw,18px); line-height:1.65; }
.hub-chips { justify-content:flex-start; margin-top:25px; gap:9px; }
.hub-chip {
  padding:8px 12px; border-color:rgba(255,255,255,.1); background:rgba(12,16,30,.68); color:#dce3f3;
  backdrop-filter:none; letter-spacing:.06em;
}
.hub-chip:last-child { border-color:color-mix(in srgb,var(--hub-accent-2) 30%,transparent); }
.hub-visual {
  position:relative; width:min(440px,100%); aspect-ratio:1.04; justify-self:end; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12); border-radius:36px; overflow:hidden; background:var(--hub-grad);
  box-shadow:0 50px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.18);
  transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);
}
.hub-visual::before {
  content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 72% 12%,rgba(255,255,255,.32),transparent 33%),
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 44%,rgba(3,5,13,.55));
}
.hub-visual::after {
  content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.1); border-radius:27px;
  box-shadow:inset 0 0 70px rgba(2,4,12,.25);
}
.hub-glyph {
  position:relative; z-index:2; font-size:clamp(100px,13vw,168px); animation:hubfloat 5s ease-in-out infinite;
  filter:drop-shadow(0 24px 35px rgba(0,0,0,.45)) drop-shadow(0 0 34px rgba(255,255,255,.14));
}
.hub-orbit { position:absolute; z-index:3; width:54px; aspect-ratio:1; border:1px solid rgba(255,255,255,.16); border-radius:16px;
  display:grid; place-items:center; background:rgba(6,9,20,.66); color:#fff; font-size:21px; box-shadow:0 16px 28px rgba(0,0,0,.3); }
.hub-orbit.o1 { left:8%; top:14%; transform:rotate(-9deg); }
.hub-orbit.o2 { right:8%; top:24%; transform:rotate(11deg); }
.hub-orbit.o3 { right:14%; bottom:9%; transform:rotate(-5deg); }
.hub-back {
  top:max(18px,env(safe-area-inset-top)); left:max(18px,env(safe-area-inset-left)); padding:10px 16px;
  border-color:rgba(255,255,255,.1); background:rgba(7,10,20,.76); box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter:blur(16px);
}
.hub-section-head {
  width:min(1180px,calc(100% - 44px)); margin:-34px auto 20px; position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:end; gap:20px;
}
.hub-section-head span { color:var(--hub-accent-2); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.hub-section-head h2 { margin:6px 0 0; color:#f5f7ff; font-size:clamp(26px,3.5vw,40px); line-height:1.1; letter-spacing:-.04em; }
.hub-section-head p { max-width:440px; margin:0; color:#77829e; font-size:13px; line-height:1.6; text-align:right; }
.hub-grid {
  grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; max-width:1224px; padding:0 22px 70px;
}
.hub-card {
  overflow:hidden; padding:26px; border-radius:26px; background:linear-gradient(145deg,rgba(16,21,39,.96),rgba(9,13,26,.96));
  border-color:rgba(255,255,255,.08); box-shadow:0 24px 60px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.045);
}
.hub-card::before { border-radius:26px; opacity:.75; }
.hub-card h3 { margin-bottom:18px; color:#8590aa; font-size:10px; }
.hub-card-play { grid-column:span 7; padding:30px; }
.hub-card-lobbies { grid-column:span 5; }
.hub-card-rank { grid-column:span 7; }
.hub-card-rules { grid-column:span 5; }
.hub-editorial { grid-column:1/-1; margin-top:22px; }
.hub-play { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hub-play button {
  min-height:84px; position:relative; padding:17px 48px 17px 18px; border-radius:18px; background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.09); font-size:15px;
}
.hub-play button::before {
  content:"→"; position:absolute; right:17px; top:50%; transform:translateY(-50%); width:27px; height:27px;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; font-size:13px;
}
.hub-play button.primary {
  background:var(--hub-grad); box-shadow:0 18px 35px color-mix(in srgb,var(--hub-accent) 24%,transparent),inset 0 1px rgba(255,255,255,.23);
}
.hub-play button small { color:rgba(224,230,244,.78); line-height:1.4; }
.hub-empty { color:#7f8aa6; }
.hub-rank-row { padding:10px 13px; background:rgba(255,255,255,.025); }
.hub-rules-body { color:#b8c2d9; font-size:14px; }
.hub-editorial { background:linear-gradient(145deg,rgba(14,19,37,.98),rgba(8,12,24,.98)); }
.hub-editorial-kicker { color:var(--hub-accent-2); }
.hub-editorial h2 { font-size:clamp(32px,5vw,54px); }
.hub-editorial-facts span { background:rgba(255,255,255,.035); }
.hub-editorial footer a { color:var(--hub-accent-2); }
@media(max-width:900px) {
  .hub-hero { min-height:auto; padding:92px 22px 76px; }
  .hub-hero-inner { grid-template-columns:1fr; gap:44px; }
  .hub-copy { max-width:720px; }
  .hub-visual { width:min(470px,82vw); justify-self:center; transform:none; }
  .hub-card-play,.hub-card-lobbies,.hub-card-rank,.hub-card-rules { grid-column:1/-1; }
}
@media(max-width:600px) {
  .hub-hero { padding:88px 17px 62px; }
  .hub-title { font-size:clamp(39px,13vw,58px); }
  .hub-tag { font-size:14px; }
  .hub-visual { width:100%; border-radius:27px; }
  .hub-visual::after { border-radius:19px; }
  .hub-orbit { width:43px; border-radius:13px; font-size:17px; }
  .hub-section-head { width:calc(100% - 28px); margin:-18px auto 16px; }
  .hub-section-head p { display:none; }
  .hub-grid { display:flex; flex-direction:column; padding:0 12px 44px; gap:12px; }
  .hub-card { padding:20px 17px; border-radius:21px; }
  .hub-card::before { border-radius:21px; }
  .hub-card-play { order:-2; }
  .hub-card-lobbies { order:-1; }
  .hub-play { grid-template-columns:1fr; }
  .hub-play button { min-height:72px; }
  .hub-back { left:10px; top:max(10px,env(safe-area-inset-top)); }
}

/* ============ PERSONALIZACJA: avatary + ramki ============ */
.pav { position:relative; }
.pav.em { font-size:19px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.09); }
.frame-green  { box-shadow:0 0 0 2px #34d399; }
.frame-blue   { box-shadow:0 0 0 2px #38bdf8; }
.frame-violet { box-shadow:0 0 0 2px #a78bfa, 0 0 10px rgba(167,139,250,.55); }
.frame-gold   { box-shadow:0 0 0 2px #fbbf24, 0 0 12px rgba(251,191,36,.6); }
.frame-fire   { animation:framefire 1.6s ease-in-out infinite; }
@keyframes framefire { 0%,100%{ box-shadow:0 0 0 2px #f97316, 0 0 10px rgba(249,115,22,.7); } 50%{ box-shadow:0 0 0 2px #fbbf24, 0 0 20px rgba(251,191,36,.95); } }
.ng-player .pav { cursor:pointer; }
/* pierścień odliczania tury na aktywnym graczu */
.ng-player.turn .pav::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid transparent;
  border-top-color:var(--cyan,#22d3ee); border-right-color:rgba(34,211,238,.35); animation:turnspin 2s linear infinite; }
@keyframes turnspin { to { transform:rotate(360deg); } }

#styleOv, #pcardOv { position:fixed; inset:0; z-index:42; display:none; align-items:center; justify-content:center; background:rgba(4,6,12,.74); backdrop-filter:blur(7px); }
#styleOv.show, #pcardOv.show { display:flex; }
.style-panel, .pcard { width:min(92vw,400px); max-height:88vh; overflow-y:auto; background:#11172a; border:1px solid rgba(139,92,246,.32); border-radius:20px; padding:22px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.av-grid { display:grid; grid-template-columns:repeat(auto-fit,46px); gap:9px; justify-content:center; margin:14px 0 18px; }
.av-cell { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); font-size:23px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:transform .1s; }
.av-cell:hover { transform:scale(1.12); }
.av-cell.sel { outline:2px solid var(--cyan,#22d3ee); outline-offset:2px; }
.av-cell.lock { opacity:.32; cursor:not-allowed; }
.av-cell.lock:hover { transform:none; }
.av-cell.lock::after { content:'LVL 'attr(data-lvl); position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); background:#1f2937; border-radius:8px; font-size:8.5px; padding:1px 5px; color:#fbbf24; white-space:nowrap; }
.fr-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:6px 0 18px; }
.fr-cell { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; position:relative; border:1px solid rgba(255,255,255,.14); }
.fr-cell.sel { outline:2px solid var(--cyan,#22d3ee); outline-offset:2px; }
.fr-cell.lock { opacity:.32; cursor:not-allowed; }
.fr-cell.lock::after { content:'LVL 'attr(data-lvl); position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); background:#1f2937; border-radius:8px; font-size:8.5px; padding:1px 5px; color:#fbbf24; white-space:nowrap; }
/* karta gracza */
.pcard .big-av { width:78px; height:78px; border-radius:50%; margin:0 auto 10px; font-size:42px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); position:relative; }
.pcard h2 { margin:0; font-size:22px; color:#fff; }
.pcard .pc-sub { color:var(--txt-dim); font-size:12.5px; margin-top:3px; }
.pcard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:16px 0 6px; }
.pc-tile { background:rgba(255,255,255,.05); border-radius:12px; padding:9px 4px; }
.pc-tile b { display:block; font-size:18px; color:#fff; }
.pc-tile span { font-size:10px; color:var(--txt-dim); letter-spacing:1px; text-transform:uppercase; }
.wl-dots { display:flex; gap:4px; justify-content:center; margin:12px 0 4px; flex-wrap:wrap; }
.wl-dots i { width:11px; height:11px; border-radius:3px; background:#374151; }
.wl-dots i.w { background:#34d399; } .wl-dots i.l { background:#ef4444; }
.pc-games { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.pc-game { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border-radius:10px; padding:7px 10px; font-size:13px; color:var(--txt); }
.pc-game .wr { margin-left:auto; font-weight:800; color:#34d399; }
/* rozbłysk zwycięstwa */
#winRays { position:fixed; inset:0; z-index:49; pointer-events:none; display:none;
  background:radial-gradient(circle at 50% 45%, rgba(251,191,36,.32), transparent 42%),
  repeating-conic-gradient(from 0deg at 50% 45%, rgba(251,191,36,.13) 0deg 9deg, transparent 9deg 24deg); }
#winRays.go { display:block; animation:raysspin 1.8s ease-out forwards; }
@keyframes raysspin { 0%{ opacity:0; transform:scale(.6) rotate(0deg);} 25%{opacity:1;} 100%{ opacity:0; transform:scale(1.25) rotate(28deg);} }

/* ============ TOASTS ============ */
#toasts { position:fixed; top:2vh; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:rgba(14,20,36,.94); border:1px solid rgba(139,92,246,.45); color:var(--txt); padding:12px 18px; border-radius:14px;
  display:flex; gap:14px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.6); animation:toastin .3s; font-size:14px; }
.toast.error { border-color:rgba(255,59,92,.5); }
@keyframes toastin { from{opacity:0; transform:translateY(-10px)} }

/* ============ WHEEL OF FATE ============ */
#wheelOverlay { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(4,6,12,.82); opacity:0; pointer-events:none; transition:opacity .6s; backdrop-filter:blur(8px); }
#wheelOverlay.show { opacity:1; pointer-events:auto; }
.wheel-title { color:var(--danger-bright); font-size:26px; letter-spacing:9px; text-transform:uppercase; font-weight:800; margin-bottom:4vh;
  text-shadow:0 0 26px rgba(255,59,92,.6); animation:pulse-red 1.4s infinite; }
.wheel-wrap { position:relative; width:min(64vmin,420px); height:min(64vmin,420px); }
#wheelSvg { width:100%; height:100%; filter:drop-shadow(0 0 50px rgba(139,92,246,.25)) drop-shadow(0 20px 50px rgba(0,0,0,.9)); }
#wheelSpinner { transform-origin:200px 200px; }
.wheel-pointer { position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:0; height:0;
  border-left:15px solid transparent; border-right:15px solid transparent; border-top:26px solid var(--cyan-bright);
  filter:drop-shadow(0 0 12px rgba(103,232,249,.9)); z-index:2; }
.wheel-sub { margin-top:3.5vh; color:var(--txt-dim); font-size:15px; letter-spacing:2px; min-height:24px; font-weight:600; }

/* ============ VERDICT / FLASH ============ */
#verdict { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#verdict span { font-size:min(14vw,104px); font-weight:900; letter-spacing:.1em; opacity:0; transform:scale(2.6) rotate(-4deg); text-align:center; }
#verdict.pop span { animation:verdictpop .9s cubic-bezier(.15,1.3,.4,1) forwards; }
@keyframes verdictpop { 0%{opacity:0; transform:scale(2.6) rotate(-4deg)} 55%{opacity:1; transform:scale(.94) rotate(1deg)} 100%{opacity:1; transform:scale(1)} }
#verdict.truth span { color:var(--ok); text-shadow:0 0 44px rgba(52,211,153,.8), 0 6px 12px #000; }
#verdict.lie span { color:var(--danger-bright); text-shadow:0 0 54px rgba(255,59,92,.9), 0 6px 12px #000; }
#verdict.gold span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 40px rgba(139,92,246,.8)); }
#flash { position:fixed; inset:0; z-index:50; background:#fff; opacity:0; pointer-events:none; }
#flash.go { animation:flashout .5s ease-out; }
@keyframes flashout { 0%{opacity:.8} 100%{opacity:0} }

@media (max-width:720px) {
  .card { width:76px; height:110px; } .card .front .art{font-size:44px}
  .claim-banner .val { font-size:28px; }
  /* Status był przypięty dołem (bottom:33vh) — przy 2–3 liniach na wąskim ekranie rósł w górę
     i wchodził na dolną krawędź stołu. Tu zaczyna się tuż pod stołem (top:47% ± pół wysokości). */
  .status { top:calc(47vh + min(150px,20vh) + 8px); bottom:auto; font-size:13px; line-height:1.3; max-width:92vw; }
  .actions { gap:10px; } .btn { padding:13px 22px; font-size:13px; }
  .opponent svg { width:82px; height:82px; }
  #opponents { gap:6px; top:7.5vh; } .opp { min-width:80px; padding:6px 8px; }
  .opp .nm { font-size:12px; } .opp .meta { font-size:9px; margin-top:1px; }
  .backs { margin-top:4px; } .backs i { width:10px; height:15px; }
  #botHand { top:7.5vh; }
  .score { padding:8px 12px; } .score b { font-size:19px; }
  .chambers { margin-top:5px; gap:4px; } .chamber { width:9px; height:9px; }
  #menu { justify-content:flex-start; padding:70px 14px 20px; }
  .logo { font-size:38px; }
  .logo .thin { letter-spacing:.35em; }
  .menu-grid { display:flex; flex-direction:column; width:100%; }
  .mode-card { padding:16px; border-radius:15px; }
  .mode-card strong { font-size:15px; }
  .mode-card i { width:44px; height:44px; font-size:22px; }
  .side-stack { display:flex; flex-direction:column; }
}

/* ── Standard playing cards (Makao / Piotruś / 31 / Snap / Blef) ── */
.sc { display:inline-flex; flex-direction:column; align-items:center; justify-content:space-between;
  width:62px; height:92px; border-radius:10px; background:#fff; color:#1a1a2e; font-weight:700;
  padding:5px 6px; box-shadow:0 3px 10px rgba(0,0,0,.5); cursor:pointer; user-select:none;
  border:2px solid rgba(255,255,255,.15); transition:transform .15s,box-shadow .15s; flex-shrink:0; }
.sc.red { color:#e63946; }
.sc.sel { transform:translateY(-14px); box-shadow:0 10px 28px rgba(124,58,237,.9); border-color:var(--accent); }
.sc.fdown { background:linear-gradient(135deg,#1e3a5f,#0a1628); cursor:pointer; border:2px solid rgba(124,58,237,.5); }
.sc.fdown .sv,.sc.fdown .ss { color:#7c3aed; }
.sc .sv { font-size:15px; line-height:1; }
.sc .ss { font-size:20px; }
.sc.big { width:82px; height:120px; }
.sc.big .ss { font-size:32px; }
.sc.big .sv { font-size:20px; }
@media(max-width:720px){ .sc{width:48px;height:72px;} .sc .ss{font-size:16px;} .sc .sv{font-size:12px;} .sc.big{width:66px;height:96px;} }
/* card affordances shared by all card modes */
.sc.playable { cursor:pointer; border-color:var(--ok); box-shadow:0 0 0 1.5px var(--ok), 0 10px 22px rgba(52,211,153,.3); transform:translateY(-7px); }
.sc.playable:hover { transform:translateY(-13px) scale(1.07); box-shadow:0 0 0 2px var(--ok), 0 14px 30px rgba(52,211,153,.5); }
.sc.dimmed { opacity:.42; filter:saturate(.4); }
.sc.dealt { animation:cardDeal .32s cubic-bezier(.2,.9,.3,1.2) backwards; }
@keyframes cardDeal { from{opacity:0; transform:translateY(16px) scale(.82)} }
.sc.piotr-alert { border-color:var(--danger); animation:piotrPulse 1.3s ease-in-out infinite; }
@keyframes piotrPulse { 0%,100%{box-shadow:0 0 0 1.5px var(--danger),0 3px 10px rgba(0,0,0,.5)} 50%{box-shadow:0 0 0 2px var(--danger),0 0 24px rgba(255,59,92,.8)} }
/* stacked pile look (Snap / Blef) */
.pile-stack { position:relative; display:inline-block; }
.pile-stack::before, .pile-stack::after { content:''; position:absolute; inset:0; border-radius:10px;
  background:#fff; border:2px solid rgba(255,255,255,.15); z-index:-1; }
.pile-stack::before { transform:rotate(-4deg) translate(-3px,2px); background:#e8ecf7; }
.pile-stack::after  { transform:rotate(3deg) translate(3px,3px); background:#dde3f2; }
.pile-stack.empty::before, .pile-stack.empty::after { display:none; }
/* rank chips (Blef) */
.rank-row { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; max-width:min(92vw,520px); }
.rank-chip { min-width:34px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  color:var(--txt); font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:all .13s; }
.rank-chip:hover { border-color:var(--cyan); background:rgba(34,211,238,.12); }
.rank-chip.on { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(139,92,246,.45); transform:translateY(-2px); }
/* claim banner (Blef) */
.claim-box { display:flex; align-items:center; gap:12px; }
.claim-box .cb-card { width:44px; height:62px; border-radius:8px; background:linear-gradient(160deg,#141b30,#0c1122);
  border:1.5px solid rgba(139,92,246,.55); display:grid; place-items:center; font-size:19px; font-weight:900; color:var(--vio-bright); }
/* points chip (31) */
.pts-chip { display:inline-flex; align-items:center; gap:8px; background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.4);
  border-radius:999px; padding:7px 16px; color:var(--txt); font-size:13px; font-weight:700; }
.pts-chip b { font-size:19px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* reveal panel (31) */
.tj-reveal { background:rgba(14,20,36,.92); border:1px solid rgba(139,92,246,.4); border-radius:14px; padding:12px 18px;
  display:inline-flex; flex-direction:column; gap:6px; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.tj-reveal .tr-row { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--txt); }
.tj-reveal .tr-row.lo { color:var(--danger-bright); font-weight:800; }
.tj-reveal .tr-row b { min-width:90px; text-align:left; }

/* ── New game overlays ── */
.ng { display:none; position:fixed; inset:0; z-index:10; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(34,211,238,.10), transparent 46%),
    radial-gradient(ellipse at 50% 108%, rgba(139,92,246,.12), transparent 46%),
    linear-gradient(180deg,#0b1020,#080b16); }
.ng.show { display:flex; }
/* content sits in a centred column that clears the fixed header */
.ng > .ng-body, .ng > div:not(.ng-top):not(.ng-ov) { width:100%; }
.ng-top { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:12px; padding:12px 18px; z-index:3;
  background:linear-gradient(180deg, rgba(8,11,22,.94), rgba(8,11,22,.55) 68%, transparent); backdrop-filter:blur(9px); }
.ng-exit { flex:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:var(--txt);
  border-radius:10px; padding:8px 13px; font-size:12px; font-weight:800; cursor:pointer; font-family:inherit; letter-spacing:.5px; transition:all .18s; }
.ng-exit:hover { border-color:var(--cyan); background:rgba(34,211,238,.14); }
.ng-exit::before { content:'‹ '; }
.ng-players { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; flex:1; }
.ng-player { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:7px 14px 7px 7px; min-width:104px; position:relative; transition:all .25s; }
.ng-player .pav { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:15px; font-weight:800; color:#fff; flex:none;
  background:linear-gradient(135deg,var(--vio),var(--cyan)); }
.ng-player .pmeta { text-align:left; line-height:1.25; min-width:0; }
.ng-player .pnm { font-weight:700; font-size:13px; color:var(--txt); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.ng-player .psub { font-size:11px; color:var(--txt-dim); white-space:nowrap; }
.ng-player.turn { border-color:var(--cyan); background:rgba(34,211,238,.12); box-shadow:0 0 22px rgba(34,211,238,.28); }
.ng-player.turn .pav { animation:ngTurnPulse 1.5s ease-in-out infinite; }
@keyframes ngTurnPulse { 0%,100%{box-shadow:0 0 0 rgba(34,211,238,.6)} 50%{box-shadow:0 0 16px rgba(34,211,238,.95)} }
.ng-player.dead { opacity:.4; filter:grayscale(1); }
.ng-player .youtag { position:absolute; top:-7px; right:9px; font-size:8px; letter-spacing:1px; background:var(--cyan); color:#04121a;
  font-weight:900; padding:1px 6px; border-radius:6px; }
.ng-hand { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:8px; max-width:min(96vw,760px); margin:0 auto; }
.ng-center { display:flex; gap:24px; align-items:center; justify-content:center; }
.ng-label { font-size:12px; color:var(--txt-dim); text-align:center; margin-top:6px; letter-spacing:.5px; }
.ng-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ng-info { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 18px; font-size:14px; text-align:center; min-width:140px; }
.ng-info:empty { display:none; }
/* a big, always-visible status line so it's never unclear whose move it is / what happened */
.ng-status { font-size:15px; color:var(--txt); text-align:center; min-height:22px; letter-spacing:.3px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:9px 20px; }
.ng-status.act { border-color:var(--cyan); color:var(--cyan-bright); box-shadow:0 0 18px rgba(34,211,238,.22); }
/* Telefon: nagłówek gry zawijał się w 2–4 rzędy (każdy gracz osobno, status jako wielkie koło)
   i przykrywał planszę, bo gry liczą z nagłówkiem w jednym rzędzie. Tu zostaje jeden rząd:
   gracze przewijają się w poziomie, status to zwarty prostokąt z maks. dwiema liniami. */
@media(max-width:600px){
  .ng-top { gap:8px; padding:8px 10px; }
  .ng-exit { padding:7px 10px; }
  .ng-players { flex-wrap:nowrap; justify-content:flex-start; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:none;
    padding-top:8px; margin-top:-8px; }
  .ng-players::-webkit-scrollbar { display:none; }
  .ng-player { flex:none; min-width:0; gap:6px; padding:4px 9px 4px 4px; border-radius:11px; }
  .ng-player .pav { width:26px; height:26px; border-radius:8px; font-size:12px; }
  .ng-player .pnm { max-width:78px; font-size:12px; }
  .ng-player .psub { font-size:10px; }
  .ng-status { flex:none; max-width:38vw; min-height:0; padding:5px 10px; border-radius:12px; font-size:11.5px; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ng-status:empty,.ng-status[hidden] { display:none; }
}
.snap-btn { font-size:22px; padding:16px 40px; border-radius:20px; background:linear-gradient(135deg,#7c3aed,#2563eb); color:#fff; border:none; cursor:pointer; font-weight:800; letter-spacing:1px; transition:transform .1s,box-shadow .15s; box-shadow:0 4px 20px rgba(124,58,237,.5); }
.snap-btn:active { transform:scale(.95); }
.snap-btn.pulse { animation:snapPulse .35s ease infinite alternate; }
@keyframes snapPulse { from{box-shadow:0 4px 20px rgba(34,211,238,.6);} to{box-shadow:0 4px 50px rgba(34,211,238,1),0 0 70px rgba(34,211,238,.6);} }
.snap-btn:disabled { opacity:.35; cursor:default; animation:none; }
.cheat-rank-sel { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:6px 10px; color:#fff; font-size:14px; }
.piotrus-slots { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.lives-row { display:flex; gap:5px; }
.life { font-size:16px; }
.life.dead { opacity:.2; }
.ng-ov { position:absolute; inset:0; background:rgba(10,14,26,.9); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:5; border-radius:inherit; }
.ng-ov.hidden { display:none; }






/* ================= LAUNCHER (home) ================= */
#menu.launcher { flex-direction:row; align-items:stretch; justify-content:flex-start; gap:0; padding:0; overflow:hidden; }
#menu.launcher::before, #menu.launcher::after { display:none; }

.lc-rail { width:336px; flex:none; height:100%; overflow-y:auto; padding:18px 16px 22px; display:flex; flex-direction:column; gap:12px;
  background:
    linear-gradient(180deg,rgba(9,13,25,.98),rgba(7,10,20,.99)),
    radial-gradient(ellipse at 20% 0%, rgba(34,211,238,.14), transparent 42%);
  border-right:1px solid rgba(255,255,255,.09); box-shadow:18px 0 54px rgba(0,0,0,.28); backdrop-filter:blur(18px); }
.lc-rail::-webkit-scrollbar{ width:6px; } .lc-rail::-webkit-scrollbar-thumb{ background:rgba(103,232,249,.32); border-radius:3px; }
.lc-brand { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:6px 8px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.lc-logo { font-size:25px; font-weight:900; letter-spacing:.09em;
  background:linear-gradient(115deg,#fff 5%,var(--vio-bright) 45%,var(--cyan-bright) 90%); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:logosheen 6s linear infinite; }
.brand-badge { margin:0; padding:6px 9px; font-size:9px; letter-spacing:1.5px; border-color:rgba(103,232,249,.28); background:rgba(34,211,238,.07); }
.rail-card { position:relative; overflow:hidden; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 14px 36px rgba(0,0,0,.18); }
.rail-card::before { content:''; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,rgba(103,232,249,.35),transparent); opacity:.65; }
.rail-card h3 { display:flex; align-items:center; gap:8px; color:#c8d1e7; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; margin-bottom:12px; font-weight:800; }
.rail-card h3 i { font-style:normal; font-size:14px; width:22px; height:22px; display:grid; place-items:center; border-radius:8px; background:rgba(103,232,249,.08); }
/* ====== PROFIL / KONTO (przebudowany panel) ====== */
.profile-card { padding:16px; background:
  radial-gradient(120% 90% at 12% -12%, rgba(139,92,246,.24), transparent 55%),
  radial-gradient(110% 80% at 105% -5%, rgba(34,211,238,.16), transparent 52%),
  linear-gradient(180deg,rgba(19,26,48,.9),rgba(10,14,28,.94)); }
.profile-card .pc-glow { position:absolute; top:-45%; right:-32%; width:72%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.16),transparent 66%); filter:blur(26px); pointer-events:none; z-index:0; }
.profile-card > *:not(.pc-glow) { position:relative; z-index:1; }
.pc-head { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.profile-card .avatar { width:54px; height:54px; flex:none; border-radius:17px; display:grid; place-items:center;
  font-size:25px; font-weight:900; color:#fff; background:linear-gradient(140deg,var(--vio),var(--cyan));
  border:2px solid rgba(255,255,255,.16); box-shadow:0 10px 26px rgba(139,92,246,.42); cursor:pointer; transition:transform .15s; }
.profile-card .avatar:hover { transform:translateY(-2px) scale(1.04); }
.pc-id { min-width:0; }
.name-display { font-size:20px; font-weight:900; color:#fff; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.name-note { font-size:11px; color:var(--txt-dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.name-note.nudge { color:var(--cyan-bright); font-weight:600; }
.pc-metrics { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:11px; }
.metric { padding:11px 13px; border-radius:13px; background:rgba(7,10,20,.44);
  border:1px solid rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.metric b { display:block; font-size:23px; font-weight:900; line-height:1.05; color:var(--txt); }
.metric > span { display:block; margin-top:3px; font-size:9px; letter-spacing:1.4px; text-transform:uppercase; color:var(--txt-dim); font-weight:800; }
.metric .elo-chip { color:var(--vio-bright); }
.metric #xpLvl { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.xp-row { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.xp-bar { flex:1 1 auto; height:7px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; }
.xp-bar i { display:block; height:100%; width:0%; border-radius:5px; background:var(--grad); box-shadow:0 0 8px rgba(139,92,246,.6); transition:width .6s cubic-bezier(.2,.8,.3,1); }
.xp-num { flex:none; font-size:10px; color:var(--txt-dim); letter-spacing:.5px; font-weight:700; }
.pc-code-wrap { margin-bottom:13px; }
.pc-code-lbl { display:block; font-size:9px; letter-spacing:1.6px; text-transform:uppercase; color:var(--txt-dim); font-weight:800; margin-bottom:5px; }
.pc-code { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer;
  padding:11px; border-radius:12px; font-size:19px; font-weight:900; letter-spacing:5px; color:var(--cyan-bright);
  background:rgba(34,211,238,.09); border:1px solid rgba(34,211,238,.26); transition:.15s; }
.pc-code::after { content:'📋'; font-size:13px; letter-spacing:0; opacity:.65; }
.pc-code:hover { background:rgba(34,211,238,.16); border-color:rgba(34,211,238,.5); }
.ach-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.ach-badge { width:29px; height:29px; display:grid; place-items:center; font-size:15px; border-radius:9px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); opacity:.28; filter:grayscale(1); cursor:default; }
.ach-badge.got { opacity:1; filter:none; background:rgba(139,92,246,.18); border-color:rgba(139,92,246,.5); box-shadow:0 0 10px rgba(139,92,246,.3); }
.pc-account { border-top:1px solid rgba(255,255,255,.08); padding-top:13px; }
.acc-status { font-size:12px; font-weight:700; color:var(--txt-dim); margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-form { display:flex; flex-direction:column; gap:8px; }
.acc-form .input { margin:0; }
.acc-btns { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:2px; }
.acc-btns .btn { margin:0; }

/* ── open public tables on the home page ── */
.open-wrap { flex:none; margin-bottom:22px; }
.open-wrap.hidden { display:none; }
.open-head { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--txt); margin:0 4px 10px; }
.open-head .pulse-dot { width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok);
  animation:eyeglow 1.6s ease-in-out infinite; }
.open-list { display:flex; gap:10px; flex-wrap:wrap; }
.open-row { display:flex; align-items:center; gap:12px; background:rgba(14,20,36,.7); border:1px solid rgba(52,211,153,.25);
  border-radius:14px; padding:10px 14px; }
.open-row .oi { font-size:22px; }
.open-row .om { line-height:1.3; }
.open-row .og { color:var(--txt); font-weight:800; font-size:13.5px; }
.open-row .oh { color:var(--txt-dim); font-size:11px; }
.open-row .btn { padding:8px 16px; font-size:12px; }
.rail-scroll { margin-top:10px; max-height:25vh; overflow-y:auto; padding-right:2px; }
.rail-scroll::-webkit-scrollbar,.leader-list::-webkit-scrollbar { width:5px; }
.rail-scroll::-webkit-scrollbar-thumb,.leader-list::-webkit-scrollbar-thumb { background:rgba(139,92,246,.34); border-radius:3px; }
.rail-card .row { display:flex; gap:8px; margin-top:10px; align-items:center; }
.rail-card .row .input { flex:1; width:auto; min-width:0; height:40px; }
.rail-card .row .btn { flex:none; height:40px; padding:0 14px; }
.rail-scroll .friend-row { border-bottom:none; border-radius:11px; padding:9px 10px; margin-bottom:5px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.055); transition:background .15s,border-color .15s; }
.rail-scroll .friend-row:hover { background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.16); }
.rail-scroll .friend-row .mini-btn { padding:3px 7px; font-size:11px; }
.friends-empty { display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  color:var(--txt-dim); font-size:12.5px; padding:18px 8px; border:1px dashed rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.025); }
.friends-empty i { font-style:normal; font-size:26px; opacity:.55; }
.stat-grid { gap:8px; margin:2px 0 13px; }
.stat-box { border-color:rgba(255,255,255,.085); background:rgba(7,10,20,.38); padding:11px 7px; border-radius:11px; }
.stat-box b { font-size:22px; }
.leader-list { max-height:24vh; padding-right:2px; }
.leader-row { grid-template-columns:32px minmax(0,1fr) auto; border-bottom:none; border-radius:10px; padding:8px 9px; background:rgba(255,255,255,.032); }
.leader-row .place { color:var(--cyan-bright); }
.hist-list { display:flex; flex-direction:column; gap:5px; max-height:20vh; overflow-y:auto; padding-right:2px; }
.hist-list::-webkit-scrollbar { width:5px; } .hist-list::-webkit-scrollbar-thumb { background:rgba(139,92,246,.34); border-radius:3px; }
.hist-row { display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; align-items:center;
  border-radius:10px; padding:7px 9px; background:rgba(255,255,255,.032); font-size:12px; color:var(--txt); }
.hist-row .hico { font-size:15px; text-align:center; }
.hist-row .hmeta { min-width:0; }
.hist-row .hgame { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-row .hvs { color:var(--txt-dim); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-row .hres { font-weight:900; font-size:11px; letter-spacing:.5px; border-radius:7px; padding:3px 8px; }
.hist-row .hres.w { color:#04140c; background:var(--ok); }
.hist-row .hres.l { color:#fff; background:rgba(255,59,92,.65); }
.hist-row .hres.d { color:var(--txt-dim); background:rgba(255,255,255,.09); }
.hist-empty { color:var(--txt-dim); font-size:12px; padding:8px 2px; }

.lc-main { flex:1; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column; padding:22px 26px 30px; }
.lc-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.lc-tagline { color:var(--txt-dim); font-size:13px; letter-spacing:.5em; text-transform:uppercase; font-weight:600; }
.lc-top-actions { display:flex; align-items:center; gap:10px; }

/* ── hero banner ── */
.hero-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:18px; margin-bottom:28px; }
.hero { position:relative; flex:none; overflow:hidden; border-radius:26px; padding:38px 40px 34px; margin-bottom:0;
  background:
    radial-gradient(ellipse at 85% -20%, rgba(139,92,246,.35), transparent 55%),
    radial-gradient(ellipse at -10% 120%, rgba(34,211,238,.22), transparent 50%),
    linear-gradient(160deg, rgba(20,28,52,.92), rgba(10,14,28,.94));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07); }
.hero::before { content:'♠'; position:absolute; right:-16px; top:-52px; font-size:230px; font-weight:900;
  color:rgba(139,92,246,.10); transform:rotate(14deg); pointer-events:none; }
.hero::after { content:'♦'; position:absolute; right:150px; bottom:-70px; font-size:180px; font-weight:900;
  color:rgba(34,211,238,.07); transform:rotate(-10deg); pointer-events:none; }
.hero-inner { position:relative; z-index:2; max-width:640px; }
.hero h1 { font-size:clamp(26px,3.2vw,42px); font-weight:900; line-height:1.12; letter-spacing:-.5px; color:var(--txt); }
.hero h1 .hl { background:linear-gradient(100deg,var(--vio-bright) 20%,var(--cyan-bright) 45%,#ff6b85 70%,var(--vio-bright) 95%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:hlsweep 5.5s linear infinite; }
@keyframes hlsweep { to{background-position:-280% 0} }
.hero p { margin-top:12px; color:var(--txt-dim); font-size:15px; line-height:1.65; max-width:520px; }
.hero-stats { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.hero-stats span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--txt-dim);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:999px; padding:7px 14px; }
.hero-stats b { color:var(--txt); font-weight:700; }

/* fanned playing cards on the hero's right — anchored to the bottom edge so the arc never clips */
.hero-fan { position:absolute; right:26px; bottom:-38px; width:330px; height:290px; z-index:1; pointer-events:none;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.45)); }
.hero-fan i { --r:0deg; position:absolute; left:50%; bottom:0; width:98px; height:140px; margin-left:-49px;
  border-radius:12px; background:linear-gradient(168deg,#fbfcff 0%,#e6ebf8 70%,#d5ddf0 100%);
  border:1px solid rgba(255,255,255,.75); box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 #fff;
  color:#141b30; font-style:normal; font-weight:900; font-size:21px; line-height:1;
  padding:9px 0 0 11px; transform-origin:50% 165%; transform:rotate(var(--r));
  backface-visibility:hidden; }
.hero-fan i::before { content:attr(data-s); position:absolute; left:11px; top:32px; font-size:16px; } /* suit sits under the rank, classic corner */
.hero-fan i::after { content:attr(data-s); position:absolute; left:55%; top:58%; transform:translate(-50%,-50%); font-size:52px; opacity:.92; }
.hero-fan i[data-s="♥"], .hero-fan i[data-s="♦"] { color:#e11d48; }
.hero-fan i:nth-child(1){ --r:-26deg; z-index:1 }
.hero-fan i:nth-child(2){ --r:-13deg; z-index:2 }
.hero-fan i:nth-child(3){ --r:0deg;   z-index:3 }
.hero-fan i:nth-child(4){ --r:13deg;  z-index:4 }
.hero-fan i:nth-child(5){ --r:26deg;  z-index:5 }
@media(max-width:1150px){ .hero-fan { display:none; } .hero-inner { max-width:none; } }

/* drifting suit glyphs behind the whole launcher */
.float-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
#menu.launcher .lc-rail, #menu.launcher .lc-main { position:relative; z-index:1; }
.float-bg s { position:absolute; text-decoration:none; font-weight:900; opacity:.05; animation:drift 26s ease-in-out infinite alternate; }
.float-bg s:nth-child(1){ left:6%;  top:12%; font-size:120px; color:#a78bfa; animation-duration:31s }
.float-bg s:nth-child(2){ left:30%; top:64%; font-size:90px;  color:#ff6b85; animation-duration:24s; animation-delay:-6s }
.float-bg s:nth-child(3){ left:52%; top:18%; font-size:150px; color:#67e8f9; animation-duration:37s; animation-delay:-14s }
.float-bg s:nth-child(4){ left:72%; top:70%; font-size:110px; color:#a78bfa; animation-duration:28s; animation-delay:-3s }
.float-bg s:nth-child(5){ left:86%; top:26%; font-size:95px;  color:#67e8f9; animation-duration:22s; animation-delay:-10s }
.float-bg s:nth-child(6){ left:16%; top:82%; font-size:130px; color:#a78bfa; animation-duration:34s; animation-delay:-18s }
.float-bg s:nth-child(7){ left:44%; top:88%; font-size:80px;  color:#ff6b85; animation-duration:26s; animation-delay:-8s }
.float-bg s:nth-child(8){ left:92%; top:82%; font-size:105px; color:#67e8f9; animation-duration:30s; animation-delay:-20s }
@keyframes drift { 0%{transform:translate(0,0) rotate(-8deg)} 100%{transform:translate(46px,-40px) rotate(10deg)} }
.hero-panels { display:block; margin-top:24px; }
.hero-panels .hero-join { margin-top:0; min-width:0; width:100%; }
.hero-join { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:14px; margin-top:24px; padding:18px 20px;
  border-radius:16px; background:linear-gradient(150deg,rgba(34,211,238,.11),rgba(7,10,20,.6)); border:1px solid rgba(34,211,238,.32); width:100%; }
/* osobny kafelek party (FACEIT-style): opis + tworzenie + aktywni znajomi + dodawanie po kodzie */
.party-card { position:relative; isolation:isolate; overflow:hidden; min-width:0; display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:20px;
  background:linear-gradient(145deg,rgba(80,48,170,.55),rgba(17,23,42,.94) 52%,rgba(8,12,25,.96)); border:1px solid rgba(167,139,250,.58);
  box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 48px rgba(139,92,246,.22),inset 0 1px 0 rgba(255,255,255,.13); }
.party-card::before{ content:''; position:absolute; z-index:-1; width:320px; height:320px; right:-120px; top:-155px; border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.28),rgba(139,92,246,.12) 45%,transparent 70%); filter:blur(3px); }
.party-card::after{ content:'♠'; position:absolute; z-index:-1; right:24px; bottom:-42px; color:rgba(255,255,255,.035); font-size:190px; font-weight:900; transform:rotate(14deg); }
.hero-party { min-height:300px; padding:38px 34px 32px; border-radius:28px; justify-content:center; }
.hero-party .pc-head b { font-size:25px; letter-spacing:.2px; }
.hero-party .pc-head span { max-width:520px; font-size:13.5px; line-height:1.5; }
.pc-head { display:flex; gap:11px; align-items:flex-start; }
.pc-head i { flex:none; width:58px; height:58px; display:grid; place-items:center; font-style:normal; font-size:29px; line-height:1; border-radius:18px;
  background:linear-gradient(135deg,rgba(139,92,246,.9),rgba(34,211,238,.72)); border:1px solid rgba(255,255,255,.24); box-shadow:0 12px 32px rgba(34,211,238,.18),inset 0 1px 0 rgba(255,255,255,.28); }
.pc-head b { display:block; font-size:15px; color:var(--txt); letter-spacing:.5px; }
.pc-head span { display:block; font-size:11.5px; color:var(--txt-dim); line-height:1.4; margin-top:3px; }
.party-card > .btn { position:relative; overflow:hidden; width:100%; min-height:56px; padding:15px 20px; border:0; border-radius:16px; font-size:16px; font-weight:900; letter-spacing:.3px;
  background:linear-gradient(115deg,#7c3aed,#8b5cf6 44%,#0891b2); box-shadow:0 14px 30px rgba(91,33,182,.38),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .18s,box-shadow .18s; }
.party-card > .btn::after{ content:''; position:absolute; inset:-70% auto -70% -35%; width:24%; transform:rotate(18deg); background:rgba(255,255,255,.24); filter:blur(5px); transition:left .45s; }
.party-card > .btn:hover{ transform:translateY(-3px); box-shadow:0 20px 38px rgba(91,33,182,.48),0 0 26px rgba(34,211,238,.2); }
.party-card > .btn:hover::after{ left:115%; }
.party-perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.party-perks span{ padding:8px 9px; border-radius:11px; text-align:center; color:rgba(230,234,245,.88); font-size:10.5px; font-weight:800; letter-spacing:.3px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); }
.pc-sub { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--txt-dim); font-weight:800; margin-top:2px; }
.pc-friends { display:flex; flex-wrap:wrap; gap:7px; min-height:44px; align-items:center; padding:9px 11px; border-radius:13px; background:rgba(3,7,18,.28); border:1px solid rgba(255,255,255,.07); }
.pc-empty { font-size:11.5px; color:var(--txt-dim); }
.pc-friend { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; color:var(--txt); }
.pc-friend .dot { width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 7px rgba(52,211,153,.8); flex:none; }
@media(max-width:620px){ .hero-party{ min-height:270px; padding:26px 20px; }.hero-party .pc-head b{font-size:21px}.pc-head i{width:50px;height:50px;border-radius:15px}.party-perks{grid-template-columns:1fr}.party-perks span{padding:6px} }
.hero-join-lbl { display:flex; align-items:flex-start; gap:9px; font-size:15px; font-weight:800; color:var(--txt); }
.hero-join-lbl i { font-style:normal; font-size:20px; }
.hero-join-lbl small { display:block; margin-top:3px; color:var(--txt-dim); font-size:11.5px; font-weight:500; line-height:1.4; }
.join-bar-fields { display:flex; gap:10px; align-items:center; }
.join-bar-fields .input { flex:1 1 auto; width:auto; min-width:0; margin:0; text-align:center; font-size:22px; font-weight:800;
  letter-spacing:8px; text-transform:uppercase; padding:10px 14px; color:var(--cyan-bright);
  border-color:rgba(34,211,238,.5); background:rgba(7,10,20,.6); }
.join-bar-fields .input::placeholder { letter-spacing:4px; font-size:14px; color:var(--txt-dim); }
.join-bar-fields .btn { padding:12px 26px; font-size:15px; }

/* ── library section header ── */
.lib-head { display:flex; flex:none; align-items:baseline; justify-content:space-between; gap:14px; margin:2px 4px 18px; }
.lib-head h2 { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--txt); }
.lib-head h2 i { font-style:normal; font-size:19px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lib-count { color:var(--txt-dim); font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; }
.lc-footer { flex:none; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  margin-top:34px; padding:18px 6px 4px; border-top:1px solid rgba(255,255,255,.06);
  color:var(--txt); font-size:12.5px; letter-spacing:.5px; }
.lc-footer .fdim { color:var(--txt-dim); font-size:11.5px; }
.lc-footer .foot-link { color:var(--txt-dim); text-decoration:underline; text-underline-offset:2px; }
.lc-footer .foot-link:hover { color:var(--txt); }

.pc-profile-link { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px;
  padding:9px 12px; border-radius:11px; text-decoration:none; font-size:12.5px; font-weight:800; letter-spacing:.4px;
  color:var(--txt); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); transition:.15s; }
.pc-profile-link:hover { border-color:var(--cyan); color:var(--cyan-bright); background:rgba(34,211,238,.08); }

.cookie-bar { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:900;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center;
  max-width:min(640px,calc(100vw - 24px)); padding:12px 16px; border-radius:14px;
  background:rgba(14,20,36,.96); border:1px solid rgba(139,92,246,.35);
  box-shadow:0 12px 40px rgba(0,0,0,.55); font-size:12.5px; color:var(--txt-dim); line-height:1.5; }
.cookie-bar a { color:var(--cyan-bright); }
.cookie-bar button { background:var(--grad); color:#fff; border:none; border-radius:9px;
  padding:7px 16px; font-weight:700; cursor:pointer; font-size:12.5px; font-family:inherit; }
.cookie-bar .cookie-secondary { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--txt); }
.cookie-bar.hidden { display:none; }

.lc-lib { display:grid; flex:none; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:20px; align-content:start; perspective:1100px; }
@property --ga { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.game-card { position:relative; border-radius:20px; overflow:hidden; background:rgba(14,20,36,.72);
  text-decoration:none; color:inherit;
  border:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; will-change:transform;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s, border-color .3s;
  animation:cardIn .55s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes cardIn { from{opacity:0; transform:translateY(18px) scale(.97)} }
.game-card::after { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--ga), transparent 0%, rgba(139,92,246,.9) 12%, rgba(34,211,238,.9) 26%, transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s; animation:gaRotate 2.6s linear infinite; }
@keyframes gaRotate { to{--ga:360deg} }
.game-card:hover::after { opacity:1; }
.game-card:hover { transform:translateY(-6px); border-color:rgba(34,211,238,.3);
  box-shadow:0 26px 54px rgba(0,0,0,.55), 0 0 46px rgba(139,92,246,.16); }
.gc-cover { height:128px; display:grid; place-items:center; position:relative; overflow:hidden; }
.gc-cover::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 75% 12%,rgba(255,255,255,.28),transparent 55%); }
.gc-cover::after { content:''; position:absolute; left:-70%; top:0; width:45%; height:100%; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transition:left .45s ease; }
.game-card:hover .gc-cover::after { left:135%; }
.gc-glyph { font-size:62px; font-weight:900; color:#fff; text-shadow:0 8px 26px rgba(0,0,0,.5); z-index:1; transition:transform .28s; }
.game-card:hover .gc-glyph { transform:scale(1.14) rotate(-4deg); }
.gc-body { padding:16px 17px 17px; display:flex; flex-direction:column; gap:5px; flex:1; }
.gc-title { font-size:19px; font-weight:800; letter-spacing:.4px; color:var(--txt); }
.gc-tag { color:var(--txt-dim); font-size:12.5px; line-height:1.5; min-height:36px; }
.gc-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:13px; }
.gc-btn { flex:1; min-width:0; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.055); color:var(--txt);
  border-radius:12px; padding:10px 12px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .15s,border-color .15s,transform .12s,box-shadow .15s; font-family:inherit; }
.gc-btn:hover:not(:disabled) { background:rgba(34,211,238,.14); border-color:var(--cyan); }
.gc-btn:active:not(:disabled) { transform:scale(.95); }
.gc-btn.primary { background:linear-gradient(135deg,var(--vio),var(--cyan)); border:none; color:#fff;
  box-shadow:0 6px 18px rgba(139,92,246,.32); }
.gc-btn.primary:hover:not(:disabled) { filter:brightness(1.12); box-shadow:0 8px 24px rgba(139,92,246,.5); }
.gc-btn:disabled { opacity:.4; cursor:default; }

@media(max-width:820px){
  #menu.launcher { flex-direction:column; overflow-y:auto; }
  .lc-rail { width:100%; height:auto; flex-direction:column; border-right:none; border-bottom:1px solid rgba(255,255,255,.07); order:2; }
  .lc-main { height:auto; padding:18px 16px 26px; order:1; flex:none; overflow:visible; }
  .lc-rail { flex:none; overflow:visible; }
  .lc-lib { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .gc-cover { height:88px; } .gc-glyph { font-size:40px; }
  .gc-actions { gap:6px; } .gc-btn { flex:1 1 auto; min-width:72px; padding:9px 8px; font-size:12px; }
  .gc-title { font-size:16px; } .gc-tag { font-size:11px; min-height:0; }
  .hero { padding:24px 20px 22px; border-radius:20px; margin-bottom:20px; }
  .hero-layout { grid-template-columns:1fr; gap:10px; margin-bottom:20px; }
  .hero { margin-bottom:0; }
  .hero-party { padding:24px 20px 22px; border-radius:20px; order:-1; }
  .hero::before { font-size:150px; right:-30px; }
  .hero p { font-size:13.5px; }
  .hero-panels { grid-template-columns:1fr; gap:10px; }
  .hero-join { width:100%; flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px; }
  .join-bar-fields { justify-content:space-between; width:100%; }
  .join-bar-fields .input { flex:1; width:auto; min-width:0; }
  .lib-head { margin-bottom:12px; }
  /* stopka przeniesiona skryptem na koniec #menu — ma być pod railą (profil/statystyki), na samym dole */
  #menu.launcher > .lc-footer { order:3; width:100%; margin-top:0; padding:16px 16px 26px; }
}

/* telefony i "reduce motion": wyłącz wieczne animacje dużych, rozmytych warstw — główne źródło grzania się urządzeń */
@media (pointer:coarse), (max-width:720px), (prefers-reduced-motion:reduce) {
  .aurora { animation:none; filter:blur(40px); }
  .board { animation:none; }
  .float-bg s { animation:none; }
  .logo, .lc-logo, .hero h1 .hl { animation:none; }
  .hub-glyph { animation:none; }
  .opponent .eyes { animation:none; }
  /* Rozmywanie wielu dużych warstw jest szczególnie kosztowne na mobilnych GPU. */
  .lc-rail, .lc-topbar, .panel, .overlay, .modal, .feature-badge,
  .gc-topline span, .profile-cover a, .quick-account-panel {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .home-hero-art::before, .ring-two, .home-marquee-track,
  .feature-symbol-art::after, .hc-one, .hc-two, .chip-one,
  .home-eyebrow i { animation:none !important; }
}

/* ============ HOME 2026: editorial game lounge ============ */
#menu.launcher { background:#080b14; background-image:linear-gradient(125deg,#070914 0%,#10142b 48%,#090b16 100%); }
#menu.launcher::before, #menu.launcher::after { display:none; }
/* Statyczne półprzezroczyste kolory zachowują wygląd bez kosztownego
   przeliczania rozmycia przy każdym przewinięciu strony. */
#menu.home-v2 * { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
#menu.home-v2::before, #menu.home-v2::after, #menu.home-v2 .home-orb { display:none !important; }
/* Tryb lekki strony głównej: dekoracyjny zestaw kart 3D tworzył kilka dużych
   warstw GPU. Treść hero zostaje, sama makieta kart nie jest renderowana. */
#menu.home-v2 .home-hero { grid-template-columns:minmax(0,900px); min-height:auto; }
#menu.home-v2 .home-hero-art, #menu.home-v2 .home-marquee { display:none !important; }
#menu.home-v2 .game-card {
  will-change:auto !important;
  content-visibility:auto;
  contain-intrinsic-size:330px;
}
#menu.home-v2 .game-card:hover { transform:none !important; }
#menu.home-v2 .gc-glyph { filter:none !important; }
#menu.launcher .lc-rail { width:300px; padding:24px 16px; border-right:1px solid rgba(255,255,255,.08); background:#0b0f1d; backdrop-filter:none; }
.lc-brand { padding:4px 10px 24px; }
.lc-logo { font-size:29px; letter-spacing:.14em; text-shadow:0 0 28px rgba(103,232,249,.25); }
.brand-badge { margin-top:7px; color:#b9c3dc; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); letter-spacing:2px; }
.rail-card { border-radius:18px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); box-shadow:none; }
.profile-card { background:linear-gradient(145deg,rgba(124,58,237,.23),rgba(18,24,47,.8) 58%,rgba(34,211,238,.08)); }
.pc-glow { opacity:.6; }
.lc-main { padding:28px clamp(22px,4vw,64px) 44px; scrollbar-color:rgba(139,92,246,.5) transparent; }
.lc-topbar { max-width:1440px; width:100%; margin:0 auto 26px; }
.lc-tagline { display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.3em; color:#aeb8d1; }
.lc-tagline::before { content:''; width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 14px #34d399; }
.lc-top-actions .mini-btn { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--txt); border-radius:12px; width:38px; height:38px; }
.hero-layout { max-width:1440px; width:100%; margin:0 auto 38px; grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr); gap:22px; }
.hero { min-height:390px; display:flex; align-items:center; padding:48px clamp(28px,4vw,62px); border-radius:30px; border-color:rgba(255,255,255,.12); background:radial-gradient(circle at 88% 0%,rgba(70,61,255,.58),transparent 39%),radial-gradient(circle at 8% 100%,rgba(0,211,255,.20),transparent 44%),linear-gradient(135deg,#19134a 0%,#121b38 46%,#0c1021 100%); box-shadow:0 35px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.13); }
.hero h1 { font-size:clamp(34px,4vw,58px); max-width:690px; letter-spacing:-.045em; line-height:1.02; }
.hero h1 .hl { display:block; margin-top:8px; background:linear-gradient(100deg,#a78bfa,#67e8f9 48%,#f0abfc); background-size:200% 100%; }
.hero p { max-width:550px; margin-top:20px; font-size:16px; color:#c0c8dd; }
.hero-stats { margin-top:26px; }
.hero-stats span { padding:9px 13px; background:rgba(4,8,24,.3); border-color:rgba(255,255,255,.14); color:#c0c8dd; }
.hero-stats b { color:#f6f8ff; }
.hero-fan { right:24px; bottom:-22px; transform:scale(1.08); transform-origin:bottom right; }
.hero-join { margin-top:26px; max-width:520px; padding:13px 15px; border-radius:15px; background:rgba(3,8,24,.34); border-color:rgba(103,232,249,.28); }
.hero-join-lbl { font-size:13px; }
.join-bar-fields .btn { border-radius:12px; background:linear-gradient(120deg,#8b5cf6,#06b6d4); }
.party-card { border-radius:30px; border-color:rgba(167,139,250,.35); background:linear-gradient(150deg,rgba(63,37,135,.72),rgba(14,19,39,.96) 57%,rgba(10,14,28,.96)); }
.hero-party { min-height:390px; padding:34px 28px; }
.hero-party .pc-head b { font-size:26px; }
.party-card > .btn { background:linear-gradient(115deg,#a855f7,#6366f1 50%,#06b6d4); }
.open-wrap, .lib-head, .lc-lib { max-width:1440px; width:100%; margin-left:auto; margin-right:auto; }
.open-wrap { padding:15px; border-radius:16px; background:rgba(16,185,129,.055); border:1px solid rgba(52,211,153,.16); }
.lib-head { margin-top:8px; margin-bottom:20px; }
.lib-head h2 { font-size:15px; letter-spacing:.18em; }
.lc-lib { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.game-card { border-radius:18px; background:linear-gradient(155deg,rgba(25,32,57,.94),rgba(12,16,31,.86)); border-color:rgba(255,255,255,.09); }
.game-card:hover { box-shadow:0 24px 45px rgba(0,0,0,.42),0 0 0 1px rgba(103,232,249,.2); }
.gc-cover { height:142px; }
.gc-glyph { font-size:68px; }
.gc-body { padding:15px 16px 16px; }
.gc-title { font-size:18px; }
.gc-btn.primary { border-radius:10px; background:linear-gradient(120deg,#7c3aed,#0891b2); }
.lc-footer { max-width:1440px; width:100%; margin-left:auto; margin-right:auto; }
@media(max-width:980px){ #menu.launcher .lc-rail { width:255px; } .hero-layout { grid-template-columns:1fr; } .hero-party { min-height:0; } }
@media(max-width:820px){ #menu.launcher .lc-rail { width:100%; padding:18px 16px; background:transparent; border:0; } .lc-brand { padding:0 4px 12px; } .lc-main { padding:18px 16px 32px; } .hero { min-height:0; padding:34px 24px; border-radius:24px; } .hero h1 { font-size:clamp(33px,10vw,46px); } .hero-fan { display:none; } .hero-party { border-radius:24px; } .lc-lib { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; } .gc-cover { height:110px; } .gc-glyph { font-size:52px; } }

/* ============ KARCIAK HOME V3 — "Neon Felt": editorial night-table redesign ============ */
#menu.home-v2 {
  --ink:#f4f6fd; --mut:#98a0ba; --dim:#67708d;
  --iris:#8b6cff; --iris-deep:#6e4df0; --aqua:#2fd7e9; --rose:#ff5c8a; --gold:#f2c464; --mint:#4ce0b3;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.14);
  --card:#0b0f1d; --card-2:#0f1428;
  --font-d:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-s:'Instrument Serif',Georgia,serif;
  --pad:max(24px,calc((100vw - 1440px)/2));
  display:block; background:#04060e; color:var(--ink); overflow-y:auto; overflow-x:hidden; padding:0; isolation:isolate;
  font-family:var(--font-d);
}
/* grain + faint dot-matrix, fading out downward */
#menu.home-v2::before { content:''; position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:.5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px);
  background-size:140px 140px, 34px 34px;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 90%); mask-image:linear-gradient(#000 40%,transparent 90%); }
.home-orb { position:fixed; z-index:-2; width:640px; height:640px; border-radius:50%; filter:blur(130px); opacity:.17; pointer-events:none; }
.home-orb-a { top:-320px; left:22%; background:#6e46ff; }
.home-orb-b { top:280px; right:-340px; background:#0fb5d8; opacity:.1; }

/* ── nav: floating glass pill ── */
.home-nav { position:sticky; top:0; z-index:40; height:80px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:0 var(--pad);
  border-bottom:1px solid var(--line); background:rgba(4,6,14,.72); backdrop-filter:blur(26px) saturate(1.5); }
.home-brand { display:flex; align-items:center; gap:13px; width:max-content; color:#fff; text-decoration:none; }
.home-brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; font-size:22px; font-weight:700; font-family:var(--font-d);
  background:conic-gradient(from 210deg,#9f7bff,#5b3fe0 40%,#12aecb 72%,#9f7bff); color:#fff;
  box-shadow:0 12px 30px rgba(110,77,240,.42), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.25);
  transform:rotate(-6deg); transition:transform .25s cubic-bezier(.3,1.6,.4,1); }
.home-brand:hover .home-brand-mark { transform:rotate(4deg) scale(1.06); }
.home-brand b { display:block; font-size:17px; letter-spacing:.22em; font-weight:700; }
.home-brand small { display:block; margin-top:3px; color:var(--dim); font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; }
.home-nav-links { display:flex; align-items:center; gap:4px; padding:5px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.home-nav-link { position:relative; display:block; border:0; border-radius:999px; padding:11px 20px; background:transparent; color:var(--mut);
  font:600 12.5px/1 var(--font-d); letter-spacing:.04em; text-decoration:none; cursor:pointer; transition:.18s; }
.home-nav-link:hover { color:#fff; }
.home-nav-link.active { color:#fff; background:linear-gradient(120deg,rgba(139,108,255,.28),rgba(47,215,233,.14)); box-shadow:inset 0 0 0 1px rgba(150,120,255,.35); }
.home-nav-actions { justify-self:end; display:flex; align-items:center; gap:9px; }
.home-account-btn{height:38px;padding:0 15px;border:1px solid rgba(103,232,249,.28);border-radius:999px;background:rgba(34,211,238,.08);color:var(--ink);font-weight:800;cursor:pointer}.home-account-btn:hover{border-color:var(--cyan);background:rgba(34,211,238,.14)}
.quick-account-panel{position:fixed;z-index:70;top:76px;right:max(18px,calc((100vw - 1200px)/2));width:min(360px,calc(100vw - 28px));padding:22px;border:1px solid rgba(139,92,246,.38);border-radius:22px;background:rgba(12,17,34,.97);box-shadow:0 24px 80px rgba(0,0,0,.48);backdrop-filter:blur(18px)}.quick-account-panel h2{margin:0 34px 6px 0;font:800 22px var(--font-d);color:var(--ink)}.quick-account-panel>p{margin:0 0 17px;color:var(--mut);font-size:13px;line-height:1.55}.quick-account-panel .acc-form{display:grid;gap:10px}.quick-account-panel .acc-btns{display:grid;gap:9px}.quick-account-panel .acc-hint{color:var(--dim);font-size:10px;line-height:1.45}.quick-account-close{position:absolute;right:14px;top:14px;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.05);color:var(--mut);cursor:pointer}.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:14px 0;padding:4px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.03)}.account-tabs button{padding:9px;border:0;border-radius:9px;background:transparent;color:var(--mut);font-weight:700;cursor:pointer}.account-tabs button.active{background:rgba(139,92,246,.24);color:#fff}.guest-account-copy{display:none;padding:18px 22px 0;color:var(--mut);font-size:12px;line-height:1.55}.guest-account-actions{display:none;grid-template-columns:1fr;gap:8px;margin:15px 22px 0}.profile-v2.guest-mode .profile-cover a,.profile-v2.guest-mode .profile-numbers,.profile-v2.guest-mode .profile-progress,.profile-v2.guest-mode .ach-row,.profile-v2.guest-mode .pc-account{display:none}.profile-v2.guest-mode .guest-account-copy{display:block}.profile-v2.guest-mode .guest-account-actions{display:grid}.profile-v2.guest-mode{padding-bottom:22px}
.google-auth-wrap{min-height:44px;display:grid;place-items:center}.google-auth-loading{color:var(--dim);font-size:11px}.account-divider{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:9px;text-transform:uppercase;letter-spacing:.13em}.account-divider::before,.account-divider::after{content:'';height:1px;flex:1;background:var(--line)}
.home-scroll-progress { position:absolute; left:0; right:0; bottom:-1px; height:2px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--iris),var(--aqua) 55%,var(--rose)); box-shadow:0 0 16px rgba(47,215,233,.6); transition:transform .08s linear; }
.home-icon-btn { width:42px; height:42px; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:#dde2f2; font:700 15px var(--font-d); cursor:pointer; transition:.18s; }
.home-icon-btn:hover { border-color:rgba(150,120,255,.6); background:rgba(139,108,255,.14); transform:translateY(-2px); }
.home-avatar-link { text-decoration:none; margin-left:3px; }
.home-avatar-link .avatar { width:42px; height:42px; border-radius:999px; font-size:17px; box-shadow:0 0 0 2px rgba(150,120,255,.35); }
#menu.home-v2 .home-main { width:100%; max-width:none; height:auto; overflow:visible; padding:0 var(--pad) 46px; display:block; }

/* ── hero ── */
.home-hero { position:relative; min-height:460px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); align-items:center; overflow:visible; }
.home-hero::after { content:''; position:absolute; left:-8%; right:-8%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,108,255,.4) 30%,rgba(47,215,233,.35) 70%,transparent); }
.home-hero-copy { position:relative; z-index:3; padding:44px 0 42px; }
.home-eyebrow,.home-kicker { display:inline-flex; align-items:center; gap:10px; color:#b09aff; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-family:var(--font-d); }
.home-eyebrow { padding:9px 14px; border-radius:999px; border:1px solid rgba(150,120,255,.28); background:rgba(139,108,255,.09); }
.home-eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); }
.home-hero h1 { margin-top:26px; max-width:820px; font-family:var(--font-d); font-size:clamp(52px,6.4vw,104px); line-height:.96; letter-spacing:-.055em; font-weight:700; color:var(--ink); text-wrap:balance; }
.home-hero h1 span { display:inline-block; font-family:var(--font-s); font-style:italic; font-weight:400; letter-spacing:-.02em; font-size:1.04em;
  color:transparent; background:linear-gradient(95deg,#b79bff 8%,#6fe3f4 55%,#ff8fb0); -webkit-background-clip:text; background-clip:text;
  padding-right:.08em; }
.home-hero-copy > p { max-width:560px; margin-top:28px; color:var(--mut); font-size:17px; line-height:1.8; font-weight:400; }
.home-hero-actions { display:flex; gap:13px; margin-top:38px; }
.home-cta { min-height:56px; border-radius:999px; padding:0 30px; border:1px solid transparent; color:#fff; font:700 14.5px var(--font-d); letter-spacing:.01em; cursor:pointer; transition:transform .2s, box-shadow .2s, filter .2s; }
.home-cta.primary { position:relative; min-width:195px; display:inline-flex; align-items:center; justify-content:center; gap:14px; overflow:hidden;
  background:linear-gradient(115deg,#9268ff,#6b48f2 52%,#149fc0); box-shadow:0 18px 40px rgba(110,77,240,.35), inset 0 1px 0 rgba(255,255,255,.28); }
.home-cta.primary::after { content:''; position:absolute; left:-80%; top:0; width:50%; height:100%; transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .5s ease; }
.home-cta.primary:hover::after { left:130%; }
.home-cta.primary span { font-size:17px; transition:transform .2s; }
.home-cta.primary:hover span { transform:translateX(4px); }
.home-cta.secondary { background:rgba(255,255,255,.045); border-color:var(--line-2); }
.home-cta.secondary:hover:not(:disabled) { border-color:rgba(150,120,255,.5); background:rgba(139,108,255,.1); }
.home-cta:hover:not(:disabled) { transform:translateY(-3px); }
.home-cta:disabled { opacity:.45; cursor:default; }
.home-proof { display:flex; gap:0; margin-top:46px; width:max-content; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); overflow:hidden; }
.home-proof span { display:flex; flex-direction:column-reverse; gap:5px; padding:15px 26px; color:var(--dim); font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; font-weight:600; border-right:1px solid var(--line); }
.home-proof span:last-child { border-right:0; }
.home-proof b { color:var(--ink); font-size:21px; letter-spacing:-.02em; font-weight:700; font-family:var(--font-d); }

/* hero art: holo table with levitating cards */
.home-hero-art { position:relative; height:100%; min-height:440px; perspective:1300px; }
.home-hero-art::before { content:''; position:absolute; left:50%; top:56%; width:560px; height:560px; transform:translate(-50%,-50%) rotateX(68deg); border-radius:50%;
  background:conic-gradient(from 90deg,rgba(139,108,255,.0),rgba(139,108,255,.35),rgba(47,215,233,.3),rgba(255,92,138,.18),rgba(139,108,255,0));
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63.5%,#000 66%,transparent 67%); mask:radial-gradient(circle,transparent 62%,#000 63.5%,#000 66%,transparent 67%);
  animation:tableSpin 26s linear infinite; }
.home-hero-art::after { content:''; position:absolute; left:50%; top:58%; width:430px; height:150px; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(110,77,240,.28),transparent 65%); filter:blur(22px); }
@keyframes tableSpin { to { transform:translate(-50%,-50%) rotateX(68deg) rotate(360deg); } }
.hero-ring { position:absolute; left:50%; top:56%; border:1px solid rgba(139,108,255,.22); border-radius:50%; transform:translate(-50%,-50%) rotateX(68deg); }
.ring-one { width:640px; height:640px; box-shadow:0 0 90px rgba(110,77,240,.1); }
.ring-two { width:420px; height:420px; border-color:rgba(47,215,233,.22); border-style:dashed; animation:tableSpin 40s linear infinite reverse; }
.hero-card { position:absolute; z-index:2; width:172px; height:246px; border-radius:20px; padding:16px; color:#151a2e;
  background:linear-gradient(160deg,#ffffff 0%,#e8edf9 78%,#d5ddf0 100%); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06), inset 0 1.5px 0 #fff; transform-style:preserve-3d; }
.hero-card::after { content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(139,108,255,.14) 46%,rgba(47,215,233,.12) 54%,transparent 68%); }
.hero-card small { font-size:26px; font-weight:700; font-family:var(--font-d); }
.hero-card b { position:absolute; inset:0; display:grid; place-items:center; font-size:76px; }
.hc-one { left:9%; top:23%; transform:rotate(-18deg) translateZ(-40px); filter:brightness(.92); }
.hc-two { left:36%; top:15%; z-index:3; color:#e02955; transform:rotate(2deg) translateZ(50px); }
.hc-three { left:63%; top:27%; color:#e02955; transform:rotate(19deg) translateZ(-25px); filter:brightness(.95); }
.hero-chip { position:absolute; z-index:4; width:72px; height:72px; display:grid; place-items:center; border-radius:50%;
  border:7px dashed rgba(255,255,255,.4); color:#fff; font-size:21px; font-weight:700; font-family:var(--font-d);
  background:radial-gradient(circle at 34% 28%,#8d68ff,#4c33bd 68%,#2b1e77); box-shadow:0 20px 40px rgba(0,0,0,.4), inset 0 2px 6px rgba(255,255,255,.25); }
.chip-one { left:7%; top:66%; transform:rotate(-18deg); }
.chip-two { right:4%; top:17%; transform:scale(.68) rotate(24deg); background:radial-gradient(circle at 34% 28%,#41e0ef,#0f7f9c 68%,#075064); }
@keyframes heroCardFloat { 0%,100%{margin-top:0} 50%{margin-top:-13px} }
@keyframes heroCardFloatB { 0%,100%{margin-top:0} 50%{margin-top:-8px} }
@keyframes chipOrbit { 0%,100%{translate:0 0; rotate:-18deg} 50%{translate:9px -12px; rotate:-4deg} }

/* ── glyph marquee ── */
.home-marquee { position:relative; margin:0 calc(var(--pad)*-1); padding:20px 0; border-bottom:1px solid var(--line); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.home-marquee-track { display:flex; gap:14px; width:max-content; animation:marquee 46s linear infinite; }
.home-marquee:hover .home-marquee-track { animation-play-state:paused; }
.home-marquee span { display:flex; align-items:center; gap:11px; padding:11px 20px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.028); color:var(--mut); font:600 12px var(--font-d); letter-spacing:.06em; white-space:nowrap; }
.home-marquee span i { font-style:normal; font-size:16px; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ── quick join / party cards ── */
.home-action-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:38px 0; }
/* banner turniejów — widoczny na każdej szerokości (pasek nawigacji chowa się na wąskich ekranach) */
.home-tour-banner { display:flex; align-items:center; gap:18px; margin:26px 0 0; padding:20px 24px; border-radius:22px;
  text-decoration:none; border:1px solid rgba(242,196,100,.28); background:linear-gradient(120deg,rgba(242,196,100,.12),rgba(139,108,255,.12) 60%,rgba(47,215,233,.08));
  transition:.18s; }
.home-tour-banner:hover { transform:translateY(-2px); border-color:rgba(242,196,100,.55); }
.home-tour-banner .htb-icon { font-size:30px; line-height:1; }
.home-tour-banner .htb-copy { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.home-tour-banner .htb-copy b { color:var(--ink); font-size:18px; letter-spacing:.01em; }
.home-tour-banner .htb-copy small { color:var(--mut); font-size:13px; line-height:1.45; }
.home-tour-banner .htb-count { flex:none; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700;
  color:#f2c464; background:rgba(242,196,100,.14); border:1px solid rgba(242,196,100,.35); }
.home-tour-banner .htb-cta { flex:none; color:#fff; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:999px;
  background:linear-gradient(120deg,#8b6cff,#5b3fd4); }
@media(max-width:720px){ .home-tour-banner { flex-wrap:wrap; gap:12px; }
  .home-tour-banner .htb-copy { flex-basis:100%; order:2; } .home-tour-banner .htb-cta { order:3; width:100%; text-align:center; } }
.home-quick-card,.home-party-card,.home-panel { position:relative; min-width:0; border-radius:24px; background:linear-gradient(150deg,var(--card-2),var(--card) 70%); border:1px solid var(--line); }
.home-quick-card::before,.home-party-card::before { content:''; position:absolute; inset:-1px; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,rgba(150,120,255,.5),transparent 34%,transparent 68%,rgba(47,215,233,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.home-quick-card,.home-party-card { min-height:212px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-content:start; padding:26px; overflow:hidden; }
.home-quick-card::after,.home-party-card::after { content:''; position:absolute; width:240px; height:240px; right:-100px; top:-130px; border-radius:50%; background:#0fb5d8; filter:blur(80px); opacity:.13; pointer-events:none; }
.home-party-card::after { background:#8b5cf6; }
.home-card-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; font-size:23px; font-weight:700; }
.home-card-icon.cyan { background:rgba(33,198,226,.12); color:#54e4fb; border:1px solid rgba(77,225,250,.22); box-shadow:0 0 24px rgba(47,215,233,.12); }
.home-card-icon.violet { background:rgba(142,91,255,.13); color:#b8a0ff; border:1px solid rgba(178,148,255,.24); box-shadow:0 0 24px rgba(139,108,255,.14); }
.home-card-copy span { color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.2em; font-weight:700; }
.home-card-copy h2 { margin-top:6px; color:var(--ink); font-family:var(--font-d); font-size:22px; letter-spacing:-.025em; font-weight:700; }
.home-card-copy p { margin-top:7px; color:var(--mut); font-size:13px; line-height:1.6; }
.home-code-form { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:8px; }
.home-code-form .input { height:52px; text-align:center; letter-spacing:.6em; font-weight:700; font-size:18px; border-radius:14px; font-family:var(--font-d); }
.home-code-form .btn { border-radius:14px; padding:0 30px; }
.home-party-card .party-perks { grid-column:1/-1; margin-top:6px; }
.home-party-card .pc-friends { grid-column:1/-1; }

/* ── section headers ── */
.home-section-head,.featured-head,.social-zone-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.home-section-head h2,.featured-head h2,.social-zone-head h2 { margin-top:10px; font-family:var(--font-d); font-weight:700; letter-spacing:-.045em; font-size:clamp(30px,3.6vw,50px); }
.featured-head p,.social-zone-head p { color:var(--dim); font-size:12.5px; max-width:260px; text-align:right; line-height:1.55; }

/* ── featured ── */
.featured-zone { position:relative; padding:60px 0 74px; }
.featured-zone::before { content:''; position:absolute; left:50%; top:46%; z-index:-1; width:76vw; height:430px; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(99,57,210,.13),transparent 68%); filter:blur(30px); }
.featured-grid { display:grid; grid-template-columns:1.42fr .79fr .79fr; gap:16px; }
.feature-game { --mx:50%; --my:50%; position:relative; min-width:0; min-height:400px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:26px;
  cursor:pointer; isolation:isolate; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
  background:radial-gradient(circle at 80% 18%,rgba(255,255,255,.14),transparent 36%),var(--feature-grad,linear-gradient(145deg,#27145c,#0d1427)); }
.feature-game::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(460px circle at var(--mx) var(--my),rgba(255,255,255,.12),transparent 48%); opacity:0; transition:opacity .25s; }
.feature-game::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,7,16,.32),rgba(5,7,16,.05)),repeating-linear-gradient(120deg,transparent 0 34px,rgba(255,255,255,.02) 34px 35px); }
.feature-game:hover { transform:translateY(-8px) scale(1.005); border-color:rgba(160,128,255,.5); box-shadow:0 36px 80px rgba(0,0,0,.42), 0 0 60px rgba(104,69,224,.14); }
.feature-game:hover::before { opacity:1; }
.feature-game:focus-visible { outline:3px solid #68dcf5; outline-offset:4px; }
.feature-tint { position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(6,8,18,.76) 0%,rgba(6,8,18,.42) 50%,rgba(6,8,18,.04) 100%); }
.feature-copy { position:relative; z-index:5; display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:30px; }
.feature-main .feature-copy { max-width:56%; }
.feature-badge { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; color:#c3cbe2; background:rgba(4,7,16,.4); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); font-size:8.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-d); }
.feature-badge.hot { color:#ecd9ff; background:rgba(132,85,236,.22); border-color:rgba(177,137,255,.32); }
.feature-badge.new { color:#b5f5e3; background:rgba(48,205,159,.14); border-color:rgba(94,225,186,.24); }
.feature-badge i { width:6px; height:6px; border-radius:50%; background:#ff7396; box-shadow:0 0 10px #ff7396; }
.feature-copy h3 { margin-top:20px; color:#fff; font-family:var(--font-d); font-weight:700; font-size:clamp(28px,2.8vw,46px); letter-spacing:-.04em; }
.feature-copy p { margin-top:11px; color:#9ba5bd; font-size:13px; line-height:1.65; }
.feature-meta { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; color:#b6bfd4; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.feature-copy button { margin-top:auto; min-width:140px; padding:13px 17px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); color:#fff; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); font:700 11.5px var(--font-d); letter-spacing:.04em; cursor:pointer; transition:.2s; }
.feature-main .feature-copy button { background:linear-gradient(115deg,#8a5af6,#5c40db 58%,#128fab); border:0; box-shadow:0 14px 28px rgba(86,57,203,.3); }
.feature-game:hover .feature-copy button { transform:translateX(4px); filter:brightness(1.14); }
.feature-symbol-art { position:absolute; right:-2%; top:50%; width:48%; height:82%; transform:translateY(-50%); display:grid; place-items:center; pointer-events:none; }
.feature-symbol-art>span { position:relative; z-index:2; color:#fff; font-size:clamp(84px,9vw,148px); font-weight:700; line-height:1;
  text-shadow:0 22px 48px rgba(0,0,0,.45), 0 0 46px rgba(255,255,255,.2); filter:drop-shadow(0 16px 24px rgba(0,0,0,.32)); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.feature-game:hover .feature-symbol-art>span { transform:translateY(-9px) rotate(-4deg) scale(1.08); }
.feature-symbol-art::before,.feature-symbol-art::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.feature-symbol-art::before { width:256px; height:256px; box-shadow:0 0 60px rgba(255,255,255,.08), inset 0 0 50px rgba(255,255,255,.05); }
.feature-symbol-art::after { width:184px; height:184px; border-style:dashed; animation:featureSpin 24s linear infinite; }
.feature-symbol-art i { position:absolute; z-index:3; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.55) 15%,rgba(255,255,255,.14) 60%,transparent); box-shadow:0 0 16px rgba(255,255,255,.3); }
.feature-symbol-art i:nth-child(2) { top:18%; left:16%; } .feature-symbol-art i:nth-child(3) { right:11%; bottom:20%; transform:scale(.65); } .feature-symbol-art i:nth-child(4) { right:22%; top:13%; transform:scale(.42); }
.feature-side .feature-symbol-art { right:-12%; bottom:-15%; top:auto; width:66%; height:63%; transform:none; opacity:.75; }
.feature-side .feature-symbol-art>span { font-size:86px; }
.feature-side .feature-symbol-art::before { width:150px; height:150px; } .feature-side .feature-symbol-art::after { width:105px; height:105px; }
.feature-side .feature-copy { max-width:78%; padding:25px; }
.feature-side .feature-copy h3 { font-size:27px; }
@keyframes featureSpin { to{transform:rotate(360deg)} }

/* ── library ── */
.home-library-section { position:relative; padding:60px 0 72px; }
.home-discovery-grid{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;align-items:start}.home-user-rail{position:sticky;top:92px;display:grid;gap:16px;padding-top:60px}.home-discovery-grid .home-library-section{min-width:0}.home-discovery-grid .social-card{width:100%}#menu.home-v2 .home-discovery-grid .lc-lib{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-library-tools { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:28px; }
.home-search { width:min(360px,100%); height:50px; display:flex; align-items:center; gap:11px; padding:0 17px; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.035); color:var(--dim); transition:.2s; }
.home-search:focus-within { border-color:rgba(150,120,255,.55); box-shadow:0 0 0 3px rgba(139,108,255,.14); }
.home-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:500 13.5px var(--font-d); }
.home-search input::placeholder { color:var(--dim); }
.home-filters { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.home-filters button { padding:12px 18px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--mut); font:600 11.5px var(--font-d); letter-spacing:.03em; cursor:pointer; transition:.16s; }
.home-filters button:hover { color:#fff; border-color:var(--line-2); }
.home-filters button.active { color:#fff; background:linear-gradient(120deg,rgba(126,89,255,.3),rgba(24,160,192,.2)); border-color:rgba(154,120,255,.45); box-shadow:0 0 18px rgba(110,77,240,.16); }
.lib-count { color:var(--dim); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px; border:1px solid var(--line); border-radius:999px; }
#menu.home-v2 .lc-lib { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:none; }
#menu.home-v2 .game-card { min-height:330px; border-radius:20px; background:var(--card); border-color:var(--line); box-shadow:none; transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; }
#menu.home-v2 .game-card::after { display:none; }
#menu.home-v2 .game-card:hover { transform:translateY(-6px); border-color:rgba(150,117,255,.55); box-shadow:0 26px 56px rgba(0,0,0,.4), 0 0 34px rgba(110,77,240,.1); }
#menu.home-v2 .gc-cover { height:170px; margin:8px; border-radius:14px; isolation:isolate; }
#menu.home-v2 .gc-cover::before { background:radial-gradient(circle at 72% 10%,rgba(255,255,255,.32),transparent 52%),linear-gradient(180deg,transparent 55%,rgba(4,6,14,.5)); }
#menu.home-v2 .gc-glyph { font-size:66px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
#menu.home-v2 .game-card:hover .gc-glyph { transform:translateY(-5px) scale(1.1); }
.gc-topline { position:absolute; inset:11px 11px auto; z-index:4; display:flex; justify-content:space-between; align-items:center; }
.gc-topline span { padding:6px 9px; border-radius:999px; color:rgba(255,255,255,.9); background:rgba(4,7,16,.4); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); font-size:8px; font-weight:700; letter-spacing:.14em; font-family:var(--font-d); }
.gc-topline .gc-player-count { color:rgba(255,255,255,.72); }
.gc-watermark { position:absolute; right:-22px; bottom:-48px; z-index:-1; color:rgba(255,255,255,.13); font-size:136px; font-weight:700; transform:rotate(-14deg); filter:blur(.3px); }
#menu.home-v2 .gc-body { padding:12px 17px 17px; }
.gc-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gc-title-row>span { width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:999px; color:var(--dim); background:rgba(255,255,255,.045); font-size:12px; transition:.2s; }
.game-card:hover .gc-title-row>span { color:#fff; background:linear-gradient(120deg,#7f56f0,#1691b2); transform:rotate(8deg); }
#menu.home-v2 .gc-title { color:var(--ink); font-family:var(--font-d); font-size:19px; line-height:1.2; letter-spacing:-.02em; font-weight:700; }
#menu.home-v2 .gc-tag { min-height:57px; color:#a3adc6; font-size:12.3px; line-height:1.55; }
.gc-bottom-meta { display:flex; justify-content:space-between; gap:8px; min-height:14px; margin-top:9px; color:#78839c; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
#menu.home-v2 .gc-actions { padding-top:10px; }
#menu.home-v2 .gc-btn.primary { min-height:39px; padding:10px 13px; border-radius:999px; color:#cfd6e8; background:rgba(255,255,255,.06); border:1px solid var(--line-2); box-shadow:none; font:700 11px var(--font-d); letter-spacing:.05em; }
#menu.home-v2 .game-card:hover .gc-btn.primary { color:#fff; border-color:transparent; background:linear-gradient(115deg,#7c52ea,#149ec2); box-shadow:0 10px 22px rgba(110,77,240,.28); }
.home-empty { padding:50px; text-align:center; color:var(--dim); }
.home-content-value{margin:54px 0 24px;padding:clamp(24px,4vw,44px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(124,58,237,.1),rgba(34,211,238,.045))}.home-content-value h2{max-width:760px;margin:8px 0 12px;color:var(--ink);font:800 clamp(28px,4vw,44px)/1.08 var(--font-d)}.home-content-value>p{max-width:820px;color:var(--mut);line-height:1.75}.home-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.home-value-grid article{padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(4,8,20,.32)}.home-value-grid h3{margin:0 0 8px;color:#fff;font-size:15px}.home-value-grid p{margin:0;color:#9da7bf;font-size:12px;line-height:1.65}.home-value-grid a{color:#63deed;font-weight:700;text-decoration:none}

/* ── social bento ── */
.social-zone { padding:28px 0 68px; }
.social-bento { display:grid; grid-template-columns:.9fr .9fr 1.2fr; gap:18px; align-items:stretch; }
.social-zone .ranking-v2{grid-column:1/-1}
.social-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--card); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.18); }
.profile-v2 { padding-bottom:22px; }
.profile-cover { position:relative; height:116px; overflow:hidden; padding:18px; background:radial-gradient(circle at 15% 160%,rgba(47,215,233,.45),transparent 44%),linear-gradient(120deg,#5330c9,#7b4eeb 55%,#1c6d95); }
.profile-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent,rgba(255,255,255,.1),transparent); transform:skewX(-22deg); }
.profile-cover-suit { position:absolute; right:19px; bottom:-52px; color:rgba(255,255,255,.13); font-size:148px; line-height:1; transform:rotate(12deg); }
.profile-cover a { position:relative; z-index:2; float:right; padding:8px 12px; border-radius:999px; color:#fff; background:rgba(6,9,20,.34); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; text-decoration:none; font-family:var(--font-d); }
.profile-identity { display:flex; align-items:end; gap:14px; padding:0 22px; margin-top:-32px; position:relative; z-index:3; }
.profile-avatar-v2 { flex:none; width:74px; height:74px; border-radius:24px; border:5px solid var(--card); display:grid; place-items:center; color:#fff;
  background:conic-gradient(from 200deg,#9a6dff,#4934b8 45%,#10b8dc 78%,#9a6dff); box-shadow:0 14px 30px rgba(0,0,0,.35); font:700 27px var(--font-d); cursor:pointer; }
.profile-identity .name-display { margin-bottom:5px; color:var(--ink); font-size:21px; font-family:var(--font-d); font-weight:700; }
.profile-identity .name-note { max-width:190px; color:var(--dim); font-size:10px; line-height:1.4; }
.profile-numbers { display:grid; grid-template-columns:repeat(3,1fr); margin:22px 20px 0; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.profile-numbers>div { min-width:0; padding:14px 10px; text-align:center; border-right:1px solid var(--line); }
.profile-numbers>div:last-child { border-right:0; }
.profile-numbers span { display:block; color:var(--dim); font-size:8px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.profile-numbers b { display:block; margin-top:6px; color:var(--ink); font-size:16px; font-family:var(--font-d); }
.profile-numbers .pc-code { cursor:pointer; color:#6fe0f3; font-size:13px; letter-spacing:.14em; }
.profile-progress { margin:18px 22px 0; }
.profile-progress>div:first-child { display:flex; justify-content:space-between; margin-bottom:7px; color:var(--dim); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.profile-progress .xp-bar { height:8px; border-radius:999px; background:rgba(255,255,255,.07); }
.profile-progress .xp-bar i { background:linear-gradient(90deg,var(--iris),var(--aqua)); box-shadow:0 0 16px rgba(47,215,233,.4); }
.profile-v2 .ach-row { padding:0 22px; margin-top:16px; }
.profile-v2 .pc-account { margin:17px 22px 0; padding-top:15px; border-top:1px solid var(--line); }
.profile-v2 .acc-status { padding:0; border:0; background:none; color:var(--dim); font-size:10px; }
.social-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 22px 18px; border-bottom:1px solid var(--line); }
.social-card-head>div { display:flex; align-items:center; gap:12px; }
.social-card-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#5fe1f8; background:rgba(38,193,220,.11); border:1px solid rgba(65,214,241,.2); font-size:22px; font-weight:700; }
.social-card-icon.gold { color:var(--gold); background:rgba(235,174,47,.1); border-color:rgba(244,196,94,.2); }
.social-card-head small { display:block; margin-bottom:2px; color:var(--dim); font-size:8px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.social-card-head h3 { color:var(--ink); font-size:18px; font-family:var(--font-d); font-weight:700; }
.social-card-head a { color:var(--mut); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.online-label { color:var(--mint); font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.social-card-intro { padding:18px 22px 0; color:var(--mut); font-size:12px; line-height:1.6; }
.friend-add-v2 { display:grid; grid-template-columns:1fr auto; gap:8px; margin:16px 22px; }
.friend-add-v2 .input { height:46px; border-radius:999px; padding-left:16px; color:#dce1ef; font-size:10px; letter-spacing:.12em; }
.friend-add-v2 .btn { height:46px; padding:0 19px; border-radius:999px; font-size:11px; letter-spacing:.03em; text-transform:none; }
.friends-list-v2 { display:flex; flex-direction:column; gap:7px; max-height:350px; overflow:auto; margin:0 14px 16px; padding:0 8px 8px; }
.friends-list-v2 .friend-row { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; min-height:55px; align-items:center; gap:10px; padding:9px 11px; border:1px solid rgba(255,255,255,.055); border-radius:15px; background:rgba(255,255,255,.024); }
.friends-list-v2 .friend-row:hover { border-color:rgba(93,216,239,.24); background:rgba(50,190,220,.06); }
.friends-list-v2 .friend-row .dot { position:absolute; left:41px; bottom:10px; width:8px; height:8px; border:2px solid #101626; }
.friends-list-v2 .friend-row .fname { font-weight:600; font-size:12px; }
.friends-list-v2 .friend-row .felo { padding:5px 9px; border-radius:999px; color:#af97ff; background:rgba(132,90,240,.12); font-size:10px; font-weight:700; }
.friend-avatar-v2 { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(145deg,#334155,#1f2937); font-size:15px; font-weight:700; }
.friends-list-v2 .mini-btn { width:27px; height:27px; padding:0; display:grid; place-items:center; border-radius:9px; }
.friends-list-v2 .friends-empty { min-height:220px; justify-content:center; border:1px dashed rgba(255,255,255,.1); background:rgba(255,255,255,.016); }
.ranking-v2 { padding-bottom:18px; }
.rank-stats-v2 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px 20px; }
.rank-stats-v2>div { padding:13px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.055); }
.rank-stats-v2 span { display:block; color:var(--dim); font-size:8px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.rank-stats-v2 b { display:block; margin-top:5px; color:var(--ink); font-size:21px; font-family:var(--font-d); }
.ranking-labels { display:flex; justify-content:space-between; padding:0 25px 7px; color:var(--dim); font-size:8px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.ranking-list-v2 { display:flex; flex-direction:column; gap:5px; max-height:280px; overflow:auto; padding:0 15px 8px; }
.ranking-list-v2 .leader-row { grid-template-columns:30px 32px minmax(0,1fr) auto; min-height:48px; margin:0; padding:7px 10px; border:1px solid transparent; border-radius:13px; background:transparent; }
.ranking-list-v2 .leader-row:hover { background:rgba(255,255,255,.035); }
.ranking-list-v2 .leader-row:nth-child(-n+3) { background:rgba(255,255,255,.028); border-color:rgba(255,255,255,.05); }
.ranking-list-v2 .leader-row .place { color:var(--dim); font-size:10px; }
.ranking-list-v2 .leader-row:nth-child(1) .place { color:var(--gold); }
.ranking-list-v2 .leader-row:nth-child(2) .place { color:#c7d0df; }
.ranking-list-v2 .leader-row:nth-child(3) .place { color:#c98c63; }
.ranking-avatar-v2 { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(145deg,#4f46e5,#7c3aed); font-size:11px; font-weight:700; }
.ranking-name-v2 { overflow:hidden; color:#dce1ee; font-size:11.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.ranking-list-v2 .elo { color:#a48ef7; font-size:11px; }
.ranking-list-v2 .mine { border-color:rgba(47,215,233,.24); background:rgba(47,215,233,.06); }
.recent-games-v2 { margin:10px 20px 0; padding-top:13px; border-top:1px solid var(--line); }
.recent-games-title { margin-bottom:8px; color:var(--dim); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.recent-games-v2 .hist-list { max-height:110px; }

/* ── footer ── */
#menu.home-v2 .lc-footer { max-width:none; margin:0; padding:30px 0 8px; justify-content:space-between; border-top:1px solid var(--line); }

/* ── motion ── */
@media(prefers-reduced-motion:no-preference){
  /* Strona startowa pozostaje statyczna: ciągłe animacje kilku dużych warstw
     potrafiły blokować kompozytor całej przeglądarki na słabszych GPU. */
  #menu.home-v2 .hc-two, #menu.home-v2 .hc-one, #menu.home-v2 .chip-one,
  #menu.home-v2 .home-eyebrow i, #menu.home-v2 .home-hero-art::before,
  #menu.home-v2 .ring-two, #menu.home-v2 .home-marquee-track,
  #menu.home-v2 .feature-symbol-art::after { animation:none }
}
@media(prefers-reduced-motion:reduce){
  .home-hero-art::before,.ring-two,.home-marquee-track,.feature-symbol-art::after{animation:none!important}
}

/* ── responsive ── */
@media(max-width:1200px){
  #menu.home-v2 .lc-lib{grid-template-columns:repeat(3,minmax(0,1fr))}#menu.home-v2 .home-discovery-grid .lc-lib{grid-template-columns:repeat(2,minmax(0,1fr))}
  .social-bento{grid-template-columns:1fr 1fr}.ranking-v2{grid-column:1/-1}.ranking-v2 .ranking-list-v2{max-height:240px}
}
@media(max-width:1100px){ .featured-grid{grid-template-columns:1.2fr .8fr}.featured-grid .feature-side:last-child{grid-column:1/-1;min-height:280px} }
@media(max-width:900px){
  .home-nav{grid-template-columns:1fr auto}.home-nav-links{display:none}
  .home-hero{grid-template-columns:1fr;min-height:auto}.home-hero-copy{padding:66px 0 20px}.home-hero-art{min-height:440px}
  .home-action-grid{grid-template-columns:1fr}
  #menu.home-v2 .lc-lib{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-discovery-grid{grid-template-columns:1fr}.home-user-rail{position:static;order:2;padding-top:0}.home-discovery-grid .home-library-section{order:1}
  .social-bento{grid-template-columns:1fr}.ranking-v2{grid-column:auto}
  .social-zone-head{align-items:start;flex-direction:column}.social-zone-head p{display:none;text-align:left}
  .home-value-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .featured-zone{padding:40px 0 54px}
  .featured-head{align-items:start;flex-direction:column}.featured-head p{display:none}
  .featured-grid{grid-template-columns:1fr}.feature-game,.featured-grid .feature-side:last-child{grid-column:auto;min-height:330px}
  .feature-main .feature-copy{max-width:64%}
  .feature-side .feature-copy{max-width:68%}.feature-side{min-height:300px}
}
@media(max-width:620px){
  .cookie-bar{left:10px;right:10px;bottom:10px;transform:none;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px;font-size:11px}.cookie-bar span{grid-column:1/-1}.cookie-bar button{padding:8px 7px;font-size:11px}
  .home-nav{height:66px;padding:0 15px}.home-brand small{display:none}.home-brand-mark{width:38px;height:38px;font-size:19px}
  .home-icon-btn{display:none}
  .home-account-btn{height:36px;padding:0 11px;font-size:11px}.home-avatar-link{display:none}.quick-account-panel{top:72px;right:14px;padding:19px}.quick-account-panel .acc-btns{grid-template-columns:1fr}
  #menu.home-v2 .home-main{padding:0 15px 28px}
  .home-hero-copy{padding-top:46px}
  .home-hero h1{font-size:clamp(42px,13vw,52px)}
  .home-hero-copy>p{font-size:14.5px}
  .home-hero-actions{flex-direction:column}.home-cta{width:100%}
  .home-proof{width:100%}.home-proof span{flex:1;padding:12px 8px;align-items:center;text-align:center}
  .home-hero-art{display:none}.home-marquee{display:none}
  .home-hero-copy{padding-bottom:32px}.hero-join{margin-top:22px}.home-proof{margin-top:24px}
  .home-action-grid{padding-top:24px}.home-quick-card,.home-party-card{padding:20px}
  .home-library-section{padding:44px 0}
  .home-section-head{align-items:flex-start}
  .home-library-tools{align-items:stretch;flex-direction:column}
  .home-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .home-filters button{white-space:nowrap;padding:10px 14px}
  .social-zone{padding-bottom:44px}.social-bento{gap:12px}.social-card{border-radius:20px}
  .profile-numbers{margin-left:14px;margin-right:14px}.profile-numbers>div{padding:12px 6px}.profile-numbers b{font-size:13px}
  .social-card-head{padding:18px}.friend-add-v2{margin:14px 18px}.rank-stats-v2{padding:14px}.ranking-list-v2{padding:0 10px 8px}
  .lc-footer{flex-direction:column;text-align:center;gap:6px}
  /* library cards: horizontal compact layout */
  #menu.home-v2 .lc-lib{grid-template-columns:minmax(0,1fr);gap:11px}
  #menu.home-v2 .game-card{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:178px;border-radius:18px}
  #menu.home-v2 .gc-cover{width:auto;height:auto;min-height:164px;margin:8px;border-radius:13px}
  #menu.home-v2 .gc-glyph{font-size:49px}
  #menu.home-v2 .gc-body{min-width:0;padding:15px 13px 12px 8px;gap:4px}
  #menu.home-v2 .gc-title{font-size:17px}
  #menu.home-v2 .gc-tag{min-height:58px;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;color:#a8b1c6;font-size:11px;line-height:1.48}
  #menu.home-v2 .gc-actions{padding-top:6px}
  #menu.home-v2 .gc-btn.primary{min-height:34px;padding:7px 10px}
  #menu.home-v2 .gc-bottom-meta{display:none}
  #menu.home-v2 .gc-watermark{font-size:96px}
  #menu.home-v2 .gc-topline{inset:8px 8px auto}
  #menu.home-v2 .gc-topline span{font-size:6.5px;padding:4px 6px}
}
@media(max-width:480px){
  .feature-main .feature-copy{max-width:76%;padding:22px}
  .feature-symbol-art{right:-18%;width:58%;opacity:.75}
  .feature-copy h3{font-size:28px}.feature-copy p{font-size:11px}.feature-meta{gap:7px}.feature-game{border-radius:20px}
}

/* ============ HOME LITE 2026 ============
   Zero blur, canvas, 3D, masks and continuous animation. The visual character
   comes from typography, borders and inexpensive opaque gradients. */
#menu.home-v2 {
  --lite-bg:#070914; --lite-panel:#101426; --lite-panel-2:#151a31;
  --lite-line:#29304c; --lite-copy:#aeb7ce;
  background:var(--lite-bg); background-image:none; color:#f5f7ff;
}
#menu.home-v2 .home-nav {
  width:min(1280px,calc(100% - 40px)); height:72px; margin:16px auto 0;
  padding:0 18px; border:1px solid var(--lite-line); border-radius:18px;
  background:#0d1120; box-shadow:none; position:relative; top:auto;
}
#menu.home-v2 .home-brand-mark { background:#7657f6; box-shadow:none; }
#menu.home-v2 .home-nav-link.active { background:#1c2340; box-shadow:none; }
#menu.home-v2 .home-main { width:min(1280px,100%); margin:0 auto; padding:0 20px 48px; }
#menu.home-v2 .home-hero {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:56px; min-height:530px; align-items:center; border-bottom:1px solid var(--lite-line);
}
#menu.home-v2 .home-hero-copy { padding:64px 0; }
#menu.home-v2 .home-eyebrow { color:#bcb0ff; background:#15172b; border-color:#343858; }
#menu.home-v2 .home-eyebrow i { background:#50d6bd; box-shadow:none; }
#menu.home-v2 .home-hero h1 { max-width:720px; font-size:clamp(54px,6.5vw,96px); }
#menu.home-v2 .home-hero h1 span { color:#8f78ff; background:none; -webkit-text-fill-color:currentColor; }
#menu.home-v2 .home-hero-copy>p { color:var(--lite-copy); }
#menu.home-v2 .hero-join { background:#0d1120; border-color:var(--lite-line); box-shadow:none; }
#menu.home-v2 .home-cta.primary { background:#7657f6; box-shadow:none; }
#menu.home-v2 .home-cta.secondary { background:#12172a; border-color:var(--lite-line); }
#menu.home-v2 .home-proof { background:#0d1120; border-color:var(--lite-line); }
#menu.home-v2 .home-hero-art {
  display:block !important; min-height:390px; height:auto; perspective:none;
}
#menu.home-v2 .home-hero-art::before, #menu.home-v2 .home-hero-art::after { display:none; }
.home-showcase { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; border:1px solid var(--lite-line); border-radius:26px; background:#0d1120; }
.home-showcase a { min-height:150px; display:flex; flex-direction:column; justify-content:space-between; padding:20px; border:1px solid var(--lite-line); border-radius:18px; color:#fff; text-decoration:none; background:#151a31; }
.home-showcase a:nth-child(1) { background:#4d36a8; }
.home-showcase a:nth-child(2) { background:#123d52; }
.home-showcase a:nth-child(3) { background:#41243d; }
.home-showcase a:nth-child(4) { background:#193b35; }
.home-showcase i { font:normal 38px/1 serif; }
.home-showcase span { display:block; color:rgba(255,255,255,.68); font:700 9px var(--font-d); letter-spacing:.13em; text-transform:uppercase; }
.home-showcase b { display:block; margin-top:5px; font:700 20px var(--font-d); }
#menu.home-v2 .home-discovery-grid { gap:28px; }
#menu.home-v2 .home-user-rail { top:20px; }
#menu.home-v2 .social-card, #menu.home-v2 .home-party-card,
#menu.home-v2 .home-content-value, #menu.home-v2 .home-tour-banner {
  background:var(--lite-panel); border-color:var(--lite-line); box-shadow:none;
}
#menu.home-v2 .home-library-section { padding-top:54px; }
#menu.home-v2 .home-section-head h2 { font-size:clamp(32px,4vw,54px); }
#menu.home-v2 .home-search, #menu.home-v2 .home-filters button { background:#101426; border-color:var(--lite-line); }
#menu.home-v2 .home-filters button.active { background:#7657f6; border-color:#7657f6; box-shadow:none; }
#menu.home-v2 .lc-lib { gap:12px; }
#menu.home-v2 .game-card {
  min-height:290px; background:var(--lite-panel); border-color:var(--lite-line);
  box-shadow:none; transition:border-color .15s; contain:layout paint style;
}
#menu.home-v2 .game-card:hover { border-color:#7657f6; box-shadow:none; }
#menu.home-v2 .gc-cover { height:136px; background-image:none !important; }
#menu.home-v2 .gc-cover::before { background:rgba(255,255,255,.04); }
#menu.home-v2 .gc-watermark { display:none; }
#menu.home-v2 .gc-glyph { font-size:54px; }
#menu.home-v2 .gc-tag { min-height:52px; }
#menu.home-v2 .gc-btn.primary, #menu.home-v2 .game-card:hover .gc-btn.primary {
  background:#1b2138; border-color:#303957; box-shadow:none;
}
#menu.home-v2 .home-content-value, #menu.home-v2 .home-value-grid article { background:#101426; }
#menu.home-v2 .home-value-grid article { border-color:var(--lite-line); }
@media(max-width:900px){
  #menu.home-v2 .home-nav { width:calc(100% - 24px); margin-top:10px; }
  #menu.home-v2 .home-hero { grid-template-columns:1fr; gap:0; min-height:auto; }
  #menu.home-v2 .home-hero-copy { padding:52px 0 34px; }
  #menu.home-v2 .home-hero-art { min-height:0; padding-bottom:42px; }
  #menu.home-v2 .home-showcase { max-width:620px; }
}
@media(max-width:620px){
  #menu.home-v2 .home-nav { height:62px; padding:0 12px; border-radius:15px; }
  #menu.home-v2 .home-main { padding-left:15px; padding-right:15px; }
  #menu.home-v2 .home-hero h1 { font-size:clamp(43px,13vw,58px); }
  .home-showcase { grid-template-columns:1fr 1fr; padding:8px; gap:8px; border-radius:20px; }
  .home-showcase a { min-height:118px; padding:15px; border-radius:14px; }
  .home-showcase i { font-size:30px; } .home-showcase b { font-size:16px; }
  #menu.home-v2 .game-card { contain:layout paint style; }
}

/* ============ KARCIAK / NEW HOME ============
   A separate visual system, not an iteration of Home V2. Flat rendering only. */
#menu.new-home {
  --n-bg:#f2f0e9; --n-paper:#fffdf7; --n-ink:#171717; --n-muted:#66645f;
  --n-line:#171717; --n-blue:#3157e8; --n-orange:#ff6b35; --n-lime:#c8f04b;
  display:block; padding:0; background:var(--n-bg); color:var(--n-ink);
  font-family:var(--font-d),Arial,sans-serif;
}
#menu.new-home::before, #menu.new-home::after, #menu.new-home .home-orb,
#menu.new-home .home-scroll-progress, #menu.new-home .home-marquee { display:none !important; }
#menu.new-home * { backdrop-filter:none !important; filter:none !important; animation:none !important; }
#menu.new-home .home-nav {
  position:relative; top:auto; width:100%; height:78px; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; padding:0 max(24px,calc((100vw - 1320px)/2));
  background:var(--n-paper); border:0; border-bottom:2px solid var(--n-line); border-radius:0;
}
#menu.new-home .home-brand { color:var(--n-ink); }
#menu.new-home .home-brand-mark { width:44px; height:44px; border-radius:50%; background:var(--n-blue); box-shadow:none; }
#menu.new-home .home-brand b { color:var(--n-ink); }
#menu.new-home .home-brand small { color:var(--n-muted); }
#menu.new-home .home-nav-links { padding:4px; border:2px solid var(--n-line); border-radius:999px; background:#fff; }
#menu.new-home .home-nav-link { color:var(--n-ink); border-radius:999px; }
#menu.new-home .home-nav-link.active { color:#fff; background:var(--n-ink); box-shadow:none; }
#menu.new-home .home-icon-btn, #menu.new-home .home-account-btn {
  color:var(--n-ink); background:#fff; border:2px solid var(--n-line); box-shadow:none;
}
#menu.new-home .home-account-btn { border-radius:999px; }
#menu.new-home .avatar { border:2px solid var(--n-line); box-shadow:none; }
#menu.new-home .quick-account-panel { color:#fff; background:#171717; border:2px solid #171717; box-shadow:8px 8px 0 var(--n-blue); }
#menu.new-home .lc-main.home-main { width:min(1320px,100%); margin:0 auto; padding:0 24px 56px; }
#menu.new-home .home-hero {
  min-height:600px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  gap:70px; align-items:center; border-bottom:2px solid var(--n-line); overflow:visible;
}
#menu.new-home .home-hero::after { display:none; }
#menu.new-home .home-hero-copy { padding:72px 0; }
#menu.new-home .home-eyebrow { padding:8px 0; color:var(--n-blue); background:none; border:0; border-radius:0; }
#menu.new-home .home-eyebrow i { width:11px; height:11px; background:var(--n-orange); box-shadow:none; }
#menu.new-home .home-hero h1 { max-width:720px; margin-top:20px; color:var(--n-ink); font-size:clamp(58px,7.2vw,112px); line-height:.88; }
#menu.new-home .home-hero h1 span { color:var(--n-blue); background:none; -webkit-text-fill-color:currentColor; font-family:var(--font-d); font-style:normal; }
#menu.new-home .home-hero-copy>p { max-width:610px; color:var(--n-muted); font-size:18px; line-height:1.65; }
#menu.new-home .hero-join { max-width:600px; padding:14px; background:var(--n-paper); border:2px solid var(--n-line); border-radius:14px; box-shadow:6px 6px 0 var(--n-ink); }
#menu.new-home .hero-join>span { color:var(--n-ink); }
#menu.new-home .input { color:var(--n-ink); background:#fff; border:2px solid var(--n-line); }
#menu.new-home .btn, #menu.new-home .home-cta { border:2px solid var(--n-line); box-shadow:none; }
#menu.new-home .home-cta.primary { color:#fff; background:var(--n-blue); }
#menu.new-home .home-cta.secondary { color:var(--n-ink); background:var(--n-lime); }
#menu.new-home .home-proof { background:transparent; border:0; border-radius:0; }
#menu.new-home .home-proof span { color:var(--n-muted); border-color:#b9b6ad; }
#menu.new-home .home-proof b { color:var(--n-ink); }
#menu.new-home .home-hero-art { display:block !important; min-height:430px; height:auto; perspective:none; }
#menu.new-home .home-hero-art::before, #menu.new-home .home-hero-art::after { display:none; }
#menu.new-home .home-showcase { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; border:2px solid var(--n-line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:12px 12px 0 var(--n-ink); transform:rotate(1.2deg); }
#menu.new-home .home-showcase a { min-height:190px; display:flex; flex-direction:column; justify-content:space-between; padding:24px; color:var(--n-ink); text-decoration:none; border:0; border-right:2px solid var(--n-line); border-bottom:2px solid var(--n-line); border-radius:0; background:var(--n-paper); }
#menu.new-home .home-showcase a:nth-child(2n) { border-right:0; }
#menu.new-home .home-showcase a:nth-child(n+3) { border-bottom:0; }
#menu.new-home .home-showcase a:nth-child(1) { background:#cfc5ff; }
#menu.new-home .home-showcase a:nth-child(2) { background:#aeeaf0; }
#menu.new-home .home-showcase a:nth-child(3) { background:#ffc2ac; }
#menu.new-home .home-showcase a:nth-child(4) { background:var(--n-lime); }
#menu.new-home .home-showcase i { font:normal 42px/1 serif; }
#menu.new-home .home-showcase span { color:#353535; font-size:9px; letter-spacing:.14em; }
#menu.new-home .home-showcase b { color:var(--n-ink); font-size:22px; }
#menu.new-home .offline-note, #menu.new-home .open-wrap { border:2px solid var(--n-line); background:#fff; color:var(--n-ink); }
#menu.new-home .home-discovery-grid { display:grid; grid-template-columns:280px minmax(0,1fr); gap:38px; align-items:start; }
#menu.new-home .home-user-rail { position:sticky; top:20px; padding-top:70px; }
#menu.new-home .social-card { color:var(--n-ink); background:var(--n-paper); border:2px solid var(--n-line); border-radius:18px; box-shadow:6px 6px 0 var(--n-ink); }
#menu.new-home .profile-cover { background:var(--n-blue); }
#menu.new-home .profile-identity, #menu.new-home .profile-numbers, #menu.new-home .profile-progress,
#menu.new-home .guest-account-copy, #menu.new-home .social-card-intro { color:var(--n-muted); }
#menu.new-home .name-display, #menu.new-home .profile-numbers b, #menu.new-home .social-card h3 { color:var(--n-ink); }
#menu.new-home .home-library-section { padding:70px 0; }
#menu.new-home .home-kicker { color:var(--n-blue); }
#menu.new-home .home-section-head h2, #menu.new-home .social-zone-head h2 { color:var(--n-ink); font-size:clamp(34px,4.5vw,62px); }
#menu.new-home .lib-count { color:var(--n-ink); border:2px solid var(--n-line); background:var(--n-lime); }
#menu.new-home .home-search { color:var(--n-muted); background:#fff; border:2px solid var(--n-line); }
#menu.new-home .home-search input { color:var(--n-ink); }
#menu.new-home .home-filters button { color:var(--n-ink); background:transparent; border:2px solid var(--n-line); }
#menu.new-home .home-filters button.active { color:#fff; background:var(--n-ink); border-color:var(--n-ink); box-shadow:none; }
#menu.new-home .lc-lib { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; perspective:none; }
#menu.new-home .game-card { min-height:280px; color:var(--n-ink); background:var(--n-paper); border:2px solid var(--n-line); border-radius:15px; box-shadow:none; will-change:auto; transition:none; contain:layout paint style; content-visibility:auto; contain-intrinsic-size:280px; }
#menu.new-home .game-card:hover { transform:none; border-color:var(--n-blue); box-shadow:4px 4px 0 var(--n-blue); }
#menu.new-home .gc-cover { height:128px; margin:8px; border:0; border-radius:9px; }
#menu.new-home .gc-cover::before { background:rgba(255,255,255,.08); }
#menu.new-home .gc-watermark { display:none; }
#menu.new-home .gc-glyph { font-size:52px; }
#menu.new-home .gc-title { color:var(--n-ink); font-size:19px; }
#menu.new-home .gc-tag { min-height:55px; color:var(--n-muted); }
#menu.new-home .gc-bottom-meta { color:#6f6b62; }
#menu.new-home .gc-btn.primary, #menu.new-home .game-card:hover .gc-btn.primary { color:#fff; background:var(--n-blue); border:0; box-shadow:none; }
#menu.new-home .home-party-card, #menu.new-home .home-content-value, #menu.new-home .home-tour-banner { color:var(--n-ink); background:var(--n-paper); border:2px solid var(--n-line); box-shadow:none; }
#menu.new-home .home-party-card { box-shadow:7px 7px 0 var(--n-orange); }
#menu.new-home .home-card-copy h2, #menu.new-home .home-content-value h2 { color:var(--n-ink); }
#menu.new-home .home-card-copy p, #menu.new-home .home-content-value>p, #menu.new-home .home-value-grid p { color:var(--n-muted); }
#menu.new-home .party-perks span { color:var(--n-ink); border-color:var(--n-line); }
#menu.new-home .home-tour-banner { box-shadow:7px 7px 0 var(--n-lime); }
#menu.new-home .home-value-grid article { background:#fff; border:2px solid var(--n-line); }
#menu.new-home .home-value-grid h3 { color:var(--n-ink); }
#menu.new-home .social-zone-head p { color:var(--n-muted); }
#menu.new-home .rank-stats-v2>div, #menu.new-home .ranking-list-v2 .leader-row:nth-child(-n+3) { background:#f0eee7; border-color:#d5d1c6; }
#menu.new-home .rank-stats-v2 b, #menu.new-home .ranking-name-v2 { color:var(--n-ink); }
#menu.new-home .lc-footer { color:var(--n-muted); border-color:var(--n-line); }
#menu.new-home .lc-footer a { color:var(--n-ink); }
@media(max-width:1000px){
  #menu.new-home .home-nav { grid-template-columns:1fr auto; padding:0 20px; }
  #menu.new-home .home-nav-links { display:none; }
  #menu.new-home .home-hero { grid-template-columns:1fr; gap:0; }
  #menu.new-home .home-hero-copy { padding-bottom:38px; }
  #menu.new-home .home-hero-art { min-height:0; padding-bottom:65px; }
  #menu.new-home .home-showcase { max-width:680px; transform:none; }
  #menu.new-home .home-discovery-grid { grid-template-columns:1fr; }
  #menu.new-home .home-user-rail { position:static; order:2; padding-top:0; }
  #menu.new-home .home-library-section { order:1; }
  #menu.new-home .lc-lib { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px){
  #menu.new-home .home-nav { height:66px; padding:0 14px; }
  #menu.new-home .home-icon-btn, #menu.new-home .home-avatar-link { display:none; }
  #menu.new-home .lc-main.home-main { padding:0 14px 36px; }
  #menu.new-home .home-hero-copy { padding:48px 0 30px; }
  #menu.new-home .home-hero h1 { font-size:clamp(50px,16vw,68px); }
  #menu.new-home .home-hero-actions { flex-direction:column; }
  #menu.new-home .home-cta { width:100%; }
  #menu.new-home .home-showcase a { min-height:135px; padding:16px; }
  #menu.new-home .home-showcase b { font-size:17px; }
  #menu.new-home .home-library-tools { flex-direction:column; align-items:stretch; }
  #menu.new-home .home-filters { flex-wrap:nowrap; justify-content:flex-start; overflow:auto; }
  #menu.new-home .lc-lib { grid-template-columns:1fr; }
  #menu.new-home .game-card { display:grid; grid-template-columns:120px minmax(0,1fr); min-height:170px; }
  #menu.new-home .gc-cover { height:auto; min-height:152px; }
  #menu.new-home .gc-body { padding:14px 12px 12px 4px; }
  #menu.new-home .gc-bottom-meta { display:none; }
  #menu.new-home .home-value-grid { grid-template-columns:1fr; }
}

/* ============ HOME V4 / DARK GAME DESK ============
   New information architecture: compact intro -> catalogue -> player tools -> community.
   Uses the established Karciak violet/cyan palette. */
#menu.new-home {
  --n-bg:#080b14; --n-paper:#101629; --n-ink:#f3f5ff; --n-muted:#9ca7c0;
  --n-line:#29334f; --n-blue:#7c5cf5; --n-orange:#ff6688; --n-lime:#31d6c4;
  background:#080b14; color:var(--n-ink);
}
#menu.new-home .home-nav {
  height:70px; padding:0 max(22px,calc((100vw - 1360px)/2));
  background:#0b1020; border-bottom:1px solid var(--n-line);
}
#menu.new-home .home-brand, #menu.new-home .home-brand b { color:#fff; }
#menu.new-home .home-brand small { color:#77839e; }
#menu.new-home .home-brand-mark { background:linear-gradient(135deg,#8b5cf6,#22d3ee); border-radius:12px; }
#menu.new-home .home-nav-links { border:1px solid var(--n-line); background:#101629; }
#menu.new-home .home-nav-link { color:#aeb8cf; }
#menu.new-home .home-nav-link.active { color:#fff; background:#7454e8; }
#menu.new-home .home-icon-btn, #menu.new-home .home-account-btn { color:#e9edfa; background:#11182b; border:1px solid var(--n-line); }
#menu.new-home .avatar { border:1px solid #654bd2; }
#menu.new-home .lc-main.home-main { width:min(1360px,100%); padding:0 24px 60px; }

/* compact control deck, not a landing-page billboard */
#menu.new-home .home-hero {
  height:580px; min-height:580px; margin:26px 0 0; padding:30px; grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr);
  gap:32px; align-items:stretch; border:1px solid var(--n-line); border-radius:24px;
  background:linear-gradient(125deg,#151332 0%,#111a32 52%,#0d2330 100%);
}
#menu.new-home .home-hero-copy { display:grid; grid-template-columns:1fr auto; grid-template-areas:"eyebrow proof" "title title" "copy copy" "join actions"; gap:0 22px; padding:10px 4px; align-content:center; }
#menu.new-home .home-eyebrow { grid-area:eyebrow; color:#8ce9f2; }
#menu.new-home .home-eyebrow i { background:#33d6a6; }
#menu.new-home .home-hero h1 { grid-area:title; margin:14px 0 0; max-width:850px; font-size:clamp(45px,5.3vw,78px); line-height:.96; color:#fff; }
#menu.new-home .home-hero h1 span { color:#a78bfa; }
#menu.new-home .home-hero-copy>p { grid-area:copy; max-width:760px; margin:18px 0 24px; color:#aeb8ce; font-size:15px; line-height:1.65; }
#menu.new-home .hero-join { grid-area:join; align-self:end; margin:0; padding:12px; background:#0b1020; border:1px solid #34405e; border-radius:14px; box-shadow:none; }
#menu.new-home .hero-join>span { color:#dfe5f5; }
#menu.new-home .home-hero-actions { grid-area:actions; align-self:end; display:grid; gap:8px; margin:0; }
#menu.new-home .home-cta { min-height:45px; padding:0 20px; border:1px solid #5942c5; }
#menu.new-home .home-cta.primary { background:#7657ef; }
#menu.new-home .home-cta.secondary { color:#dffcff; background:#12323d; border-color:#275668; }
#menu.new-home .home-proof { grid-area:proof; justify-self:end; align-self:start; margin:0; width:auto; }
#menu.new-home .home-proof span { padding:5px 12px; color:#8290aa; border-color:#34405e; }
#menu.new-home .home-proof b { color:#fff; font-size:16px; }
#menu.new-home .home-hero-art { min-height:0; display:flex !important; }
#menu.new-home .home-showcase { width:100%; grid-template-columns:1fr 1fr; border:1px solid #35415e; border-radius:18px; box-shadow:none; transform:none; background:#0c1120; }
#menu.new-home .home-showcase a { min-height:125px; padding:17px; color:#fff; border-color:#35415e; }
#menu.new-home .home-showcase a:nth-child(1) { background:#372a72; }
#menu.new-home .home-showcase a:nth-child(2) { background:#12394a; }
#menu.new-home .home-showcase a:nth-child(3) { background:#45243b; }
#menu.new-home .home-showcase a:nth-child(4) { background:#173b38; }
#menu.new-home .home-showcase span { color:#9eabc3; }
#menu.new-home .home-showcase b { color:#fff; font-size:18px; }
#menu.new-home .home-showcase i { color:#fff; font-size:31px; }

/* catalogue is the primary content and comes before account/profile */
#menu.new-home .home-discovery-grid { display:flex; flex-direction:column; gap:0; }
#menu.new-home .home-library-section { order:1; width:100%; padding:58px 0 48px; }
#menu.new-home .home-user-rail { order:2; position:static; display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:0 0 20px; }
#menu.new-home .home-section-head { margin-bottom:20px; }
#menu.new-home .home-section-head h2 { color:#fff; font-size:clamp(30px,3.6vw,50px); }
#menu.new-home .home-kicker { color:#7ce5ef; }
#menu.new-home .lib-count { color:#dffcff; background:#12323d; border:1px solid #275668; }
#menu.new-home .home-library-tools { display:grid; grid-template-columns:minmax(240px,1fr) auto; margin-bottom:22px; }
#menu.new-home .home-search { max-width:none; width:100%; color:#7e8aa4; background:#0d1324; border:1px solid var(--n-line); }
#menu.new-home .home-search input { color:#fff; }
#menu.new-home .home-filters button { color:#aeb7cc; background:#101629; border:1px solid var(--n-line); }
#menu.new-home .home-filters button.active { color:#fff; background:#7657ef; border-color:#7657ef; }
#menu.new-home .lc-lib { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
#menu.new-home .game-card { min-height:245px; color:#fff; background:#101629; border:1px solid var(--n-line); border-radius:16px; }
#menu.new-home .game-card:hover { border-color:#7c5cf5; box-shadow:none; }
#menu.new-home .gc-cover { height:106px; margin:7px; }
#menu.new-home .gc-glyph { font-size:43px; }
#menu.new-home .gc-title { color:#fff; font-size:17px; }
#menu.new-home .gc-tag { min-height:49px; color:#9ca7bd; font-size:11px; line-height:1.45; }
#menu.new-home .gc-bottom-meta { display:none; }
#menu.new-home .gc-btn.primary, #menu.new-home .game-card:hover .gc-btn.primary { color:#e9e4ff; background:#221b42; border:1px solid #493b83; }

/* player tools become a horizontal dashboard below the games */
#menu.new-home .social-card { min-height:0; color:#fff; background:#101629; border:1px solid var(--n-line); border-radius:18px; box-shadow:none; }
#menu.new-home .profile-v2 { display:grid; grid-template-columns:150px minmax(180px,1fr) minmax(300px,1.5fr); align-items:center; padding:16px; }
#menu.new-home .profile-cover { height:120px; min-height:0; margin:0; border-radius:13px; background:linear-gradient(135deg,#6247d3,#168ba5); }
#menu.new-home .profile-identity { margin:0; padding:0 20px; }
#menu.new-home .profile-numbers { margin:0; border:1px solid var(--n-line); background:#0c1222; }
#menu.new-home .profile-progress, #menu.new-home .ach-row, #menu.new-home .pc-account,
#menu.new-home .guest-account-copy, #menu.new-home .guest-account-actions { grid-column:2/-1; }
#menu.new-home .profile-numbers b, #menu.new-home .name-display, #menu.new-home .social-card h3 { color:#fff; }
#menu.new-home .profile-identity, #menu.new-home .profile-numbers, #menu.new-home .profile-progress,
#menu.new-home .guest-account-copy, #menu.new-home .social-card-intro { color:#94a0ba; }

#menu.new-home .home-action-grid { padding:20px 0; }
#menu.new-home .home-party-card, #menu.new-home .home-content-value, #menu.new-home .home-tour-banner { color:#fff; background:#101629; border:1px solid var(--n-line); box-shadow:none; }
#menu.new-home .home-party-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; }
#menu.new-home .home-card-copy h2, #menu.new-home .home-content-value h2 { color:#fff; }
#menu.new-home .home-card-copy p, #menu.new-home .home-content-value>p, #menu.new-home .home-value-grid p { color:#9ca7bd; }
#menu.new-home .party-perks { justify-self:end; }
#menu.new-home .party-perks span { color:#c7d0e3; border-color:#34405e; }
#menu.new-home .home-tour-banner { background:linear-gradient(100deg,#281e51,#102f3d); }
#menu.new-home .home-value-grid article { color:#fff; background:#0c1222; border:1px solid var(--n-line); }
#menu.new-home .home-value-grid h3 { color:#fff; }
#menu.new-home .social-zone-head h2 { color:#fff; font-size:38px; }
#menu.new-home .social-zone-head p, #menu.new-home .rank-stats-v2 span { color:#8995ad; }
#menu.new-home .rank-stats-v2>div, #menu.new-home .ranking-list-v2 .leader-row:nth-child(-n+3) { background:#0c1222; border-color:#27314b; }
#menu.new-home .rank-stats-v2 b, #menu.new-home .ranking-name-v2 { color:#fff; }
#menu.new-home .lc-footer { color:#7f8aa2; border-color:var(--n-line); }
#menu.new-home .lc-footer a { color:#b9c4da; }
@media(max-width:1250px){ #menu.new-home .lc-lib{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(max-width:1000px){
  #menu.new-home .home-hero { height:auto; min-height:0; grid-template-columns:1fr; }
  #menu.new-home .home-hero-copy { grid-template-columns:1fr; grid-template-areas:"eyebrow" "title" "copy" "join" "actions" "proof"; }
  #menu.new-home .home-hero-actions { display:flex; margin-top:14px; }
  #menu.new-home .home-proof { justify-self:start; margin-top:18px; }
  #menu.new-home .lc-lib { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #menu.new-home .profile-v2 { grid-template-columns:120px 1fr; }
  #menu.new-home .profile-numbers { grid-column:1/-1; margin-top:14px; }
  #menu.new-home .profile-progress, #menu.new-home .ach-row, #menu.new-home .pc-account,
  #menu.new-home .guest-account-copy, #menu.new-home .guest-account-actions { grid-column:1/-1; }
}
@media(max-width:720px){
  #menu.new-home .home-hero { margin:12px 0 0; padding:20px; }
  #menu.new-home .home-hero h1 { font-size:48px; }
  #menu.new-home .home-showcase { grid-template-columns:1fr 1fr; }
  #menu.new-home .home-library-tools { grid-template-columns:1fr; }
  #menu.new-home .lc-lib { grid-template-columns:1fr 1fr; }
  #menu.new-home .home-user-rail { grid-template-columns:1fr; }
  #menu.new-home .home-party-card { grid-template-columns:auto 1fr; }
  #menu.new-home .party-perks { grid-column:1/-1; justify-self:start; }
}
@media(max-width:480px){
  #menu.new-home .lc-main.home-main { padding:0 12px 34px; }
  #menu.new-home .home-hero h1 { font-size:42px; }
  #menu.new-home .home-hero-actions { flex-direction:column; }
  #menu.new-home .home-proof { width:100%; }
  #menu.new-home .home-showcase a { min-height:105px; padding:13px; }
  #menu.new-home .lc-lib { grid-template-columns:1fr; }
  #menu.new-home .game-card { grid-template-columns:112px 1fr; min-height:160px; }
}

/* ============ HOME V5 / COMPACT HUB ============ */
#menu.new-home .home-hero {
  height:auto; min-height:540px; grid-template-columns:minmax(0,1fr) 390px;
  gap:36px; padding:36px 40px; overflow:hidden;
}
#menu.new-home .home-hero-copy {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:0; min-width:0;
}
#menu.new-home .home-eyebrow { order:1; }
#menu.new-home .home-hero h1 { order:2; margin:13px 0 0; font-size:clamp(46px,5vw,70px); line-height:.96; }
#menu.new-home .home-hero-copy>p { order:3; margin:16px 0 22px; max-width:650px; }
#menu.new-home .hero-join { order:4; width:min(570px,100%); display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
#menu.new-home .hero-join>span { grid-column:1/-1; margin:0; }
#menu.new-home .hero-join .home-code-form { display:contents; }
#menu.new-home .hero-join .input { width:100%; min-width:0; }
#menu.new-home .home-hero-actions { order:5; display:flex; align-items:center; gap:10px; margin-top:14px; }
#menu.new-home .home-proof { order:6; justify-self:auto; margin-top:22px; }
#menu.new-home .home-proof span { flex-direction:row; align-items:baseline; gap:6px; padding:4px 15px; }
#menu.new-home .home-proof b { font-size:14px; }
#menu.new-home .home-hero-art { min-height:0; align-self:stretch; }
#menu.new-home .home-showcase { align-self:stretch; grid-template-columns:1fr 1fr; }
#menu.new-home .home-showcase a { min-height:0; padding:18px; }
#menu.new-home .home-showcase i { font-size:27px; }
#menu.new-home .home-showcase b { margin-top:3px; font-size:16px; }

#menu.new-home .home-library-section { padding:52px 0 42px; }
#menu.new-home .home-section-head { align-items:end; }
#menu.new-home .home-library-tools { grid-template-columns:minmax(260px,420px) 1fr; align-items:center; }
#menu.new-home .home-filters { justify-content:flex-end; }
#menu.new-home .lc-lib { grid-template-columns:repeat(4,minmax(0,1fr)); }
#menu.new-home .game-card { min-height:270px; }
#menu.new-home .gc-cover { height:118px; }

/* full-width player dashboard; no orphaned half-column */
#menu.new-home .home-user-rail { display:block; width:100%; padding:8px 0 28px; }
#menu.new-home .home-user-rail>.social-card { width:100%; max-width:none; }
#menu.new-home .home-user-rail>.social-card+ .social-card { margin-top:16px; }
#menu.new-home .profile-v2 {
  width:100%; display:grid; grid-template-columns:150px 220px minmax(330px,1fr) minmax(220px,.7fr);
  gap:18px; align-items:center; padding:18px;
}
#menu.new-home .profile-cover { grid-column:1; grid-row:1/3; width:100%; height:135px; }
#menu.new-home .profile-identity { grid-column:2; grid-row:1; padding:0; margin:0; }
#menu.new-home .profile-numbers { grid-column:3; grid-row:1; margin:0; }
#menu.new-home .profile-progress { grid-column:3; grid-row:2; margin:0; }
#menu.new-home .guest-account-copy { grid-column:2/4; grid-row:2; margin:0; padding:0; }
#menu.new-home .guest-account-actions, #menu.new-home .pc-account { grid-column:4; grid-row:1/3; margin:0; padding:0; align-self:center; }
#menu.new-home .ach-row { grid-column:4; margin:0; }

#menu.new-home .home-action-grid { width:100%; padding:10px 0 18px; }
#menu.new-home .home-party-card { width:100%; max-width:none; margin:0; min-height:150px; padding:26px 30px; }
#menu.new-home .home-tour-banner { width:100%; margin:0 0 28px; }
#menu.new-home .home-content-value { margin:28px 0; padding:32px; }
#menu.new-home .home-content-value h2 { max-width:820px; font-size:34px; }
#menu.new-home .home-value-grid { gap:10px; }
#menu.new-home .home-value-grid article { min-height:150px; }
#menu.new-home .social-zone { padding:24px 0 36px; }
#menu.new-home .social-bento { display:block; }
#menu.new-home .ranking-v2 { width:100%; }
#menu.new-home .ranking-list-v2 { max-height:250px; }

@media(max-width:1050px){
  #menu.new-home .home-hero { grid-template-columns:1fr 320px; padding:30px; }
  #menu.new-home .profile-v2 { grid-template-columns:125px 1fr 1.3fr; }
  #menu.new-home .profile-cover { grid-column:1; }
  #menu.new-home .profile-identity { grid-column:2; }
  #menu.new-home .profile-numbers { grid-column:3; }
  #menu.new-home .guest-account-actions, #menu.new-home .pc-account { grid-column:2/4; grid-row:auto; display:flex; gap:8px; }
}
@media(max-width:820px){
  #menu.new-home .home-hero { grid-template-columns:1fr; }
  #menu.new-home .home-hero-art { min-height:230px; }
  #menu.new-home .lc-lib { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #menu.new-home .profile-v2 { grid-template-columns:110px 1fr; }
  #menu.new-home .profile-cover { grid-column:1; grid-row:1; height:105px; }
  #menu.new-home .profile-identity { grid-column:2; grid-row:1; }
  #menu.new-home .profile-numbers, #menu.new-home .profile-progress,
  #menu.new-home .guest-account-copy, #menu.new-home .guest-account-actions,
  #menu.new-home .pc-account, #menu.new-home .ach-row { grid-column:1/-1; grid-row:auto; }
  #menu.new-home .home-party-card { grid-template-columns:auto 1fr; }
  #menu.new-home .party-perks, #menu.new-home .pc-friends { grid-column:1/-1; justify-self:start; }
}
@media(max-width:560px){
  #menu.new-home .home-hero { padding:22px 18px; border-radius:18px; }
  #menu.new-home .home-hero h1 { font-size:43px; }
  #menu.new-home .home-hero-art { min-height:205px; }
  #menu.new-home .home-showcase a { padding:13px; }
  #menu.new-home .hero-join { grid-template-columns:1fr; }
  #menu.new-home .hero-join>span { grid-column:auto; }
  #menu.new-home .home-hero-actions { width:100%; flex-direction:column; }
  #menu.new-home .home-cta { width:100%; }
  #menu.new-home .home-proof { width:100%; }
  #menu.new-home .home-proof span { flex:1; flex-direction:column-reverse; }
  #menu.new-home .home-library-tools { grid-template-columns:1fr; }
  #menu.new-home .home-filters { justify-content:flex-start; }
  #menu.new-home .lc-lib { grid-template-columns:1fr; }
  #menu.new-home .game-card { grid-template-columns:112px minmax(0,1fr); min-height:165px; }
  #menu.new-home .gc-cover { height:auto; min-height:150px; }
  #menu.new-home .home-party-card { padding:22px 18px; }
}

/* ============ HOME V6 / ACTUAL INFORMATION ARCHITECTURE ============ */
#menu.new-home .home-hero {
  height:auto!important; min-height:553px; grid-template-columns:minmax(0,1fr) 350px; gap:42px;
  padding:54px 56px; background:linear-gradient(118deg,#11162d 0%,#11162d 62%,#0d2130 100%);
}
#menu.new-home .home-hero h1 { max-width:720px; font-size:clamp(48px,5vw,76px); letter-spacing:-.045em; }
#menu.new-home .home-hero-copy>p { max-width:680px; font-size:15px; line-height:1.7; }
#menu.new-home .home-proof { position:static; margin:18px 0 0; }
#menu.new-home .home-proof span { border:0; background:transparent; padding:0 13px; }
#menu.new-home .home-proof span+span { border-left:1px solid #34415f; }
#menu.new-home .home-hero-art { display:block!important; align-self:center; min-height:0; }
#menu.new-home .home-quickstart { border:1px solid #34415f; border-radius:18px; overflow:hidden; background:#0b1020; box-shadow:0 20px 60px rgba(0,0,0,.22); }
#menu.new-home .quickstart-head { display:flex; align-items:center; justify-content:space-between; padding:17px 18px; border-bottom:1px solid #293551; }
#menu.new-home .quickstart-head span { color:#45dff0; font:800 9px var(--font-d); letter-spacing:.18em; }
#menu.new-home .quickstart-head b { font:700 15px var(--font-d); }
#menu.new-home .home-quickstart>a { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; padding:13px 16px; color:#fff; text-decoration:none; border-bottom:1px solid #222d47; transition:background .15s ease; }
#menu.new-home .home-quickstart>a:hover { background:#151d35; }
#menu.new-home .home-quickstart>a i { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:#4933a4; font:normal 21px/1 serif; }
#menu.new-home .home-quickstart>a:nth-of-type(2) i { background:#0f5267; }
#menu.new-home .home-quickstart>a:nth-of-type(3) i { background:#673052; }
#menu.new-home .home-quickstart>a b,#menu.new-home .home-quickstart>a small { display:block; }
#menu.new-home .home-quickstart>a b { font:700 13px var(--font-d); }
#menu.new-home .home-quickstart>a small { margin-top:3px; color:#8fa0c0; font-size:10px; }
#menu.new-home .home-quickstart>a em { color:#7d63ff; font-style:normal; }
#menu.new-home .home-quickstart>button { width:100%; padding:15px 17px; display:flex; justify-content:space-between; color:#b8a8ff; border:0; background:#121831; font:700 11px var(--font-d); cursor:pointer; }

/* Catalog is the product. Everything personal follows it. */
#menu.new-home .home-discovery-grid { display:flex; flex-direction:column; gap:0; }
#menu.new-home .home-library-section { order:1; width:100%; padding:58px 0 34px; }
#menu.new-home .home-user-rail { order:2; padding:20px 0 18px; }
#menu.new-home .home-section-head h2 { margin-top:7px; font-size:clamp(28px,3vw,40px); }
#menu.new-home .home-library-tools { margin:20px 0 24px; }
#menu.new-home .lc-lib { gap:14px; }
#menu.new-home .game-card { min-height:236px; }
#menu.new-home .gc-cover { height:105px; }

/* Player area is a compact status strip, not a second hero. */
#menu.new-home .profile-v2 { grid-template-columns:94px 210px minmax(300px,1fr) 220px; min-height:136px; padding:14px 18px; }
#menu.new-home .profile-cover { height:104px; border-radius:14px; }
#menu.new-home .profile-cover>a { display:none; }
#menu.new-home .profile-numbers>div { padding:10px 12px; }
#menu.new-home .guest-account-copy { font-size:11px; line-height:1.45; }
#menu.new-home .guest-account-actions { flex-direction:column; }

#menu.new-home .home-action-grid { padding:10px 0 12px; }
#menu.new-home .home-party-card { min-height:128px; padding:22px 26px; grid-template-columns:46px minmax(300px,1fr) auto; }
#menu.new-home .home-card-copy h2 { font-size:21px; }
#menu.new-home .home-card-copy p { margin-top:5px; }
#menu.new-home .party-perks { justify-self:end; }
#menu.new-home .home-tour-banner { min-height:76px; padding:16px 24px; }

/* Editorial and ranking sections no longer dominate the page. */
#menu.new-home .home-content-value { padding:27px 30px; }
#menu.new-home .home-content-value>p { max-width:880px; }
#menu.new-home .home-content-value h2 { font-size:28px; }
#menu.new-home .home-value-grid article { min-height:120px; padding:18px; }
#menu.new-home .social-zone { padding-top:18px; }
#menu.new-home .social-zone-head { margin-bottom:14px; }
#menu.new-home .social-zone-head h2 { font-size:28px; }
#menu.new-home .ranking-v2 { padding:18px 20px; }
#menu.new-home .rank-stats-v2 { margin:12px 0; }
#menu.new-home .rank-stats-v2>div { padding:10px 13px; }
#menu.new-home .ranking-list-v2 { max-height:176px; }
#menu.new-home .ranking-list-v2 .leader-row { min-height:40px; padding:7px 10px; }
#menu.new-home .recent-games-v2 { margin-top:10px; }

@media(max-width:1000px){
  #menu.new-home .home-hero { grid-template-columns:1fr 310px; padding:42px 32px; }
  #menu.new-home .home-proof { position:static; margin-top:18px; }
  #menu.new-home .profile-v2 { grid-template-columns:90px 1fr 1.4fr; }
}
@media(max-width:760px){
  #menu.new-home .home-hero { grid-template-columns:1fr; gap:28px; }
  #menu.new-home .home-hero-art { width:100%; }
  #menu.new-home .profile-v2 { grid-template-columns:84px 1fr; }
  #menu.new-home .home-party-card { grid-template-columns:44px 1fr; }
  #menu.new-home .party-perks,#menu.new-home .pc-friends { grid-column:1/-1; justify-self:start; }
}
@media(max-width:560px){
  #menu.new-home .home-hero { padding:32px 18px; }
  #menu.new-home .home-hero h1 { font-size:46px; }
  #menu.new-home .home-proof span { padding:0 8px; }
  #menu.new-home .home-library-section { padding-top:38px; }
  #menu.new-home .profile-v2 { grid-template-columns:72px 1fr; }
}

/* ============ HOME V7 / CONSISTENT CONTROLS AND MODULE WIDTHS ============ */
#menu.new-home .hero-join {
  display:block!important; width:min(570px,100%); padding:14px!important;
}
#menu.new-home .hero-join>span { display:block; margin:0 0 9px!important; }
#menu.new-home .hero-join .home-code-form {
  display:grid!important; grid-template-columns:minmax(0,1fr) 150px; gap:10px; width:100%;
}
#menu.new-home .hero-join .input,
#menu.new-home .hero-join .btn { height:50px!important; min-height:50px; margin:0!important; }
#menu.new-home .hero-join .btn { width:150px!important; min-width:150px; padding:0 18px!important; }
#menu.new-home .home-hero-actions { width:min(570px,100%); align-items:stretch; }
#menu.new-home .home-hero-actions .home-cta {
  flex:1 1 0; width:auto!important; min-width:0; height:46px; padding:0 20px!important;
  display:flex; align-items:center; justify-content:center; gap:18px;
}

/* Every primary homepage module follows the same full-width container. */
#menu.new-home .home-user-rail,
#menu.new-home .home-action-grid,
#menu.new-home .home-tour-banner,
#menu.new-home .home-content-value,
#menu.new-home .social-zone { width:100%!important; max-width:none!important; }
#menu.new-home .home-action-grid { display:block!important; grid-template-columns:none!important; }
#menu.new-home .home-action-grid>.home-party-card {
  display:grid!important; width:100%!important; max-width:none!important;
  grid-template-columns:46px minmax(320px,1fr) auto!important; gap:20px;
}
#menu.new-home .home-party-card .party-perks { align-self:center; justify-self:end; }
#menu.new-home .home-party-card .pc-friends { grid-column:2/-1; width:100%; }
#menu.new-home .home-tour-banner { display:grid!important; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; }
#menu.new-home .htb-cta { min-width:168px; height:42px; display:flex; align-items:center; justify-content:center; }
#menu.new-home .guest-account-actions { width:220px; }
#menu.new-home .guest-account-actions .btn { width:100%; min-height:38px; }

@media(min-width:1300px){
  #menu.new-home .lc-lib { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #menu.new-home .game-card { min-height:224px; }
  #menu.new-home .gc-cover { height:96px; }
}

@media(max-width:760px){
  #menu.new-home .home-action-grid>.home-party-card { grid-template-columns:44px 1fr!important; }
  #menu.new-home .home-party-card .party-perks,#menu.new-home .home-party-card .pc-friends { grid-column:1/-1; justify-self:start; }
}
@media(max-width:560px){
  #menu.new-home .hero-join .home-code-form { grid-template-columns:1fr; }
  #menu.new-home .hero-join .btn { width:100%!important; }
  #menu.new-home .home-hero-actions { flex-direction:column; }
  #menu.new-home .home-tour-banner { grid-template-columns:36px 1fr; }
  #menu.new-home .htb-cta { grid-column:1/-1; width:100%; margin-top:10px; }
}

/* ============ HOME V8 / PROFILE INSIDE HERO ============ */
#menu.new-home .home-hero {
  min-height:720px!important; grid-template-rows:minmax(430px,auto) auto; align-items:center;
}
#menu.new-home .hero-profile {
  grid-column:1/-1; grid-row:2; width:100%; min-height:112px; margin:4px 0 0;
  grid-template-columns:76px 190px minmax(300px,1fr) 210px;
  gap:15px; padding:13px 15px; background:rgba(8,13,28,.72); border-color:#35415e;
}
#menu.new-home .hero-profile .profile-cover { width:76px; height:82px; grid-row:1/3; }
#menu.new-home .hero-profile .profile-cover-suit { font-size:34px; }
#menu.new-home .hero-profile .profile-avatar-v2 { width:44px; height:44px; }
#menu.new-home .hero-profile .profile-numbers>div { padding:8px 10px; }
#menu.new-home .hero-profile .guest-account-copy { grid-column:2/4; align-self:start; }
#menu.new-home .hero-profile .guest-account-actions { grid-column:4; width:100%; }
#menu.new-home .hero-profile .guest-account-actions .btn { min-height:34px; }
#menu.new-home .home-user-rail:not(:has(.friends-v2:not(.hidden))) { display:none; }

@media(max-width:1000px){
  #menu.new-home .hero-profile { grid-template-columns:72px 1fr 1.5fr; }
  #menu.new-home .hero-profile .guest-account-actions { grid-column:2/4; width:100%; flex-direction:row; }
}
@media(max-width:760px){
  #menu.new-home .home-hero { min-height:980px!important; grid-template-rows:auto auto auto; }
  #menu.new-home .hero-profile { grid-template-columns:70px 1fr; }
  #menu.new-home .hero-profile .profile-numbers,
  #menu.new-home .hero-profile .profile-progress,
  #menu.new-home .hero-profile .guest-account-copy,
  #menu.new-home .hero-profile .guest-account-actions,
  #menu.new-home .hero-profile .pc-account,
  #menu.new-home .hero-profile .ach-row { grid-column:1/-1; grid-row:auto; }
}

/* ============ HOME V9 / ACCOUNT RAIL BESIDE HERO ============ */
#menu.new-home .home-hero {
  min-height:690px!important; grid-template-columns:minmax(0,1fr) 360px;
  grid-template-rows:auto auto; gap:16px 42px;
}
#menu.new-home .home-hero-copy { grid-column:1; grid-row:1/3; }
#menu.new-home .hero-profile {
  grid-column:2; grid-row:1; min-height:0; margin:0; padding:16px;
  display:grid; grid-template-columns:58px 1fr!important; gap:12px;
  align-self:end;
}
#menu.new-home .hero-profile .profile-cover {
  grid-column:1; grid-row:1; width:58px; height:58px; border-radius:13px;
}
#menu.new-home .hero-profile .profile-cover-suit { font-size:26px; }
#menu.new-home .hero-profile .profile-identity { grid-column:2; grid-row:1; }
#menu.new-home .hero-profile .profile-avatar-v2 { width:40px; height:40px; }
#menu.new-home .hero-profile .name-display { font-size:16px; }
#menu.new-home .hero-profile .profile-numbers,
#menu.new-home .hero-profile .profile-progress,
#menu.new-home .hero-profile .ach-row,
#menu.new-home .hero-profile .pc-account { grid-column:1/-1; grid-row:auto; }
#menu.new-home .hero-profile .guest-account-copy {
  grid-column:1/-1; grid-row:auto; margin:0; padding:0; line-height:1.5;
}
#menu.new-home .hero-profile .guest-account-actions {
  grid-column:1/-1; grid-row:auto; width:100%; flex-direction:row;
}
#menu.new-home .hero-profile .guest-account-actions .btn { flex:1; width:auto; }
#menu.new-home .hero-profile.guest-mode .profile-numbers,
#menu.new-home .hero-profile.guest-mode .profile-progress { display:none; }
#menu.new-home .home-hero-art {
  grid-column:2; grid-row:2; width:100%; align-self:start;
}
#menu.new-home .home-quickstart>a { padding:10px 14px; }
#menu.new-home .home-quickstart>a i { width:32px; height:32px; font-size:18px; }
#menu.new-home .quickstart-head { padding:13px 15px; }

/* White form fields need explicit ink; global game styles use light text. */
#menu.new-home .hero-join .input,
#menu.new-home .quick-account-panel .input {
  color:#111827!important; caret-color:#6d4df6!important;
  -webkit-text-fill-color:#111827!important;
}
#menu.new-home .hero-join .input::placeholder,
#menu.new-home .quick-account-panel .input::placeholder {
  color:#9aa3b2!important; opacity:1;
  -webkit-text-fill-color:#9aa3b2!important;
}
#menu.new-home .quick-account-panel .input:-webkit-autofill {
  -webkit-text-fill-color:#111827!important;
  box-shadow:0 0 0 1000px #fff inset!important;
}

@media(max-width:900px){
  #menu.new-home .home-hero { grid-template-columns:1fr; grid-template-rows:auto auto auto; min-height:0!important; }
  #menu.new-home .home-hero-copy { grid-column:1; grid-row:1; }
  #menu.new-home .hero-profile { grid-column:1; grid-row:2; width:100%; }
  #menu.new-home .home-hero-art { grid-column:1; grid-row:3; }
}

/* ===== Dopracowanie strony głównej (2026-09-27) =====
   Ostatnia warstwa nad wcześniejszymi wersjami home — celowo na końcu arkusza.
   Kafelki z okładkami z aplikacji, 2 kolumny na telefonie, krótszy hero na mobile. */
#menu.new-home .game-card { display:flex; flex-direction:column; padding:0; overflow:hidden; border-radius:18px;
  background:#0e1424; border:1px solid #1c2440; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; min-height:0; height:auto; }
#menu.new-home .game-card:hover { transform:translateY(-3px); border-color:rgba(167,139,250,.55); box-shadow:0 14px 34px rgba(0,0,0,.45); }
#menu.new-home .game-card .gc-cover { position:relative; height:auto!important; aspect-ratio:16/10; margin:0; border-radius:0; overflow:hidden; flex:none; }
#menu.new-home .game-card .gc-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
#menu.new-home .game-card:hover .gc-art { transform:scale(1.05); }
#menu.new-home .game-card.has-art .gc-glyph, #menu.new-home .game-card.has-art .gc-watermark { display:none; }
#menu.new-home .game-card .gc-topline { position:absolute; top:8px; left:8px; right:8px; z-index:1; display:flex; justify-content:space-between; }
#menu.new-home .game-card .gc-topline span { background:rgba(7,10,20,.72); backdrop-filter:blur(6px); border-radius:999px; padding:3px 8px; font-size:10px; letter-spacing:1px; color:#e6eaf5; }
#menu.new-home .game-card .gc-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
#menu.new-home .game-card .gc-title { font-size:16px; }
#menu.new-home .game-card .gc-tag { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; line-height:1.45; color:#8b93ad; min-height:0; }
#menu.new-home .game-card .gc-actions, #menu.new-home .game-card .gc-bottom-meta { display:none; }
#menu.new-home .game-card:not(.has-art) .gc-glyph { font-size:64px; }
/* pole kodu i przyciski były dosunięte do prawej (align-self:end ze starszej warstwy) — w linii z tekstem */
#menu.new-home .home-hero-copy .hero-join, #menu.new-home .home-hero-copy .home-hero-actions { align-self:flex-start; width:100%; max-width:600px; }
#menu.new-home .lc-lib { grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
@media (max-width:1250px){ #menu.new-home .lc-lib { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:980px){ #menu.new-home .lc-lib { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){
  #menu.new-home .lc-lib { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #menu.new-home .game-card { border-radius:14px; }
  #menu.new-home .game-card .gc-body { padding:9px 10px 11px; }
  #menu.new-home .game-card .gc-title { font-size:14.5px; }
  #menu.new-home .game-card .gc-title-row > span { display:none; }
  #menu.new-home .game-card .gc-tag { font-size:11.5px; }
  #menu.new-home .game-card .gc-topline span { font-size:9px; padding:2px 6px; }
  /* hero: od razu do katalogu — konto jest w nagłówku, szybki start dubluje katalog */
  #menu.new-home .home-hero { padding:24px 18px!important; gap:16px!important; }
  #menu.new-home .home-hero-art, #menu.new-home .hero-profile, #menu.new-home .home-proof { display:none!important; }
  #menu.new-home .home-hero h1 { font-size:clamp(34px,11vw,44px); margin-bottom:10px; }
  #menu.new-home .home-hero-copy > p { font-size:14px; margin-bottom:14px; }
  #menu.new-home .hero-join { padding:12px!important; }
  #menu.new-home .hero-join .home-code-form { display:grid; grid-template-columns:minmax(0,1fr) 104px!important; gap:8px; }
  #menu.new-home .hero-join .btn { width:100%!important; padding:0 10px!important; min-width:0; }
  #menu.new-home .hero-join .input { letter-spacing:3px; font-size:16px; min-width:0; width:100%; padding-left:10px; padding-right:10px; }
  #menu.new-home .home-hero-actions { flex-direction:row!important; gap:8px; }
  #menu.new-home .home-hero-actions .home-cta { flex:1; min-width:0; padding:13px 10px; font-size:14px; white-space:nowrap; }
  #menu.new-home .party-perks { display:flex!important; flex-wrap:wrap; flex-direction:row!important; gap:6px; }
  #menu.new-home .party-perks span { width:auto!important; }
  #menu.new-home .home-content-value { padding:22px 18px!important; }
  #menu.new-home .home-content-value p { font-size:14px; line-height:1.6; }
}
/* nagłówki sekcji jednym krojem — „Więcej niż katalog" miał cienki, większy tytuł niż reszta */
#menu.new-home .home-content-value h2 { font-weight:800; font-size:clamp(24px,3.2vw,34px); line-height:1.15; letter-spacing:-.5px; }

/* ===== Znajomi + party (2026-09-27) =====
   Karta znajomych stoi teraz w jednym rzędzie z kartą „Jedno zaproszenie" (wcześniej osobny,
   prawie pusty pas na całą szerokość). Gość nie widzi znajomych — wtedy party zajmuje cały rząd. */
#menu.new-home .home-user-rail { display:none; }
#menu.new-home .home-discovery-grid { grid-template-columns:minmax(0,1fr)!important; }
#menu.new-home .home-main > .home-action-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; align-items:stretch; }
#menu.new-home .home-main > .home-action-grid:has(> #friendsCard.hidden) { grid-template-columns:minmax(0,1fr)!important; }
@media (max-width:900px){ #menu.new-home .home-main > .home-action-grid { grid-template-columns:minmax(0,1fr)!important; } }
#menu.new-home #friendsCard { display:flex; flex-direction:column; margin:0; min-width:0; }
#menu.new-home #friendsCard.hidden { display:none; }
#menu.new-home #friendsCard .social-card-intro { margin:0 22px!important; padding:0!important; }
#menu.new-home .friend-add-v2 .input { background:rgba(3,7,18,.55)!important; border:1px solid #232c45!important; color:#e6eaf5; font-size:14px; letter-spacing:.14em; }
#menu.new-home .friend-add-v2 .input::placeholder { color:#7a83a0; opacity:1; }
#menu.new-home .friend-add-v2 .input:focus { border-color:rgba(103,232,249,.6)!important; outline:none; }
#menu.new-home .friends-list-v2 { flex:1; }
#menu.new-home .friends-list-v2 .friends-empty { min-height:0!important; padding:18px!important; flex:1; }
/* party: treść od lewej, etykiety w rzędzie, przycisk akcji zamiast pustej ramki */
#menu.new-home .home-action-grid > #partyCard { display:flex!important; flex-direction:column; align-items:flex-start; gap:14px; min-height:0; }
#menu.new-home .home-action-grid > #partyCard .home-card-icon { position:absolute; top:24px; right:24px; }
#menu.new-home .home-action-grid > #partyCard .home-card-copy { padding-right:64px; }
#menu.new-home .home-action-grid > #partyCard .party-perks { display:flex!important; flex-wrap:wrap; gap:8px; margin:0!important; justify-content:flex-start!important; align-self:flex-start!important; width:auto!important; }
#menu.new-home .home-action-grid > #partyCard .party-perks span { width:auto!important; }
#menu.new-home .home-action-grid > #partyCard .pc-friends { width:100%; min-height:0; margin:0!important; }
#menu.new-home .home-action-grid > #partyCard .pc-friends:has(> .pc-empty) { background:none; border:0; padding:0; }
#menu.new-home .home-action-grid > #partyCard .pc-empty { color:#8b93ad; font-size:13px; }
#menu.new-home .home-action-grid > #partyCard .party-cta { margin-top:auto; }

/* ===== Podstrony gier: okładka z aplikacji zamiast rysowanego glifu (2026-09-27) ===== */
.hub-visual.has-art { background:#0e1424; }
.hub-visual.has-art .hub-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hub-visual.has-art .hub-glyph, .hub-visual.has-art .hub-orbit { display:none; }
.hub-visual.has-art::before { z-index:1; background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 40%,rgba(3,5,13,.28)); }
.hub-visual.has-art::after { z-index:1; }

/* ===== Podstrona gry: dopracowanie (2026-09-27) ===== */
/* `font:700 15px inherit` było niepoprawne — przyciski trybów wracały do Ariala */
.hub-play button, .hub-cta, .hub-back { font-family:inherit!important; }
.hub-hero > .hub-backdrop { position:absolute!important; inset:-40px; z-index:0; background-size:cover; background-position:center;
  filter:blur(60px) saturate(1.2); opacity:.32; pointer-events:none; }
.hub-hero-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hub-cta { display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:14px 26px; font-size:15px; font-weight:700;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.hub-cta.primary { border:0; color:#fff; background:linear-gradient(115deg,var(--hub-accent,#8b5cf6),var(--hub-accent-2,#22d3ee));
  box-shadow:0 14px 34px rgba(0,0,0,.35); }
.hub-cta.primary:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.hub-cta.ghost { color:#e6eaf5; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); }
.hub-cta.ghost:hover { background:rgba(255,255,255,.09); }
.hub-empty-lobby { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hub-empty-lobby b { font-size:26px; line-height:1; }
.hub-empty-lobby .hub-cta { padding:10px 20px; font-size:13.5px; }
@media (max-width:720px){
  .hub-hero-cta { margin-top:20px; }
  .hub-hero-cta .hub-cta { flex:1; justify-content:center; padding:13px 16px; }
}

/* ===== Lżej dla przeglądarki (2026-09-27) =====
   Bez rysowanych dekoracji: żadnych pływających glifów, orbit, obrotu 3D ani filtrów blur na dużych
   powierzchniach. Rozmyte tło podstrony to maleńki obrazek 24×24 rozciągnięty przez przeglądarkę. */
.hub-visual { transform:none!important; box-shadow:0 30px 60px rgba(0,0,0,.45)!important; }
.hub-visual::before, .hub-visual::after { display:none!important; }
.hub-glyph { animation:none!important; filter:none!important; }
.hub-hero > .hub-backdrop { filter:none!important; opacity:.38; inset:0; }
.gc-glyph { filter:none!important; transition:none!important; }
.gc-watermark { display:none!important; }
#menu.new-home .game-card .gc-topline span, .gc-topline span { backdrop-filter:none!important; background:rgba(7,10,20,.78)!important; }
#menu.new-home .game-card:hover .gc-art { transform:none; }
.home-orb { filter:none!important; background:radial-gradient(circle,rgba(139,92,246,.55),transparent 62%)!important; }
.home-orb-b { background:radial-gradient(circle,rgba(34,211,238,.45),transparent 62%)!important; }

/* ===== Wydajność: podstrona gry klatkowała (2026-09-27) =====
   1) Obracająca się ramka kafelka (@property --ga, animacja w nieskończoność) chodziła na 25 kafelkach
      bez przerwy — także niewidoczna i pod podstroną gry. Wyłączona; hover to sama zmiana ramki.
   2) Podstrona (#gameHub) ma nieprzezroczyste tło, a pod nią kompozytor i tak składał katalog, rozmyte
      tło .aurora, winiety i canvasy. Gdy podstrona jest otwarta, chowamy je (gra przed startem zamyka hub).
   3) Niewidoczne nakładki nie trzymają backdrop-filter; przycisk „Wszystkie gry" bez rozmycia tła. */
.game-card::after { animation:none!important; display:none!important; }
body:has(#gameHub.show) #menu, body:has(#gameHub.show) .aurora, body:has(#gameHub.show) .stage,
body:has(#gameHub.show) #smoke, body:has(#gameHub.show) #fx, body:has(#gameHub.show) .vignette,
body:has(#gameHub.show) .danger-vignette, body:has(#gameHub.show) .stage *, body:has(#gameHub.show) #verdict,
body:has(#gameHub.show) #flash, body:has(#gameHub.show) .hud-top, body:has(#gameHub.show) .hud-top *,
body:has(#gameHub.show) .claim-banner, body:has(#gameHub.show) .claim-banner *, body:has(#gameHub.show) #bubble,
body:has(#gameHub.show) #actions, body:has(#gameHub.show) #actions * { visibility:hidden!important; }
#wheelOverlay:not(.show) * { animation-play-state:paused!important; }
.aurora { filter:none!important; }
#wheelOverlay:not(.show) { backdrop-filter:none!important; visibility:hidden; transition:opacity .6s, visibility 0s linear .6s; }
#wheelOverlay.show { visibility:visible; transition:opacity .6s; }
.hub-back { backdrop-filter:none!important; background:rgba(7,10,20,.92)!important; }

/* ===== Firefox: podstrona gry dalej lagowała (2026-09-27) =====
   Chrome trzyma rozmyte cienie w pamięci, Firefox przy przewijaniu #gameHub przerysowywał cienie
   z rozmyciem 60px na dużych kartach (poradnik ma ~1200×1200). Cienie są teraz krótkie i ostre,
   a animacje pod otwartą podstroną (tło .aurora, plansza) zatrzymane, nie tylko niewidoczne. */
body:has(#gameHub.show) .aurora, body:has(#gameHub.show) .board, body:has(#gameHub.show) .stage * { animation:none!important; }
#gameHub .hub-card { box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.04)!important; }
#gameHub .hub-visual { box-shadow:0 12px 26px rgba(0,0,0,.4)!important; }
#gameHub .hub-play button.primary { box-shadow:0 6px 14px rgba(0,0,0,.25)!important; }
#gameHub .hub-play button.primary::after { display:none!important; }
@supports (-moz-appearance:none) {
  #gameHub .hub-card, #gameHub .hub-visual, #gameHub .hub-play button, #gameHub .hub-cta { box-shadow:none!important; }
  #gameHub { scroll-behavior:auto; }
}

/* ===== Jeden pasek przewijania (2026-09-27) =====
   Na desktopie przewijały się dwa zagnieżdżone elementy: #menu (wystawał o wysokość nagłówka)
   i .home-main (wysokość okna, własny fioletowy pasek w połowie szerokiego ekranu).
   Teraz przewija się tylko #menu na całą szerokość, a nagłówek jest przyklejony u góry. */
#menu.new-home .home-main { height:auto!important; max-height:none!important; overflow:visible!important; flex:none; }
#menu.new-home .home-nav { position:sticky!important; top:0; z-index:40; }
#menu.new-home { scrollbar-color:rgba(139,92,246,.5) transparent; }

/* ===== Baner aplikacji: strona główna nad katalogiem i podstrony gier (2026-09-27) =====
   Mocny kolor zamiast ciemnej karty, makieta dwóch telefonów ze zrzutami aplikacji.
   Bez animacji, filtrów i dużych rozmytych cieni — Firefox przewija to płynnie. */
.home-app-banner { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:center;
  gap:24px; margin:10px 0 38px; padding:34px 0 34px 40px; border-radius:28px; color:#fff;
  background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 45%),linear-gradient(120deg,#6d28d9 0%,#4f46e5 45%,#0e7490 100%);
  box-shadow:0 14px 30px rgba(15,10,50,.45), inset 0 1px rgba(255,255,255,.25); }
.home-app-banner::before { content:"♠ ♥ ♦ ♣"; position:absolute; left:-10px; bottom:-40px; font-size:150px; letter-spacing:10px; line-height:1;
  color:rgba(255,255,255,.07); pointer-events:none; white-space:nowrap; }
.hab-body { position:relative; z-index:1; min-width:0; }
.hab-kicker { display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hab-title { display:block; margin:14px 0 8px; font-size:clamp(28px,3.6vw,46px); line-height:1.05; letter-spacing:-.02em; font-weight:900; }
.hab-title em { font-style:normal; color:#a5f3fc; }
.hab-text { margin:0 0 14px; max-width:560px; color:rgba(255,255,255,.88); font-size:16px; line-height:1.5; }
.hab-points { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.hab-points li { padding:6px 12px; border-radius:999px; background:rgba(6,18,31,.28); font-size:13px; font-weight:700; }
.hab-points li::before { content:"✓ "; color:#6ee7b7; }
.hab-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hab-cta { display:inline-flex; align-items:center; gap:12px; padding:12px 24px 12px 18px; border-radius:16px; background:#06121f; color:#fff;
  text-decoration:none; border:1px solid rgba(255,255,255,.35); box-shadow:0 8px 18px rgba(0,0,0,.3); transition:transform .15s ease; }
.hab-cta:hover { transform:translateY(-2px); }
.hab-cta .hab-play { width:30px; height:30px; flex:none; }
.hab-cta span { display:flex; flex-direction:column; line-height:1.05; font-size:21px; font-weight:800; }
.hab-cta small { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.hab-qr { margin:0; display:flex; align-items:center; gap:10px; }
.hab-qr img { width:84px; height:84px; padding:5px; border-radius:12px; background:#fff; }
.hab-qr figcaption { font-size:12px; line-height:1.3; color:rgba(255,255,255,.85); font-weight:700; }
.hab-phones { position:relative; height:300px; }
.hab-phone { position:absolute; width:150px; aspect-ratio:9/20; border-radius:26px; overflow:hidden; background:#06121f;
  border:6px solid #0b0f1a; box-shadow:0 16px 28px rgba(0,0,0,.45); }
.hab-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.hab-back { left:40px; top:14px; transform:rotate(-9deg); }
.hab-front { left:160px; top:-2px; transform:rotate(6deg); }
.hub-grid > .home-app-banner { grid-column:1/-1; margin:0; }
@media (max-width:980px) {
  .home-app-banner { grid-template-columns:minmax(0,1fr) 260px; padding:28px 0 28px 28px; }
  .hab-qr { display:none; }
  .hab-phones { height:250px; }
  .hab-phone { width:120px; }
  .hab-back { left:18px; } .hab-front { left:112px; }
}
@media (max-width:640px) {
  .home-app-banner { grid-template-columns:1fr; gap:0; padding:24px 20px 0; margin:6px 0 28px; border-radius:24px; }
  .hab-title { font-size:30px; }
  .hab-text { font-size:14.5px; }
  .hab-actions { justify-content:stretch; }
  .hab-cta { flex:1; justify-content:center; }
  .hab-phones { height:190px; margin-top:20px; overflow:hidden; }
  .hab-phone { width:118px; top:14px; }
  .hab-back { left:calc(50% - 125px); } .hab-front { left:calc(50% - 5px); top:4px; }
}