/* ============================================================ v2026.10-zzi · OYUN LOBİSİ (Düello, Dörtlü) · js/games.js gmLobTop,
   gmBoard, gmHtPick, gmTile · js/arena.js arLobby · js/games.js kkLobby
   Tek kahraman: kum zeminde (arena zemini) günün parkuru krokisi ya da sonuç tabelası, tek ana eylem. Gece mavisi sahne sakin kalır;
   altın yalnız tabeladaki birinci kokartında. Tek koreografi: kahraman yükselir, engeller sırayla dikilir, binici parkuru bir kez dolaşır,
   ana düğmede bir parıltı. Hareketi azaltta hepsi son hâlinde. */
/* oyun kipinde (html.game-on) sahne kaydırma kabı esnek sütundur; lobi kendi ızgarasını korur */
html.game-on .ar > .ar-scr.lb2:not(.out),.ar-lob.lb2{display:grid;row-gap:0;column-gap:0;align-content:start}
.ar-lob.lb2{--sand:#E8D3A4;--sand-hi:#F1E2BE;--sand-d:#D3B57C;--sink:#1B2242;--sink-2:rgba(27,34,66,.68);--sig:#2448D8;
  grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "ch" "hd" "inv" "day" "side";grid-template-rows:repeat(6,max-content);align-items:start}
.lb2 > *{min-width:0;justify-self:stretch}
.lb2 > .lb-top{grid-area:top}
.lb2 > .ar-chb{grid-area:ch;margin:0 0 16px}
.lb2 > .lb-hd{grid-area:hd}
.lb2 > .lb-day{grid-area:day}
.lb2 > .lb-side{grid-area:side}
.lb2 > .lb-inv{grid-area:inv}

/* ---- üst: oyuncu + dört simge */
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:0 0 18px}
.lb-me{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:0 10px 0 0;border:0;border-radius:24px;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.lb-me .ar-av{width:36px;height:36px;font-size:15px}
.lb-mt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.lb-mt b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9em}
.lb-mt small{font-size:12.5px;font-weight:550;color:var(--muted);white-space:nowrap}
.lb-mt small:empty{display:none}
.lb-mt small b{font-size:12.5px;color:var(--ink);font-weight:750}
.lb-ic{display:flex;gap:4px;flex:none}
.lb-ic .lb-ib{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:none;color:var(--ink);cursor:pointer;transition:background .2s,transform .15s var(--spring)}
.lb-ic .lb-ib:hover{background:rgba(255,255,255,.15)}
.lb-ic .lb-ib:active{transform:scale(.92)}
.lb-ic .lb-ib svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lb-ic .lb-ib.gm-snd svg path[fill="currentColor"]{fill:currentColor}
.lb-q{font:800 18px/1 var(--f-display)}

/* ---- başlık: oyunun adı büyük, soru altında */
.lb-hd{margin:0 0 16px}
.lb-h1{margin:0;font:800 44px/.95 var(--f-display);letter-spacing:-.04em;color:#fff}
.lb-sub{margin:8px 0 0;font-size:16px;line-height:1.3;font-weight:550;color:var(--muted)}

/* ---- kahraman: kum zemin */
.lb-day{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;padding:16px 14px 16px;color:var(--sink);
  background:radial-gradient(120% 70% at 50% -8%,rgba(255,255,255,.55),transparent 60%),
    repeating-radial-gradient(150% 120% at 50% 135%,rgba(110,82,36,.055) 0 1px,transparent 1.5px 7px),
    linear-gradient(180deg,#F4EAD2 0%,#ECDDBA 55%,#E3CEA0 100%);
  box-shadow:0 28px 56px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(120,86,34,.2)}
.lb-dh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px}
.lb-dh h2{margin:0;font:750 20px/1.15 var(--f-display);letter-spacing:-.015em;color:var(--sink)}
.lb-dt{font-size:14px;font-weight:650;color:var(--sink-2);white-space:nowrap}
.lb-art{margin:4px -4px 0}
.lb-art svg{display:block;width:100%;height:auto;overflow:visible}
.lb-spec{display:flex;flex-wrap:nowrap;margin:6px 4px 14px;padding:0}
.lb-spec div{flex:0 0 auto;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;min-width:0;padding:0 16px;border-left:1px solid rgba(27,34,66,.16)}
.lb-spec div:first-child{padding-left:0;border-left:0}
.lb-spec div:last-child{flex:0 1 auto;padding-right:0}
.lb-spec dd{margin:0;font:750 18px/1.1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--sink);white-space:nowrap}
.lb-spec dt{font-size:12.5px;line-height:1.25;font-weight:550;color:var(--sink-2)}
.lb-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:0 20px;border:0;border-radius:18px;cursor:pointer;
  background:linear-gradient(180deg,#1C2C70,#0F1A45);color:#fff;font:750 17.5px/1 var(--f-display);letter-spacing:-.005em;
  box-shadow:0 14px 26px -14px rgba(15,26,69,.95),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .15s var(--spring),box-shadow .2s}
