/* =====================================================================================================================================
   DÜELLO · OYUN EKRANI (v2026.10-zzzz) · "Gece manejinde yayın grafiği"
   Yedi rollü ekibin birleşik şartnamesi (proje belgesi claude/velogait-duello-yapim-2710.md). İşaretleme js/arena_gx.js, yalnız gx- ad alanı:
   eski .ar-run kuralları (index.html, zzr-arena2, zzu-arena3) yeni öğelere eşleşmez; @layer yok.
   Kurallar:
   - Renk: altın yalnız gerçek 1. (kokart), temiz tur kokartı ve tek birincil eylem; her zaman metal (3 durak). Taraf renkleri düz:
     sol #86A2FF, sağ #F39A5B. Yeşil = temiz/doğru, kırmızı = sırık/ceza.
   - Yarıçap yalnız 6 / 10 / 16 / 22. 999 px hap ve gradyan metin yok; cam ve backdrop-filter yok.
   - Rakam gösteren öğede font: kısaltması yok (font-variant-numeric'i sıfırlıyordu); rakamlar tabular.
   - Hareket yalnız transform/opacity; her sınıfın kendi eğrisi (var(--spring) / var(--bounce) kullanılmaz); hareketi azaltta yok.
   - Tek ışık yönü: yukarıdan. Yükseltilmiş yüzey: üstte 1 px iç parlama, aşağı düşen gölge.
   ===================================================================================================================================== */

/* ---------- uygulama kabuğu: oyun ekranı tam ekran (html.gx-play; kökte :has() yok) */
html.gx-play .topbar,html.gx-play .rail,html.gx-play #tabbar,html.gx-play .totop,html.gx-play .ar-foot{display:none!important}
html.gx-play .main{padding:0!important;overflow:hidden!important}
html.gx-play .page.arena{animation:none!important;transform:none!important;padding:0!important;max-width:none}
.ar[data-ar].gx-on{position:fixed;inset:0;z-index:60;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:0!important;
  background:#07031A!important;box-shadow:none!important;overflow:hidden;isolation:isolate;display:block!important}
.ar[data-ar].gx-on::before,.ar[data-ar].gx-on::after,.ar[data-ar].gx-on > .ar-bg{display:none!important}
.ar[data-ar].gx-on > .ar-scr,.ar[data-ar].gx-on > .ar-scr.out{position:absolute!important;inset:0!important;z-index:1;margin:0!important;max-width:none!important;width:auto!important;
  padding:0;gap:0;overflow:hidden;display:block}
.ar[data-ar] > .gx-fx{z-index:0}

/* ---------- belirteçler (sanat 3.1) */
.gx-run,.gx-end{
  --n0:#05081A;--n1:#0A1030;--n2:#0E1640;--pn:#0C1434;--pn2:#121B44;--pn3:#18235A;
  --hair:rgba(226,232,255,.10);--hair2:rgba(226,232,255,.18);--hi:rgba(255,255,255,.07);
  --i1:#F4F6FC;--i2:#C7CEE4;--i3:#8E98BC;--i4:#5F6A92;
  --a:#86A2FF;--b:#F39A5B;--ok:#36C987;--oki:#5BE0A2;--no:#FF5D5D;--noi:#FF8A8A;
  --g1:#FFE9B0;--g2:#F2C35A;--g3:#B8862C;
  --sh1:0 1px 0 rgba(0,0,0,.35),0 10px 24px -12px rgba(0,0,0,.65);--sh2:0 2px 0 rgba(0,0,0,.35),0 28px 56px -20px rgba(0,0,0,.8);
  --e-in:cubic-bezier(.55,0,.75,.2);--e-out:cubic-bezier(.22,1,.36,1);--e-fall:cubic-bezier(.5,0,.75,0);--e-num:cubic-bezier(.2,.9,.25,1);--e-stamp:cubic-bezier(.3,1.7,.5,1);
  --gtop:max(8px,env(safe-area-inset-top,0px));--gbot:max(10px,env(safe-area-inset-bottom,0px));--gl:max(12px,env(safe-area-inset-left,0px));--gr:max(12px,env(safe-area-inset-right,0px));
  color:var(--i1);font-family:var(--f-body);-webkit-tap-highlight-color:transparent}
.gx-run *,.gx-end *{box-sizing:border-box}
.gx-run b,.gx-end b{font-weight:750}

/* ---------- oyun ekranı ızgarası (telefon dikey: çubuk · HUD · soru · deste · dok) */
.ar-scr.gx-run{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"bar" "hud" "q" "deck" "dock";row-gap:8px;padding:var(--gtop) var(--gr) var(--gbot) var(--gl)!important;user-select:none;-webkit-user-select:none;touch-action:manipulation}

/* oyun çubuğu: çık · mod · ses */
.gx-bar{grid-area:bar;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;height:44px}
.gx-ib,.gx-bar .gm-snd{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(12,20,56,.9);
  box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--hair);color:var(--i2);cursor:pointer;transition:transform .08s var(--e-out),background-color .15s}