.lb-go:hover{box-shadow:0 18px 32px -14px rgba(15,26,69,1),inset 0 1px 0 rgba(255,255,255,.2)}
.lb-go:active{transform:scale(.98)}
.lb-go:focus-visible{outline:3px solid var(--sig);outline-offset:3px}
.lb-go::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.24),transparent);transform:translateX(-120%);animation:lbSheen 1.1s var(--e-out) 2.6s 1 both}
.lb-gi{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--sand);color:var(--sink)}
.lb-gi svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.lb-st{margin:11px 0 0;text-align:center;font-size:13.5px;line-height:1.35;font-weight:600;color:rgba(27,34,66,.8)}
.lb-st b{color:var(--sink);font-weight:750}
.lb-go.sec{min-height:48px;margin-top:10px;background:transparent;color:var(--sink);font-size:16px;box-shadow:inset 0 0 0 1.5px rgba(27,34,66,.45)}
.lb-go.sec:hover{background:rgba(27,34,66,.06);box-shadow:inset 0 0 0 1.5px rgba(27,34,66,.6)}
.lb-go.sec::after{content:none}
.lb-day.done .lb-go::after{content:none}
/* sonuç satırı (oynandı / yarıda): değerler büyük */
.lb-spec.res dd{font-size:26px;font-weight:800;letter-spacing:-.02em}
.lb-spec.res dt{font-size:13px}
.lb-day.done .lb-dh h2{color:var(--sink)}
/* ilerleme şeridi (yarıda kalan tur) */
.lb-prog{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:6px 4px 10px}
.lb-prog i{height:5px;border-radius:3px;background:rgba(27,34,66,.16)}
.lb-prog i.on{background:var(--sink)}
/* Dörtlü tabelası */
.lb-kkb .kr{transform-box:fill-box;transform-origin:left center}
.lb-crs .arc-rd{transition:opacity .6s ease}

/* ---- yan: yükseklik ve kutucuklar */
.lb-side{display:grid;gap:22px;margin-top:24px}
.lb-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}
.lb-sh h2{margin:0;font:700 17px/1.2 var(--f-display);letter-spacing:-.01em;color:#fff}
.lb-sh h2 small{font:600 13px/1 var(--f-body);color:var(--muted);letter-spacing:0}
.lb-cap{flex:none;font-size:12.5px;font-weight:650;color:var(--muted);padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lb-hts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lb-hts button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;min-height:84px;padding:12px 2px 12px;border:0;border-radius:18px;cursor:pointer;color:var(--ink);font:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);transition:background .2s,transform .15s var(--spring)}
.lb-hts button:hover{background:rgba(255,255,255,.13)}
.lb-hts button:active{transform:scale(.95)}
.lb-hts svg{display:block;width:38px;height:28px;overflow:visible}
.lb-hts svg .s{fill:#8C93B3}
.lb-hts svg .p{fill:var(--sand)}
.lb-hts svg .f{fill:rgba(232,211,164,.42)}
.lb-hts svg .g{fill:rgba(232,211,164,.3)}
.lb-hts b{font:750 16px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.lb-hts small{font-size:11.5px;line-height:1;font-weight:600;color:var(--muted);white-space:nowrap;margin-top:-3px}
.lb-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.lb-tile{display:flex;align-items:center;gap:14px;min-height:66px;padding:10px 12px 10px 12px;border:0;border-radius:18px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);transition:background .2s,transform .15s var(--spring)}
.lb-tile:hover{background:rgba(255,255,255,.11)}
.lb-tile:active{transform:scale(.98)}
.lb-ti{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(143,168,255,.15);color:#C9D4FF}
.lb-ti svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lb-tt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.lb-tt b{font:700 16px/1.2 var(--f-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-tt small{font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-chv{flex:none;width:18px;height:18px;fill:none;stroke:rgba(242,244,250,.55);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--spring)}
.lb-tile:hover .lb-chv{transform:translateX(2px)}

/* ---- giriş: tek koreografi */
.lb2 > .lb-hd{animation:lbUp .55s var(--spring) both}
.lb2 > .lb-day{animation:lbUp .65s var(--spring) .06s both}
.lb-crs .arc-tr{animation:lbFade .5s ease .32s both}
.lb-crs .arc-f{transform-box:fill-box;transform-origin:center;animation:lbPop .34s var(--bounce) both;animation-delay:calc(.42s + var(--k) * 60ms)}
.lb-kkb .kr{animation:lbBar .5s var(--spring) both;animation-delay:calc(.4s + var(--k) * 90ms)}
.lb-kkb .kro{animation:lbDrop .5s var(--bounce) 1s both}
@keyframes lbUp{from{opacity:0;transform:translateY(14px)}}
@keyframes lbPop{from{opacity:0;transform:scale(.3)}}
@keyframes lbFade{from{opacity:0}}
@keyframes lbBar{from{opacity:0;transform:translateX(-8px)}}
@keyframes lbDrop{from{opacity:0;transform:translateY(-16px) scale(.5)}}
@keyframes lbSheen{to{transform:translateX(320%)}}

/* ---- masaüstü: kahraman solda, seçimler sağda */
@media (min-width:900px){
  html.game-on .ar > .ar-scr.lb2:not(.out),.ar-lob.lb2{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"top top" "ch ch" "hd hd" "day inv" "day side";grid-template-rows:repeat(4,max-content) 1fr;column-gap:32px;align-items:stretch}
  .lb-top{margin-bottom:16px}
  .lb-h1{font-size:72px}
  .lb-sub{font-size:20px}
  .lb-hd{margin:0 0 22px}
  .lb-day{padding:22px 24px 20px}
  .lb-side{margin-top:0;display:flex;flex-direction:column;gap:26px;align-self:start}
  .lb-day{align-self:start}
  .lb-hts button{min-height:96px}
  /* masaüstünde lobi sahnesi içeriği kadar (sabit yükseklikte altta boşluk kalmasın) */
  html.game-on[data-gm="lobby"] .ar:has(> .ar-scr.lb2:not(.out)){height:auto}
  html.game-on[data-gm="lobby"] .ar > .ar-scr.lb2:not(.out){overflow:visible}
}
@media (max-width:680px){
  html.game-on .ar > .ar-scr.lb2:not(.out){padding-bottom:28px;-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
}
@media (max-width:370px){
  .lb-h1{font-size:40px}
  .lb-ic{gap:2px}
  .lb-hts{gap:6px}
  .lb-hts b{font-size:13.5px}
  .lb-spec dd{font-size:16px}
  .lb-spec div{padding:0 12px}
  .lb-spec div:first-child{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .lb2 > .lb-hd,.lb2 > .lb-day,.lb-crs .arc-tr,.lb-crs .arc-f,.lb-kkb .kr,.lb-kkb .kro,.lb-go::after{animation:none}
}

/* ---- oyun ayarları penceresi (site teması; telefonda alt sayfa) */
.lb-set fieldset{border:0;margin:0;padding:0}
.lb-set legend{padding:0;margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.lb-opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:6px 10px;margin:0 -10px;border-radius:14px;cursor:pointer}
.lb-opt:hover{background:var(--hover)}
.lb-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent)}
.lb-opt span{display:flex;flex-direction:column;gap:2px}
.lb-opt b{font-size:15.5px;font-weight:650;color:var(--ink)}
.lb-opt small{font-size:13px;color:var(--muted)}
.lb-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.lb-sw b{font-size:15.5px;font-weight:650}
.lb-setmd .gm-snd.lb-swb{position:relative;flex:none;width:52px;height:32px;padding:0;border-radius:16px;background:var(--fill-2);color:transparent;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s}
.lb-setmd .gm-snd.lb-swb::before{content:"";position:absolute;inset:-6px -4px}
.lb-setmd .gm-snd.lb-swb::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--spring)}
.lb-setmd .gm-snd.lb-swb[aria-pressed="true"]{background:var(--accent)}
.lb-setmd .gm-snd.lb-swb[aria-pressed="true"]::after{transform:translateX(20px)}
.lb-setmd .gm-snd.lb-swb svg{display:none}

/* ============================================================ 23.10 · LOBİ RENKLERİ VE "DÜELLO'YA DAVET ET"
   Üç renk alanı: gece manejı (sahne; tepeden projektör ışığı), kum (günün parkuru, tek başına ve sıralamalı), düello (sen mavi --ar-a,
   rakip kehribar --ar-b). Altın yalnız ödülde (+150 puan). WhatsApp düğmesi WhatsApp yeşili (tanınırlık; davet ekranıyla aynı).
   Davet kartı telefonda kahramanın üstünde (sıkı), masaüstünde sağ sütunun başında (tam). */
.ar:has(> .ar-scr.ar-lob:not(.out)){background:radial-gradient(58% 42% at 50% -4%,rgba(214,226,255,.24),transparent 72%),radial-gradient(60% 50% at 100% 104%,rgba(242,178,102,.12),transparent 66%),radial-gradient(60% 50% at 0% 104%,rgba(111,139,255,.14),transparent 66%),linear-gradient(172deg,#1B2868 0%,#101A4C 42%,#080D2B 100%)}
.ar-lob .lb-sub{color:rgba(214,224,255,.8)}

.lb-inv{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eb vs" "t t" "a a";gap:8px 10px;margin:0 0 18px;padding:16px 16px 12px;border-radius:24px;color:#fff;
  background:radial-gradient(80% 110% at 0% 0%,rgba(111,139,255,.36),transparent 60%),radial-gradient(80% 110% at 100% 0%,rgba(242,178,102,.32),transparent 60%),linear-gradient(180deg,#1C2865 0%,#121B4E 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 26px 50px -28px rgba(0,0,0,.85)}
.lb-inv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.lb-iv-t{grid-area:t;min-width:0}
.lb-iv-eb{grid-area:eb;align-self:center;display:flex;align-items:center;margin:0;font-size:13px;font-weight:700;color:#FFD9A8}
.lb-inv .ar-pulse{background:var(--ar-b);box-shadow:0 0 0 0 rgba(242,178,102,.6)}
.lb-iv-t h2{margin:0;font:800 23px/1.1 var(--f-display);letter-spacing:-.02em;color:#fff}
.lb-iv-l{margin:6px 0 0;font-size:14.5px;line-height:1.4;color:rgba(232,238,255,.82)}
.lb-iv-c{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 0 0;font-size:13.5px;font-weight:600;color:rgba(232,238,255,.86)}
.lb-iv-c i{font-style:normal;color:rgba(232,238,255,.45)}
.lb-iv-c b{font-weight:800;color:#fff}
.lb-iv-g{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:rgba(240,194,94,.16);box-shadow:inset 0 0 0 1px rgba(240,194,94,.45);color:#FFE3A1}
.lb-iv-g b{color:#FFE3A1;font-variant-numeric:tabular-nums}
.lb-iv-vs{grid-area:vs;display:flex;align-items:center;gap:6px;align-self:start}
.lb-iv-p{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lb-iv-p > b{display:none}
.lb-iv-vs .ar-av.lg{width:40px;height:40px;font-size:17px}
.lb-iv-p.a .ar-av{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 0 0 2px var(--ar-a),0 0 22px rgba(111,139,255,.55)}
.lb-iv-p.b .ar-av{box-shadow:inset 0 0 0 2px rgba(242,178,102,.8),0 0 22px rgba(242,178,102,.35)}
.lb-iv-x{font:900 italic 17px/1 var(--f-display);letter-spacing:-.04em;background:linear-gradient(180deg,#fff,#FFD98A);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 2px}
.lb-iv-a{grid-area:a;display:grid;gap:8px;margin-top:6px}
.lb-iv-go{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 16px;border:0;border-radius:16px;background:#25D366;color:#06301A;font:800 16.5px/1.1 var(--f-display);text-decoration:none;cursor:pointer;text-align:center;
  box-shadow:0 16px 30px -16px rgba(37,211,102,.9);transition:transform .15s var(--spring),filter .2s}
.lb-iv-go:hover{filter:brightness(1.05)}
.lb-iv-go:active{transform:scale(.98)}
.lb-iv-go svg{flex:none;width:24px;height:24px}
.lb-iv-go[data-arroomgo]{background:#fff;color:#14215C;box-shadow:0 16px 30px -18px rgba(0,0,0,.9)}
.lb-iv-gi{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(242,178,102,.22);color:#B4651A}
.lb-iv-gi svg{width:17px;height:17px}
.lb-iv-go.sec{min-height:46px;background:transparent;color:#fff;font-size:15px;box-shadow:inset 0 0 0 1.5px rgba(37,211,102,.75)}
.lb-iv-go.sec svg{color:#25D366;width:21px;height:21px}
.lb-iv-more{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;margin:-2px 0 0;padding:0 8px;border:0;border-radius:12px;background:none;color:rgba(232,238,255,.78);font:600 14px/1.2 var(--f-body);cursor:pointer}
.lb-iv-more:hover{color:#fff;background:rgba(255,255,255,.06)}
.lb-iv-more svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb2 > .lb-inv{animation:lbUp .6s var(--spring) .03s both}
@media (min-width:900px){
  .lb-inv{grid-template-columns:minmax(0,1fr);grid-template-areas:"vs" "eb" "t" "a";gap:8px;margin:0 0 18px;padding:22px 22px 14px;align-self:start}
  .lb-inv::before{background:linear-gradient(100deg,transparent 49.8%,rgba(255,255,255,.16) 50%,transparent 50.2%) top/100% 112px no-repeat}
  .lb-iv-eb{margin-top:6px}
  .lb-iv-vs{justify-content:space-between;gap:10px;padding:0 6px}
  .lb-iv-p > b{display:block;max-width:9em;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
  .lb-iv-p.b > b{color:#FFD9A8}
  .lb-iv-vs .ar-av.lg{width:62px;height:62px;font-size:26px}
  .lb-iv-x{font-size:44px}
  .lb-iv-t h2{font-size:28px}
  .lb2 > .lb-side{align-self:start}
}
@media (max-width:370px){.lb-iv-vs .ar-av.lg{width:34px;height:34px;font-size:15px}.lb-iv-x{font-size:15px}.lb-iv-t h2{font-size:21px}}
/* kutucuk tonları: Kim Kazandı? kum, davet düello */
.lb-tile.kk .lb-ti{background:rgba(232,211,164,.16);color:#F1E2BE}
.lb-tile.inv .lb-ti{background:rgba(37,211,102,.16);color:#5BE38F}
.lb-tile.inv{background:linear-gradient(100deg,rgba(111,139,255,.14),rgba(242,178,102,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* davet ekranı ve oda */
.ar-inv-l{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--muted)}
.ar-inv-l .ar-g,.ar-g{color:#FFE3A1;font-weight:800}
.ar-room-sh{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.ar-room-sh > span{flex-basis:100%;text-align:center}
.ar-rsb{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--ink);font:650 14px/1 var(--f-body);text-decoration:none;cursor:pointer}
.ar-rsb:hover{background:rgba(255,255,255,.14)}
.ar-rsb svg{width:19px;height:19px}
.ar-rsb[data-arrsw] svg{color:#25D366}
.btn.ar-invb svg{width:19px;height:19px;color:#25D366}
@media (prefers-reduced-motion:reduce){.lb2 > .lb-inv{animation:none}.lb-iv-go{transition:none}}
.ar-room-sh[hidden]{display:none}
/* 23.10: davet ve oda ekranı sahneden uzunsa üstü kesilmesin. Oyun kipinde ekran dikey esnek sütun; "justify-content:center" taşan
   içeriğin başını kaydırılamaz biçimde kesiyordu. Ortalama otomatik kenar boşluğuyla: sığarsa ortada, sığmazsa baştan başlar. */
html.game-on .ar > .ar-scr.ar-invw:not(.out),html.game-on .ar > .ar-scr.ar-roomw:not(.out){justify-content:flex-start;align-items:center}
html.game-on .ar > .ar-scr.ar-invw:not(.out) > .ar-inv,html.game-on .ar > .ar-scr.ar-roomw:not(.out) > .ar-room{margin-block:auto}
.ar-inv .ar-inv-a .ar-ib{flex:1 1 calc(50% - 4px)}
@media (min-width:560px){.ar-inv .ar-inv-a .ar-ib{flex:1 1 0}}
/* 23.10: davet ekranı düzeni — önce gönder (WhatsApp, sonra diğer yollar), sonra oda; arkadaşının göreceği mesaj en altta.
   VS bloğu davet ekranında yok (mesaj görselinde var); bağlantıyla gelen davette (land) kalır. Masaüstünde iki sütun. */
.ar-inv:not(.land) > .ar-vsb{display:none}
.ar-inv:not(.land) > .ar-inv-h{order:1}
.ar-inv:not(.land) > .ar-inv-a{order:2}
.ar-inv:not(.land) > .ar-inv-go{order:3}
.ar-inv:not(.land) > .ar-inv-solo{order:4}
.ar-inv:not(.land) > .ar-wa{order:5}
.ar-inv:not(.land) > .ar-inv-x{order:6}
.ar-inv:not(.land) > .ar-inv-go,.ar-inv:not(.land) > .ar-inv-solo{width:100%;align-self:stretch}
.ar .ar-inv:not(.land) > .ar-inv-go.btn.primary{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.ar .ar-inv:not(.land) > .ar-inv-go.btn.primary:hover{background:rgba(255,255,255,.08)}
.ar-inv:not(.land) > .ar-wa::before{content:attr(data-cap);display:block;margin:0 0 10px;font-size:12.5px;font-weight:650;color:rgba(233,237,239,.62)}
@media (min-width:900px){
  .ar-inv:not(.land){max-width:1000px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"h wa" "a wa" "go wa" "solo wa" "x wa";grid-template-rows:repeat(4,max-content) 1fr;column-gap:36px;row-gap:12px;align-items:start}
  .ar-inv:not(.land) > .ar-inv-h{grid-area:h}
  .ar-inv:not(.land) > .ar-inv-a{grid-area:a}
  .ar-inv:not(.land) > .ar-inv-go{grid-area:go}
  .ar-inv:not(.land) > .ar-inv-solo{grid-area:solo}
  .ar-inv:not(.land) > .ar-wa{grid-area:wa}
  .ar-inv:not(.land) > .ar-inv-x{grid-area:x;justify-content:flex-start}
  .ar-inv:not(.land) .ar-inv-a .ar-ib{flex:1 1 calc(50% - 4px)}
}