.gx-ib:active,.gx-bar .gm-snd:active{transform:scale(.94)}
.gx-ib svg{width:18px;height:18px}
.gx-bar .gm-snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.gx-bar .gm-snd[aria-pressed="false"]{color:var(--i3)}
.gx-mode{min-width:0;text-align:center;text-shadow:0 1px 2px rgba(7,3,26,.9),0 0 12px rgba(7,3,26,.85);font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--i2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-ib:focus-visible,.gx-bar .gm-snd:focus-visible,.gx-pb:focus-visible,.gx-btn:focus-visible,.gx-card:focus-visible{outline:2.5px solid #A9BBFF;outline-offset:3px}

/* ---------- HUD: zamanlama kutusu (CEZA | SÜRE | SERİ) */
.gx-hud{grid-area:hud;display:flex;flex-direction:column;gap:6px;min-width:0}
.gx-box{container:gxb / inline-size;display:grid;grid-template-columns:1fr 1.3fr 1.3fr;height:50px;border-radius:10px;background:rgba(6,10,32,.86);
  box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--hair),var(--sh1);overflow:hidden}
.gx-c{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 12px}
.gx-c + .gx-c{box-shadow:inset 1px 0 0 var(--hair)}
.gx-k{font-size:9.5px;font-weight:650;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--i3)}
.gx-vw{display:flex;align-items:baseline;gap:4px;margin-top:4px;line-height:1;white-space:nowrap}
.gx-v{display:inline-block;font-family:var(--f-display);font-size:22px;font-weight:750;line-height:1;letter-spacing:-.01em;color:var(--i1);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* süre kutusu sabit genişlikte (0,0–99,9 aynı); düzen hesabı kutuda kalır */
.gx-tm .gx-v{width:3.5ch;text-align:right;transition:opacity .16s}
.gx-tm small{font-size:12px;font-weight:600;color:var(--i3)}
.gx-tm small span{font-weight:650}
.gx-tm[data-st="l10"] .gx-v{color:#FFB4A2}
.gx-tm[data-st="over"] .gx-v,.gx-tm[data-st="over"] small{color:var(--noi)}
.gx-tm.frz .gx-v{opacity:.62}
.gx-tb{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.gx-tb i{position:absolute;inset:0;background:rgba(244,246,252,.72);transform-origin:0 50%;will-change:transform}
.gx-tm[data-st="l10"] .gx-tb i{background:#FFB4A2}
.gx-tm[data-st="over"] .gx-tb{background:repeating-linear-gradient(135deg,var(--no) 0 4px,#fff 4px 8px);opacity:.7}
.gx-run.fin .gx-tm .gx-v{width:auto;color:var(--i1);animation:gxPulse .22s var(--e-out)}
/* ceza: sırık düşünce rakam yukarıdan iner, "+4" yükselir; ceza varken kırmızı */
.gx-flt .gx-vw{position:relative}
.gx-flt.has .gx-v{color:var(--noi)}
.gx-flt.bump .gx-v{animation:gxDrop .3s var(--e-out)}
.gx-plus{position:absolute;left:26px;top:-6px;font-style:normal;font-size:12px;font-weight:800;color:var(--noi);opacity:0;pointer-events:none}
.gx-flt.bump .gx-plus{animation:gxPlus .7s var(--e-out)}
/* seri: üç nal (2, 4, 6'da dolar); 0–1'de yazı yok, bölme genişliği sabit */
.gx-gait .gx-vw{gap:6px}
.gx-sh{display:inline-flex;gap:1px;color:var(--i4)}
.gx-sh svg{width:14px;height:14px}
.gx-gait[data-g="1"] .gx-sh svg:nth-child(-n+1),.gx-gait[data-g="2"] .gx-sh svg:nth-child(-n+2),.gx-gait[data-g="3"] .gx-sh svg{color:var(--oki)}
.gx-gait em{min-width:0;font-style:normal;font-size:13px;font-weight:750;line-height:1;color:var(--i1);white-space:nowrap}
.gx-gait em small{font-size:11px;font-weight:650;color:var(--i3);font-variant-numeric:tabular-nums}
.gx-gait em .ad{font-size:12px;font-weight:650;color:var(--i3)}
.gx-gait.rise em{animation:gxUp .3s var(--e-out)}
.gx-gait.rise .gx-sh svg{animation:gxBeat .2s var(--e-out) 2}
.gx-gait[data-g="2"].rise .gx-sh svg{animation-duration:.13s;animation-iteration-count:3}
.gx-gait[data-g="3"].rise .gx-sh svg{animation-duration:.09s;animation-iteration-count:4}
.gx-gait.brk .gx-sh{animation:gxShake .18s linear 2}

/* ---------- engel şeridi (parkur planı): tür ikonu, altta numara levhası, şimdiki engelde imleç, temiz hat */
.gx-trk{position:relative;display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr)) 12px;align-items:end;margin:0;padding:8px 0 0;list-style:none}
.gx-trk::before{content:"";position:absolute;left:0;right:12px;bottom:18px;height:1px;background:var(--hair2)}
.gx-f{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding-bottom:2px}
.gx-fi{position:relative;display:block;width:28px;height:22px;opacity:.55;transition:opacity .2s}
.gx-fs{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}
.gx-fs .p{fill:#C7CEE4}.gx-fs .r rect{fill:#E9EDF8}.gx-fs .r .s{fill:#4766E0}.gx-fs .gp{fill:#8E98BC}.gx-fs .wt{fill:#4C8DFF;opacity:.85}
.gx-fs .tp{transform-box:fill-box;transform-origin:100% 50%}
.gx-fn{min-width:16px;height:12px;padding:0 3px;border-radius:3px;background:#E9EDF8;color:#0B1230;font-size:9px;font-weight:750;line-height:12px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 1px 0 rgba(0,0,0,.35);opacity:.5;transition:opacity .2s}
.gx-f.cur .gx-fi,.gx-f.cur .gx-fn,.gx-f.ok .gx-fi,.gx-f.no .gx-fi,.gx-f.ok .gx-fn,.gx-f.no .gx-fn{opacity:1}
.gx-f.cur::before{content:"";position:absolute;top:-7px;left:50%;width:0;height:0;margin-left:-4px;border:4px solid transparent;border-top-color:var(--i1);border-bottom:0;animation:gxCur .3s var(--e-out)}
.gx-f.cur .gx-fn{box-shadow:0 0 0 1.5px var(--n0),0 0 0 3px var(--i1)}
.gx-f.ok .gx-fs .r rect{fill:var(--ok)}.gx-f.ok .gx-fs .r .s{fill:#1E8A5A}.gx-f.ok .gx-fs .p{fill:var(--oki)}
.gx-f.ok .gx-fn{background:var(--oki);color:#05261A}
.gx-f.no .gx-fs .tp rect{fill:var(--no)}.gx-f.no .gx-fs .tp .s{fill:#fff}.gx-f.no .gx-fs .p{fill:var(--noi)}
.gx-f.no .gx-fs .tp{transform:rotate(24deg)}
.gx-f.no .gx-fn{background:var(--noi);color:#2B0606}
.gx-f.fall .gx-fs .tp{animation:gxTp .42s var(--e-fall) both}
.gx-hop{position:absolute;left:-3px;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--i1);box-shadow:0 0 6px rgba(244,246,252,.7);opacity:0;pointer-events:none}
.gx-f.hop .gx-hop{animation:gxHop .42s linear both}
.gx-f.hop .gx-fs .tp{animation:gxTrem .2s .34s}
/* temiz hat: art arda temiz engeller zeminde birleşir */
.gx-cl{position:absolute;left:0;right:0;bottom:16px;height:3px;border-radius:2px;background:var(--ok);opacity:0;transition:opacity .25s}
.gx-f[data-cl="o"] .gx-cl{left:28%;right:28%;opacity:1}.gx-f[data-cl="s"] .gx-cl{left:50%;opacity:1}.gx-f[data-cl="m"] .gx-cl{opacity:1}.gx-f[data-cl="e"] .gx-cl{right:50%;opacity:1}
/* son üç engel: eşitlik bölgesi çerçeveli */
.gx-f.l3{background:linear-gradient(180deg,rgba(226,232,255,.06),rgba(226,232,255,.015))}
.gx-f.l3s{border-radius:6px 0 0 6px;box-shadow:inset 1px 0 0 var(--hair2)}
.gx-trk .gx-f.l3:nth-last-child(2){border-radius:0 6px 6px 0}
.gx-fin{align-self:stretch;position:relative}
.gx-fin i{position:absolute;left:4px;top:4px;bottom:16px;width:3px;border-radius:2px;background:repeating-linear-gradient(180deg,#F4F6FC 0 3px,#0B1230 3px 6px);opacity:.35}
.gx-run.fin .gx-fin i{opacity:1;animation:gxPulse .3s var(--e-out)}
/* hayalet ve canlı düello */
.gx-me,.gx-ghost{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:end;gap:6px}
.gx-gl{padding-bottom:16px;font-size:10.5px;font-weight:700;color:var(--i2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-trk.op{padding-top:0}.gx-trk.op .gx-fi{width:20px;height:16px}.gx-trk.op .gx-fn{display:none}.gx-trk.op::before{bottom:2px}.gx-ghost .gx-gl{padding-bottom:0}
.gx-trk.op .gx-f.ok .gx-fs .r rect{fill:var(--b)}
.gx-df{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11.5px;color:var(--i2)}
.gx-df i{font-style:normal;font-weight:750;font-variant-numeric:tabular-nums;color:var(--i1)}
.gx-df em{font-style:normal;font-weight:750;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07)}
.gx-df[data-st="a"] em{color:var(--oki)}.gx-df[data-st="b"] em{color:var(--noi)}
.gx-lanes{display:flex;flex-direction:column;gap:4px}
.gx-lanes .ar-lane:not(.me) .ar-lnt i.ok{background:var(--b)}
.gx-lanes .ar-lane:not(.me) .ar-lnh{background:var(--b);box-shadow:0 0 0 3px rgba(243,154,91,.25)}
.gx-lant{margin:0;min-height:1.35em;font-size:11.5px;line-height:1.35;color:var(--i2);text-align:center;opacity:0;transition:opacity .2s}
.gx-lant.on{opacity:1}
.gx-lanes .ar-lnn{color:var(--i1)}

/* ---------- soru */
.gx-q{grid-area:q;margin:0;text-align:center;line-height:1.15;text-shadow:0 1px 2px rgba(7,3,26,.9),0 0 18px rgba(7,3,26,.85)}
.gx-q b{display:block;font-family:var(--f-display);font-size:20px;font-weight:750;letter-spacing:-.01em;color:var(--i1)}
.gx-q span{display:block;margin-top:3px;font-size:12px;color:var(--i2)}

/* ---------- deste ve kart */
.gx-deck{grid-area:deck;position:relative;min-height:0;container:gxd / size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:center}
.gx-deck > .gx-card,.gx-deck > .gx-gh{grid-area:1/1}
.gx-gh{position:relative;z-index:0;align-self:end;margin:0 14px 4px;height:30px;border-radius:0 0 22px 22px;background:#0E1640;box-shadow:inset 0 -1px 0 var(--hair),0 8px 18px -10px #000;pointer-events:none}
.gx-gh.g2{margin:0 26px 0;height:24px;background:#0A1030;opacity:.85}
.gx-deck[data-left="1"] .gx-gh.g2,.gx-deck[data-left="0"] .gx-gh{opacity:0;transition:opacity .25s}
.gx-deck.step .gx-gh.g1{animation:gxStep .22s var(--e-out)}
.gx-deck.step .gx-gh.g2{animation:gxStep .22s .04s var(--e-out) backwards}
.gx-card{position:relative;z-index:2;align-self:start;display:flex;flex-direction:column;gap:10px;width:100%;max-height:calc(100cqh - 10px);margin-bottom:10px;padding:12px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--pn2),var(--pn) 38%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px var(--hair),var(--sh2);
  transform-origin:50% 125%;outline:none;cursor:grab;touch-action:pan-y}
.gx-card.hold{cursor:grabbing;will-change:transform}
.gx-card.gx-leave{grid-area:auto;position:absolute;z-index:3;margin:0;pointer-events:none}
/* künye: emaye yükseklik levhası + yarışma adı tek satır, altında tarih · yer · start */
.gx-ctx{display:flex;align-items:center;gap:10px;min-width:0}
.gx-hgt{flex:none;display:inline-flex;align-items:baseline;gap:1px;padding:5px 8px 4px;border-radius:6px;background:linear-gradient(180deg,#FFFFFF,#E4E8F4);color:#0B1230;
  box-shadow:inset 0 -1px 0 rgba(11,18,48,.18),0 1px 0 rgba(0,0,0,.35)}
.gx-hgt b{font-family:var(--f-display);font-size:15px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.gx-hgt small{font-size:10px;font-weight:700}
.gx-cm{display:flex;flex-direction:column;min-width:0;gap:2px}
.gx-cm b{font-size:12.5px;font-weight:650;line-height:1.25;color:var(--i1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-cm small{font-size:11px;line-height:1.25;color:var(--i3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* iki çul: üstte 3 px taraf şeridi, içte ince dikiş */
.gx-duo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.gx-side{--s:var(--a);position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:86px;padding:11px 10px 9px;border-radius:6px 6px 16px 16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--s) 17%,var(--pn)),color-mix(in srgb,var(--s) 6%,var(--pn)));
  box-shadow:inset 0 3px 0 var(--s),inset 0 0 0 1px color-mix(in srgb,var(--s) 32%,transparent);transition:transform .16s var(--e-out),opacity .16s}
.gx-side.R{--s:var(--b);text-align:right;align-items:flex-end}
.gx-side::before{content:"";position:absolute;inset:6px 5px 5px;border:1px dashed color-mix(in srgb,var(--s) 34%,transparent);border-radius:3px 3px 12px 12px;pointer-events:none}
.gx-rn{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--f-display);font-size:18px;font-weight:750;line-height:1.12;
  letter-spacing:-.01em;color:var(--i1);text-wrap:balance;overflow-wrap:anywhere}
.gx-rn[data-l="m"]{font-size:16px}.gx-rn[data-l="l"]{font-size:14.5px}.gx-rn[data-l="xl"]{font-size:13px}
.gx-hn{position:relative;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:11.5px;font-weight:650;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:var(--i2);overflow-wrap:anywhere}
.gx-ns{position:relative;margin-top:auto;font-size:10.5px;line-height:1.2;color:var(--i3)}
.gx-low{font-style:normal;color:var(--i2);text-decoration:underline dotted;text-underline-offset:2px}
.gx-vs{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:28px;height:20px;margin:-10px 0 0 -14px;border-radius:6px;background:var(--n1);
  box-shadow:inset 0 0 0 1px var(--hair2),0 2px 6px rgba(0,0,0,.5);transition:opacity .16s,transform .16s var(--e-out)}
.gx-vs b{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--i2)}
/* sürükleme: kenar ışığı (yalnız opaklık), eşikte ÖNDE damgası, eğilen yarı büyür, öteki söner */
.gx-glw{position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1.5px var(--s),0 0 26px -2px color-mix(in srgb,var(--s) 75%,transparent);opacity:0;pointer-events:none;will-change:opacity}
.gx-stmp{position:absolute;top:-1px;left:10px;padding:3px 6px;border-radius:0 0 6px 6px;background:var(--i1);color:#0B1230;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(-6px) scale(.7);transition:opacity .12s,transform .16s var(--e-stamp);pointer-events:none}
.gx-side.R .gx-stmp{left:auto;right:10px}
.gx-card[data-lean="L"] .gx-side.L,.gx-card[data-lean="R"] .gx-side.R{transform:scale(1.03)}
.gx-card[data-lean="L"] .gx-side.L{transform-origin:100% 50%}.gx-card[data-lean="R"] .gx-side.R{transform-origin:0 50%}
.gx-card[data-lean="L"] .gx-side.R,.gx-card[data-lean="R"] .gx-side.L{opacity:.72}
.gx-card[data-lean="L"] .gx-side.L .gx-stmp,.gx-card[data-lean="R"] .gx-side.R .gx-stmp{opacity:1;transform:none}
.gx-card[data-lean="L"] .gx-side.L .gx-glw,.gx-card[data-lean="R"] .gx-side.R .gx-glw{opacity:1!important}
/* kafa kafaya ölçüler */
.gx-body{display:grid;min-height:0}
.gx-h2h,.gx-rv{grid-area:1/1;min-width:0}
.gx-h2h{display:flex;flex-direction:column;transition:opacity .12s,transform .12s var(--e-out)}
.gx-r{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline;column-gap:8px;padding:7px 2px 11px}
.gx-r + .gx-r{box-shadow:inset 0 1px 0 rgba(226,232,255,.06)}
.gx-r b{font-family:var(--f-display);font-size:18px;font-weight:750;line-height:1;color:var(--i2);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
.gx-r b.hi{color:var(--i1)}
.gx-r .va{text-align:left}.gx-r .vb{text-align:right}
.gx-fr{margin:0 4px;font-size:10px;font-weight:600;color:var(--i3)}
.gx-rl{font-size:9.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--i3);text-align:center;white-space:nowrap}
.gx-rb{position:absolute;left:2px;right:2px;bottom:3px;display:grid;grid-template-columns:1fr 1fr;gap:4px;height:4px}
.gx-rb i{position:relative;display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.gx-rb i::after{content:"";position:absolute;top:0;bottom:0;width:var(--w);border-radius:2px}
.gx-rb i.a::after{right:0;background:var(--a)}.gx-rb i.b::after{left:0;background:var(--b)}
.gx-rb i.lo::after{background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 5px)}
.gx-rb i.a.lo{color:var(--a)}.gx-rb i.b.lo{color:var(--b)}
.gx-r b.lo{opacity:.82}
.gx-ck{display:inline-block;width:12px;height:12px;margin:0 4px;vertical-align:1px;border-radius:50%;background:rgba(54,201,135,.18);box-shadow:inset 0 0 0 1px rgba(54,201,135,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2l1.8 1.8 3.8-4' fill='none' stroke='%235BE0A2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.gx-foot{display:flex;justify-content:center;gap:10px;margin-top:-2px;font-size:10.5px;color:var(--i3);text-align:center}
.gx-foot span span{color:var(--i3)}

/* ---------- açılış: sonuç levhaları (ofsetler rev = 160 ms'ye göre; seçilen taraf önce) */
.gx-rv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch;visibility:hidden}
.gx-card.rev .gx-h2h{opacity:0;transform:translateY(-6px)}
.gx-card.rev .gx-rv{visibility:visible}
.gx-card.pk .gx-vs{opacity:.25;transform:scale(.7)}
.gx-res{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 10px 11px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--hair);opacity:0}
.gx-res.R{align-items:flex-end;text-align:right}
.gx-card.rev .gx-res{opacity:1;transition:opacity .12s}
.gx-rk{display:flex;flex-direction:column;line-height:1}
.gx-res.R .gx-rk{align-items:flex-end}
.gx-rkn{font-family:var(--f-display);font-size:60px;font-weight:800;line-height:.86;letter-spacing:-.05em;color:var(--i1);font-variant-numeric:tabular-nums;transform-origin:0 80%}
.gx-res.R .gx-rkn{transform-origin:100% 80%}
.gx-rkn i{font-style:normal;font-size:.32em;font-weight:750;letter-spacing:0;color:var(--i3);vertical-align:top;margin-left:2px}
.gx-out{font-family:var(--f-display);font-size:30px;font-weight:800;color:var(--noi)}
.gx-nr{font-size:19px;font-weight:750;color:var(--i2)}
.gx-rk small{margin-top:4px;font-size:9.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--i3)}
.gx-rls{display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-height:16px}
.gx-res.R .gx-rls{justify-content:flex-end}
.gx-rls i{display:block;width:24px;height:9px;transform:rotate(-8deg)}
.gx-rls i .gx-rlsv{display:block;width:100%;height:100%}
.gx-rls em{font-style:normal;font-size:11px;font-weight:750;color:var(--noi)}
.gx-clr{display:inline-block;padding:3px 7px;border-radius:6px;background:rgba(54,201,135,.16);box-shadow:inset 0 0 0 1px rgba(54,201,135,.45);color:var(--oki);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.gx-tf{font-style:normal;font-size:11px;font-weight:750;color:var(--noi)}
.gx-l1{font-size:12.5px;color:var(--i2);white-space:nowrap}
.gx-l1 b,.gx-l2 b{color:var(--i1);font-weight:750;font-variant-numeric:tabular-nums}
.gx-t{display:inline-block;min-width:3.6ch;text-align:right}
.gx-l2{font-size:11.5px;color:var(--i3);white-space:nowrap}
.gx-ahd{position:absolute;top:-1px;left:50%;padding:3px 8px;border-radius:0 0 6px 6px;background:var(--i1);color:#0B1230;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transform:translateX(-50%)}
.gx-tag{display:none;position:absolute;top:-1px;left:50%;padding:3px 8px;border-radius:0 0 6px 6px;background:var(--n1);box-shadow:inset 0 0 0 1px var(--no);color:var(--noi);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transform:translateX(-50%);white-space:nowrap}
.gx-card[data-pick="L"]:not([data-win="L"]) .gx-res.L .gx-tag,.gx-card[data-pick="R"]:not([data-win="R"]) .gx-res.R .gx-tag{display:block}
.gx-ros{position:absolute;top:-10px;right:-4px;width:40px;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.gx-res.R .gx-ros{right:auto;left:-4px}
.gx-ros .rb{fill:#B8862C}.gx-ros .rb.b{fill:#9A6E22}.gx-ros .pt circle{fill:#F2C35A}.gx-ros .pt circle.q{fill:#D9A441}
.gx-ros .c2{fill:none;stroke:#8E6418;stroke-width:1.2;opacity:.6}
.gx-ros text{font-family:var(--f-display);font-size:16px;font-weight:800;fill:#3B2604}
.gx-res.win{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(244,246,252,.85),0 18px 30px -18px rgba(0,0,0,.85)}
.gx-res.win.rk1{box-shadow:inset 0 0 0 1.5px var(--g2),0 18px 30px -18px rgba(0,0,0,.85)}
/* koreografi: seçilen tarafın derecesi rev+60, öteki rev+180 (0,85 genlik); sırıklar rev+260 düşer; ÖNDE ve panel rev+380 */
.gx-card.rev .gx-res .gx-rkn,.gx-card.rev .gx-res .gx-out,.gx-card.rev .gx-res .gx-nr{animation:gxNum2 .26s .18s var(--e-num) both}
.gx-card.rev[data-pick="L"] .gx-res.L .gx-rkn,.gx-card.rev[data-pick="R"] .gx-res.R .gx-rkn,.gx-card.rev[data-pick="L"] .gx-res.L .gx-out,.gx-card.rev[data-pick="R"] .gx-res.R .gx-out,
.gx-card.rev[data-pick="L"] .gx-res.L .gx-nr,.gx-card.rev[data-pick="R"] .gx-res.R .gx-nr,.gx-card.rev[data-pick=""] .gx-res.L .gx-rkn{animation:gxNum .3s .06s var(--e-num) both}
.gx-card.rev .gx-rls i{animation:gxRail .26s calc(.26s + var(--k) * .07s) var(--e-fall) both}
.gx-card.rev .gx-clr{animation:gxStamp .2s .26s var(--e-stamp) both}
.gx-card.rev .gx-ahd,.gx-card.rev .gx-tag{animation:gxStampC .2s .38s var(--e-stamp) both}
.gx-card.rev .gx-ros{animation:gxRos .5s .38s var(--e-out) both}
.gx-card.rev .gx-res.win{animation:gxPanel .38s .38s var(--e-out) both}
.gx-card.rev .gx-res:not(.win){animation:gxDim .3s .38s linear both}
.gx-card.ff .gx-res,.gx-card.ff .gx-res *{animation-delay:0s!important;animation-duration:1ms!important}
/* ⓘ ayrıntı (açıkken geçiş bekler) */
.gx-info{display:none;position:absolute;left:8px;right:8px;bottom:8px;z-index:6;padding:12px 14px;border-radius:16px;background:rgba(9,16,48,.97);box-shadow:inset 0 0 0 1px var(--hair2),0 18px 40px -16px #000;font-size:12.5px;line-height:1.45;color:var(--i2)}
.gx-card.cf-on .gx-info{display:block;animation:gxUp .2s var(--e-out)}
.gx-info p{margin:0}.gx-info p + p{margin-top:6px}
.gx-info .gx-why span,.gx-info .gx-nms span{color:var(--i3)}
.gx-info .gx-sig.y{color:var(--oki)}.gx-info .gx-sig.s{color:#B9C6FF}
.gx-info b.a{color:var(--a)}.gx-info b.b{color:var(--b)}

/* ---------- bant: zil, son üç engel, temiz tur için son engel */
.gx-band{position:absolute;left:50%;top:2px;z-index:7;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 14px;border-radius:10px;background:rgba(6,10,32,.94);
  box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--hair2),0 12px 26px -12px #000;opacity:0;transform:translate(-50%,-8px);pointer-events:none;white-space:nowrap}
.gx-band b{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--i1)}
.gx-band span{font-size:11px;color:var(--i2)}
.gx-band.cl b{color:var(--oki)}
.gx-band.on{animation:gxBand 1.25s var(--e-out) both}

/* ---------- dok: seçim düğmeleri ve bildirim levhası */
.gx-dock{grid-area:dock;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:62px}
.gx-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.gx-pick[hidden]{display:none}
.gx-pb{--s:var(--a);display:flex;align-items:center;gap:8px;min-width:0;height:54px;padding:0 14px;border:0;border-radius:16px;cursor:pointer;color:var(--i1);font-family:var(--f-body);font-size:15px;font-weight:700;
  background:linear-gradient(180deg,color-mix(in srgb,var(--s) 22%,var(--pn3)),color-mix(in srgb,var(--s) 10%,var(--pn2)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px color-mix(in srgb,var(--s) 45%,transparent),0 12px 24px -14px rgba(0,0,0,.85);transition:transform .08s var(--e-out)}
.gx-pb.R{--s:var(--b);justify-content:flex-end;text-align:right}
.gx-pb:active{transform:scale(.97)}
.gx-pb:disabled{cursor:default}
.gx-pb svg{flex:none;width:18px;height:18px;color:var(--s)}
.gx-pb span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-pick.in .gx-pb{animation:gxUp .24s var(--e-out) backwards}.gx-pick.in .gx-pb.R{animation-delay:.04s}
.gx-pick.out{animation:gxOut .14s var(--e-in) forwards}
/* bildirim levhası dokta yukarı doğru büyür; deste yüksekliği değişmez, kart kıpırdamaz */
.gx-after{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:stretch;gap:8px}
.gx-after[hidden]{display:none}
.gx-ntf{--st:var(--ok);position:relative;flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic k c" "ic t c" "ic v v";align-items:center;column-gap:10px;row-gap:2px;min-height:62px;padding:10px 12px 12px 16px;
  border-radius:16px;background:linear-gradient(180deg,var(--pn3),var(--n2));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px var(--hair2),0 16px 32px -18px #000;overflow:hidden;
  animation:gxUp .24s var(--e-out) both}
.gx-ntf.no,.gx-ntf.ret{--st:var(--no)}
.gx-ntf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--st)}
.gx-ntf.big::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-100%);animation:gxSweep .7s .1s var(--e-out) both;pointer-events:none}
.gx-ni{grid-area:ic;display:grid;place-items:center;width:34px;height:34px}
.gx-nt{display:contents}
.gx-nk{grid-area:k;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--i3)}
.gx-nt > b{grid-area:t;min-width:0;font-size:16px;font-weight:750;line-height:1.2;color:var(--i1)}
.gx-nv{grid-area:v;min-width:0;font-size:12px;line-height:1.3;color:var(--i2)}
.gx-nv .v{font-weight:750;color:var(--oki)}.gx-ntf.no .gx-nv .v,.gx-ntf.ret .gx-nv .v{color:var(--noi)}
.gx-nc{grid-area:c;align-self:center;padding:5px 8px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;background:rgba(54,201,135,.14);color:var(--oki);box-shadow:inset 0 0 0 1px rgba(54,201,135,.35)}
.gx-nc b{font-variant-numeric:tabular-nums}
.gx-ntf.no .gx-nc,.gx-ntf.ret .gx-nc{background:rgba(255,93,93,.14);color:var(--noi);box-shadow:inset 0 0 0 1px rgba(255,93,93,.4)}
.gx-after .gm-cd{display:block;overflow:hidden;font-size:0;position:absolute;left:0;right:0;top:auto;bottom:0;height:2px;margin:0;border-radius:0;background:rgba(255,255,255,.06)}
.gx-after .gm-cd i{display:block;height:100%;background:rgba(244,246,252,.55);transform-origin:0 50%;will-change:transform}
.gx-after[data-adv="pause"] .gm-cd i{opacity:.35}
.gx-sec{position:absolute;left:2px;right:auto;top:-18px;font-size:11px;font-weight:600;color:var(--i2);pointer-events:none}
.gx-after .gx-go{display:none;align-items:center;gap:6px;height:62px;padding:0 14px;border:0;border-radius:16px;background:var(--pn3);box-shadow:inset 0 0 0 1px var(--hair2);color:var(--i1);font-size:14px;font-weight:700;cursor:pointer}
.gx-after .gx-go svg{width:16px;height:16px}
.gx-after[data-adv="man"] .gx-go{display:flex}
.gx-cfb{align-self:center;flex:none;font-family:var(--f-display);font-size:16px;font-weight:750;font-style:italic}
.gx-cfb[aria-pressed="true"]{background:var(--i1);color:#0B1230}
/* bildirim ikonları */
.gx-ic{display:block;width:32px;height:32px;overflow:visible}
.gx-ic .gd{fill:rgba(226,232,255,.3)}.gx-ic .po{fill:#C7CEE4}.gx-ic .rl{fill:#E9EDF8}.gx-ic .dt{fill:var(--i1)}
.gx-ic.ok .rl{fill:var(--ok)}.gx-ic.no .rl{fill:var(--no)}
.gx-ic.ok .dx{animation:gxDx .42s .1s linear both}.gx-ic.ok .dy{animation:gxDy .42s .1s both}
.gx-ic.ok .rl{transform-box:fill-box;transform-origin:50% 50%;animation:gxTrem .2s .36s}
.gx-ic.no .rl{transform-box:view-box;transform-origin:23px 15px;animation:gxRl .52s .08s var(--e-fall) both}
.gx-ic.ret .dx{animation:gxRet .5s .05s var(--e-out) both}
.gx-ic.gait{display:flex;gap:1px;width:auto;height:auto;color:var(--oki)}
.gx-ic.gait i{display:block;width:12px;height:12px}.gx-ic.gait svg{width:100%;height:100%}
.gx-ic.gait i{animation:gxBeat .2s calc(.12s + var(--k) * .2s) var(--e-out) both}
.gx-ic.gait[data-g="2"] i{animation-delay:calc(.12s + var(--k) * .13s)}.gx-ic.gait[data-g="3"] i{animation-delay:calc(.12s + var(--k) * .07s)}

/* ---------- çıkış onayı */
.gx-sheet{position:absolute;inset:0;z-index:30;display:grid;place-items:end center;padding:16px var(--gr) calc(var(--gbot) + 6px) var(--gl);background:rgba(3,5,15,.6)}
.gx-sheet[hidden]{display:none}
.gx-shc{width:min(420px,100%);display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:22px;background:var(--pn2);box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--hair2),var(--sh2);animation:gxUp .24s var(--e-out)}
.gx-shc b{font-size:17px;font-weight:750}
.gx-shc p{margin:0;font-size:13.5px;line-height:1.45;color:var(--i2)}
.gx-sha{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:16px;cursor:pointer;font-family:var(--f-body);font-size:15px;font-weight:700;
  color:var(--i1);background:var(--pn3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px var(--hair2);transition:transform .08s var(--e-out);text-decoration:none}
.gx-btn:active{transform:scale(.97)}
.gx-btn svg{width:18px;height:18px}
.gx-btn.pri{min-height:56px;color:#2A1A02;background:linear-gradient(180deg,var(--g1),var(--g2) 55%,var(--g3));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(90,60,10,.35),0 14px 28px -14px rgba(242,195,90,.55)}
.gx-shc .gx-btn.pri{min-height:48px}

/* ---------- masaüstü rayları (yalnız ≥ 1100 × 640) */
.gx-rail{display:none}
.gx-rh{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--i3)}
.gx-crs svg{display:block;width:100%;height:auto}
.gx-rf,.gx-lge{margin:0;font-size:11.5px;line-height:1.45;color:var(--i3)}
.gx-log{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.gx-log li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 3px 0 0 var(--ok);animation:gxUp .24s var(--e-out)}
.gx-log li.no{box-shadow:inset 3px 0 0 var(--no)}
.gx-ln{font-size:11px;font-weight:750;color:var(--i3);font-variant-numeric:tabular-nums}
.gx-lw{display:flex;flex-direction:column;min-width:0}
.gx-lw b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-lw small{font-size:10.5px;color:var(--i3);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-lr{font-size:12px;font-weight:750;color:var(--i2);font-variant-numeric:tabular-nums}

/* ---------- parkura giriş (hareket 3.3): HUD iner, engeller dikilir, soru gelir */
.gx-run.intro .gx-box{animation:gxDown .32s .06s var(--e-out) backwards}
.gx-run.intro .gx-trk.me .gx-fi{animation:gxRise .22s calc(.12s + var(--k) * .028s) var(--e-stamp) backwards;transform-origin:50% 100%}
.gx-run.intro .gx-q{animation:gxUp .22s .3s var(--e-out) backwards}
.gx-run.intro .gx-gh{animation:gxUp .3s .34s var(--e-out) backwards}
.gx-run.intro .gx-bar{animation:gxFade .2s backwards}

/* ---------- yoğunluk basamakları (deste yüksekliğine göre; kart asla taşmaz) */
@container gxd (max-height:370px){
  .gx-card{gap:8px;padding:10px}
  .gx-side{min-height:74px;padding:9px 9px 8px}
  .gx-rn{font-size:16px}.gx-rn[data-l="m"]{font-size:14.5px}.gx-rn[data-l="l"]{font-size:13.5px}.gx-rn[data-l="xl"]{font-size:12.5px}
  .gx-r{padding:5px 2px 9px}.gx-r b{font-size:16px}
  .gx-rkn{font-size:48px}
  .gx-foot{display:none}
}
@container gxd (max-height:310px){
  .gx-card{gap:6px;padding:9px 9px 8px;border-radius:16px}
  .gx-cm small,.gx-ns,.gx-fr{display:none}
  .gx-side{min-height:0;padding:8px 8px 7px}
  .gx-hn{font-size:10.5px}
  .gx-r{padding:4px 2px 7px}.gx-r b{font-size:15px}.gx-rb{height:3px}.gx-rb i{height:3px}
  .gx-rkn{font-size:40px}.gx-res{padding:13px 8px 8px;gap:4px}
  .gx-vs{display:none}
}
@container gxd (max-height:260px){
  .gx-ctx{display:none}
  .gx-rb{display:none}.gx-r{padding:3px 2px 4px}.gx-rl{font-size:8.5px}
  .gx-rkn{font-size:34px}
}
/* geniş kart (tablet, masaüstü): daha büyük ölçek */
@container gxd (min-width:540px) and (min-height:470px){
  .gx-card{gap:12px;padding:16px;border-radius:22px}
  .gx-side{min-height:100px;padding:14px 14px 12px}
  .gx-rn{font-size:22px}.gx-rn[data-l="m"]{font-size:19px}.gx-rn[data-l="l"]{font-size:17px}
  .gx-hn{font-size:12.5px}.gx-ns{font-size:11.5px}
  .gx-r{padding:9px 4px 13px}.gx-r b{font-size:22px}.gx-rl{font-size:10.5px}
  .gx-rkn{font-size:84px}.gx-res{padding:20px 14px 14px}.gx-l1{font-size:14px}
  .gx-cm b{font-size:14px}.gx-cm small{font-size:12px}.gx-hgt b{font-size:17px}
}

/* ---------- ekran kırılımları */
/* küçük telefon (320–375): HUD ve şerit sıkı */
@media (max-height:700px),(max-width:360px){
  .ar-scr.gx-run{row-gap:6px}
  .gx-box{height:44px}.gx-v{font-size:20px}.gx-c{padding:0 9px}
  .gx-fi{width:22px;height:18px}.gx-trk::before{bottom:16px}.gx-cl{bottom:14px}
  .gx-q b{font-size:17px}.gx-q span{display:none}
  .gx-pb{height:50px;font-size:14px}
}
/* zamanlama kutusu kendi genişliğine göre sıkışır (telefon, yatay telefonun dar sol sütunu): seri adı ve süre cezası hiç kesilmez */
@container gxb (max-width:400px){
  .gx-c{padding:0 8px}.gx-gait .gx-vw{gap:4px}.gx-sh svg{width:11px;height:11px}.gx-gait em{font-size:12px}.gx-gait em small{font-size:10.5px}
  .gx-tm[data-st="over"] small span{display:none}.gx-tm[data-st="over"] small b::before{content:"+"}
}
@container gxb (max-width:320px){
  .gx-gait .gx-sh{display:none}.gx-k{letter-spacing:.08em}
  .gx-tm:not([data-st="over"]) small{display:none}
}
@media (max-width:400px){.gx-nt > b{font-size:15px}}
@media (max-width:360px){
  .gx-ntf{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k c" "t c" "v v";padding-left:14px}.gx-ni{display:none}
}
/* yatay telefon (yükseklik ≤ 500) ve alçak yatay ekranlar (masaüstü ve dikey tablet düzenine sığmayan): iki sütun; solda HUD, soru ve
   seçim düğmeleri alt alta, sağda kart */
@media (orientation:landscape) and (max-height:500px),(orientation:landscape) and (min-width:681px) and (max-width:1099px) and (max-height:700px),(orientation:landscape) and (min-width:1100px) and (max-height:639px){
  .ar-scr.gx-run{grid-template-columns:minmax(250px,min(40%,420px)) minmax(0,680px);justify-content:center;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"bar deck" "hud deck" "q deck" "dock deck";column-gap:14px;row-gap:6px}
  .gx-q{align-self:center}
  .gx-pick{grid-template-columns:1fr;gap:8px}.gx-pb{height:46px}
  .gx-after{flex-wrap:wrap}.gx-ntf{min-height:56px}
  .gx-band{top:4px}
}
/* tablet dikey: ortada tek sütun */
@media (min-width:681px) and (min-height:701px){
  .ar-scr.gx-run{grid-template-columns:minmax(0,640px);justify-content:center;row-gap:12px;padding-top:calc(var(--gtop) + 8px)}
  .gx-box{height:56px}.gx-v{font-size:24px}
  .gx-fi{width:34px;height:27px}
  .gx-q b{font-size:24px}.gx-q span{font-size:13px}
  .gx-pb{height:58px;font-size:16px}
  .gx-dock{min-height:68px}.gx-ntf{min-height:68px}.gx-nt > b{font-size:17px}.gx-nv{font-size:13px}
}
/* masaüstü ve yatay tablet: üç bölge (solda canlı kroki, ortada oyun, sağda oynanan düellolar) */
@media (min-width:1100px) and (min-height:640px){
  .ar-scr.gx-run{grid-template-columns:minmax(220px,300px) minmax(0,640px) minmax(220px,300px);grid-template-rows:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"bar bar bar" "railL hud railR" "railL q railR" "railL deck railR" "railL dock railR";justify-content:center;column-gap:28px;row-gap:12px;padding:20px 28px 22px!important}
  .gx-rail{display:flex;flex-direction:column;gap:10px;align-self:start;min-width:0;padding:14px;border-radius:16px;background:rgba(6,10,32,.62);box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--hair)}
  .gx-rail-l{grid-area:railL}.gx-rail-r{grid-area:railR;max-height:100%;overflow:hidden}
  .gx-bar{max-width:1300px;width:100%;justify-self:center}
  .gx-sheet{place-items:center}
}
/* dikey tablet (iPad): sahne 1,2 ölçekte, sütun boşlukta yüzmez */
@media (min-width:760px) and (max-width:1099px) and (min-height:1000px){.ar-scr.gx-run,.ar-scr.gx-end{zoom:1.2}}
/* büyük ekran: bütün sahne ölçeklenir (4K'da 2,4; etkin alan yaklaşık 1600 × 900) */
@media (min-width:1600px) and (min-height:900px){.ar-scr.gx-run,.ar-scr.gx-end{zoom:1.2}}
@media (min-width:2200px) and (min-height:1250px){.ar-scr.gx-run,.ar-scr.gx-end{zoom:1.5}}
@media (min-width:2800px) and (min-height:1580px){.ar-scr.gx-run,.ar-scr.gx-end{zoom:1.9}}
@media (min-width:3400px) and (min-height:1900px){.ar-scr.gx-run,.ar-scr.gx-end{zoom:2.4}}

/* ---------- sonuç ekranı */
.ar-scr.gx-end{background:linear-gradient(180deg,rgba(7,3,26,.25),rgba(7,3,26,.7) 42%,rgba(7,3,26,.8));overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ar-scr.gx-end::-webkit-scrollbar{display:none}
.gx-endw{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto;padding:var(--gtop) var(--gr) calc(var(--gbot) + 12px) var(--gl)}
.gx-eh{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;animation:gxUp .3s var(--e-out) backwards}
.gx-et{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--f-display);font-size:28px;font-weight:750;letter-spacing:-.015em;line-height:1.1;outline:none}
.gx-et .gx-ros{position:static;width:44px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:gxRos .6s .2s var(--e-out) both}
.gx-end .ar-vh{margin:0;font-family:var(--f-display);font-size:26px;font-weight:750;text-align:center;line-height:1.15}
.gx-end .ar-vh small{display:block;margin-top:4px;font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--i3)}
.gx-end .ar-vh.win{color:var(--oki)}.gx-end .ar-vh.lose{color:var(--i1)}
/* tabela: ceza · süre büyük ve beyaz; puan ikinci */
.gx-tab{display:grid;grid-template-columns:1fr 1.25fr 1fr;border-radius:16px;background:rgba(6,10,32,.86);box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--hair),var(--sh2);overflow:hidden;animation:gxUp .32s .08s var(--e-out) backwards}
.gx-tc{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 14px 13px;min-width:0}
.gx-tc + .gx-tc{box-shadow:inset 1px 0 0 var(--hair)}
.gx-tv{font-family:var(--f-display);font-size:44px;font-weight:800;line-height:.95;letter-spacing:-.03em;color:var(--i1);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
.gx-tc small{margin-top:-4px;font-size:11px;font-weight:650;color:var(--i3)}
.gx-tc.pts .gx-tv{font-size:28px;color:var(--i2)}
.gx-tab.gx-clean .gx-tc:first-child .gx-tv{color:var(--oki)}
.gx-end .ar-vh .ar-hn{color:inherit}
.gx-det .ar-lk{width:44px;height:44px}
.gx-vsr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gx-vl{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;background:rgba(6,10,32,.72);box-shadow:inset 0 0 0 1px var(--hair)}
.gx-vl > span:first-child{font-size:12px;font-weight:700;color:var(--i2)}
.gx-vl b{font-family:var(--f-display);font-size:28px;font-variant-numeric:tabular-nums}
.gx-vl small{font-size:11.5px;color:var(--i3)}
.gx-vsr.win .gx-vl.me,.gx-vsr.lose .gx-vl.op{box-shadow:inset 0 0 0 1.5px rgba(244,246,252,.85)}
/* kroki: binici noktası parkuru dolaşır, engeller sırayla yanar; altında 10 engel */
.gx-ecrs{margin:0;padding:12px 12px 10px;border-radius:16px;background:rgba(6,10,32,.8);box-shadow:inset 0 0 0 1px var(--hair)}
.gx-ecrs > svg{display:block;width:100%;height:auto}
.gx-ecrs .arc-f{opacity:.28;animation:gxLit .3s calc(.5s + var(--k) * .5s) var(--e-out) forwards}
.gx-estr{display:grid;grid-template-columns:repeat(var(--n,10),1fr);gap:0;margin:10px 0 0;padding:0;list-style:none}
.gx-estr li{display:flex;justify-content:center;opacity:.25;animation:gxLit .25s calc(.5s + var(--k) * .5s) var(--e-out) forwards}
.gx-estr .gx-fi{opacity:1;width:24px;height:19px}
.gx-estr li.ok .gx-fs .r rect{fill:var(--ok)}.gx-estr li.ok .gx-fs .r .s{fill:#1E8A5A}
.gx-estr li.no .gx-fs .tp rect{fill:var(--no)}.gx-estr li.no .gx-fs .tp .s{fill:#fff}.gx-estr li.no .gx-fs .tp{transform:rotate(24deg)}
.gx-end.fin-done .gx-ecrs .arc-f,.gx-end.fin-done .gx-estr li{animation:none;opacity:1}
.gx-est{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gx-est > span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:10px;background:rgba(6,10,32,.72);box-shadow:inset 0 0 0 1px var(--hair);font-size:11px;color:var(--i2);text-align:center}
.gx-est b{font-family:var(--f-display);font-size:19px;color:var(--i1);font-variant-numeric:tabular-nums}
.gx-eact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gx-eact .gx-btn.pri{grid-column:1 / -1}
.gx-eact .gx-btn:not(.pri){gap:6px;padding:0 10px;font-size:14px;white-space:nowrap}
.gx-eact .gx-btn:not(.pri) span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gx-eact .gx-btn:only-child,.gx-eact .gx-btn.pri + .gx-btn:last-child{grid-column:1 / -1}
.gx-eact .gx-btn:empty{display:none}
.gx-enote,.gx-elk{margin:-4px 0 0;font-size:12px;line-height:1.5;color:var(--i2);text-align:center}
.gx-enote:empty{display:none}
.gx-elk .lnk{min-width:44px;min-height:44px;padding:0 6px;font-size:13px;font-weight:650;color:var(--i2)}
.gx-det{border-radius:16px;background:rgba(6,10,32,.8);box-shadow:inset 0 0 0 1px var(--hair)}
.gx-det > summary{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;cursor:pointer;font-size:13px;font-weight:650;color:var(--i2);list-style:none}
.gx-det > summary::-webkit-details-marker{display:none}
.gx-det > summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--i3);border-bottom:2px solid var(--i3);transform:rotate(45deg);transition:transform .2s}
.gx-det[open] > summary::after{transform:rotate(-135deg)}
.gx-det > :not(summary){margin:0 14px 14px}
.gx-sub{font-size:12px;color:var(--i3)}
@media (min-width:681px){.gx-endw{max-width:600px;padding-top:calc(var(--gtop) + 10px)}.gx-tv{font-size:52px}}
/* yatay telefon ve alçak yatay ekran: sonuç iki sütun (solda tabela ve eylemler, sağda kroki) */
@media (orientation:landscape) and (max-height:500px),(orientation:landscape) and (min-width:681px) and (max-width:1099px) and (max-height:700px),(orientation:landscape) and (min-width:1100px) and (max-height:639px){
  .gx-endw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:10px;align-items:start;max-width:880px}
  .gx-endw > *{grid-column:1}
  .gx-endw > .gx-bar{grid-column:1 / -1;grid-row:1}
  .gx-endw > .gx-eh{grid-row:2}
  .gx-endw > .gx-det{grid-column:1 / -1}
  .gx-endw > .gx-ecrs{grid-column:2;grid-row:2 / span 7}
  .gx-et,.gx-end .ar-vh{font-size:22px}.gx-tv{font-size:36px}.gx-tc{padding:10px 12px}
}

/* ---------- anahtar kareler */
@keyframes gxUp{from{opacity:0;transform:translateY(10px)}}
@keyframes gxDown{from{opacity:0;transform:translateY(-12px)}}
@keyframes gxFade{from{opacity:0}}
@keyframes gxOut{to{opacity:0;transform:translateY(10px)}}
@keyframes gxRise{from{transform:scaleY(0)}}
@keyframes gxStep{from{transform:translateY(6px)}}
@keyframes gxPulse{50%{transform:scale(1.08)}}
@keyframes gxDrop{from{transform:translateY(-10px);opacity:0}}
@keyframes gxPlus{0%{opacity:0;transform:translateY(4px)}20%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@keyframes gxBeat{50%{transform:scale(1.25)}}
@keyframes gxShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes gxCur{from{transform:translateY(-4px);opacity:0}}
@keyframes gxTp{0%{transform:rotate(0)}58%{transform:rotate(26deg)}74%{transform:rotate(19deg)}88%{transform:rotate(25deg)}100%{transform:rotate(24deg)}}
@keyframes gxTrem{33%{transform:translateY(-1.2px)}66%{transform:translateY(.8px)}}
@keyframes gxHop{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}25%{transform:translate(8px,-9px)}50%{transform:translate(16px,-12px)}75%{transform:translate(24px,-9px)}88%{opacity:1}100%{opacity:0;transform:translate(32px,0)}}
@keyframes gxNum{from{opacity:0;transform:scale(1.5)}}
@keyframes gxNum2{from{opacity:0;transform:scale(1.3)}}
@keyframes gxRail{from{opacity:0;transform:translateY(-18px) rotate(-38deg)}80%{opacity:1;transform:translateY(1.5px) rotate(-8deg)}to{transform:rotate(-8deg)}}
@keyframes gxStamp{from{opacity:0;transform:scale(.6) rotate(-6deg)}}
@keyframes gxStampC{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.7)}}
@keyframes gxRos{from{opacity:0;transform:scale(.5) rotate(-40deg)}}
@keyframes gxPanel{50%{transform:scale(1.03)}}
@keyframes gxDim{to{opacity:.8}}
@keyframes gxBand{0%{opacity:0;transform:translate(-50%,-8px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
@keyframes gxSweep{to{transform:translateX(100%)}}
@keyframes gxDx{from{transform:translateX(0)}to{transform:translateX(26px)}}
@keyframes gxDy{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.8,.4,1)}50%{transform:translateY(-14px);animation-timing-function:cubic-bezier(.6,0,.8,.2)}100%{transform:translateY(0)}}
@keyframes gxRl{0%{transform:rotate(0)}60%{transform:rotate(56deg)}76%{transform:rotate(47deg)}90%{transform:rotate(54deg)}100%{transform:rotate(52deg)}}
@keyframes gxRet{0%{transform:translateX(0)}70%{transform:translateX(9px)}85%{transform:translateX(7px)}100%{transform:translateX(8px)}}
@keyframes gxLit{to{opacity:1}}

/* ---------- hareketi azalt: yer değiştirme yok, son hâl hemen (JS de WAAPI'yi atlıyor) */
@media (prefers-reduced-motion:reduce){
  .gx-run *,.gx-end *,.gx-run,.gx-end{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .gx-ecrs .arc-f,.gx-estr li{opacity:1}
  .gx-band.on{animation:none!important;opacity:1;transform:translate(-50%,0)}
}

/* ---------- iOS 16.0–16.1: color-mix yok → düz karşılıklar (yan panelleri ve seçim düğmeleri boş kalmasın) */
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .gx-side{background:linear-gradient(180deg,#212C57,#131D40);box-shadow:inset 0 3px 0 var(--s),inset 0 0 0 1px rgba(134,162,255,.32)}
  .gx-side.R{background:linear-gradient(180deg,#332B3B,#1A1C36);box-shadow:inset 0 3px 0 var(--s),inset 0 0 0 1px rgba(243,154,91,.32)}
  .gx-side::before{border-color:rgba(134,162,255,.34)}.gx-side.R::before{border-color:rgba(243,154,91,.34)}
  .gx-glw{box-shadow:0 0 0 1.5px var(--s),0 0 26px -2px rgba(134,162,255,.75)}.gx-side.R .gx-glw{box-shadow:0 0 0 1.5px var(--s),0 0 26px -2px rgba(243,154,91,.75)}
  .gx-pb{background:linear-gradient(180deg,#303F7E,#1E2957);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(134,162,255,.45),0 12px 24px -14px rgba(0,0,0,.85)}
  .gx-pb.R{background:linear-gradient(180deg,#483D5A,#292846);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(243,154,91,.45),0 12px 24px -14px rgba(0,0,0,.85)}
}