/* Düello masası (GBROK Tek Cam, GFLAG ortak): görünümler, oyun kabuğu, oyuncu bölgeleri, bahis çipleri, yön daireleri, zarlar,
   adım okları, sahne çerçevesi, Round, sonuç, Koç, efekt katmanı, oyun menüsü, maç sonu kartı, bağlantı bildirimi.
   Ortadaki sahne oyunun dosyasında: single-glass.css (tek cam), flag-hunt.css (harita). */

/* ---------- görünümler: lobi | oyun ---------- */
body[data-view="boot"] #lobby,body[data-view="boot"] #game,
body[data-view="lobby"] #game,body[data-view="game"] #lobby{display:none}
html:has(body[data-view="game"]){height:100%;overflow:hidden}
body[data-view="game"]{height:100%;overflow:hidden;user-select:none;-webkit-user-select:none;background-attachment:scroll;
  background:
    radial-gradient(120% 48% at 50% 0%, rgba(255,50,70,.38), rgba(255,50,70,.13) 48%, transparent 74%),
    radial-gradient(110% 42% at 50% 100%, rgba(94,155,255,.19), transparent 70%),
    radial-gradient(55% 36% at 50% 50%, rgba(134,230,255,.11), transparent 75%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    linear-gradient(var(--bg1), var(--bg0) 50%, var(--bg1))}
/* online misafir: Kırmızı altta, zemin renkleri de yer değiştirir */
body[data-view="game"].flip{
  background:
    radial-gradient(110% 42% at 50% 0%, rgba(94,155,255,.19), transparent 70%),
    radial-gradient(120% 48% at 50% 100%, rgba(255,50,70,.38), rgba(255,50,70,.13) 48%, transparent 74%),
    radial-gradient(55% 36% at 50% 50%, rgba(134,230,255,.11), transparent 75%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    linear-gradient(var(--bg1), var(--bg0) 50%, var(--bg1))}
#game{height:100%}
#app{height:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;position:relative}

/* ---------- çubuklar ve Otomatik Zar ---------- */
/* çubuk: sol (☰) · orta (Otomatik Zar) · sağ (avatar + isim). Sütunlar sabit: anahtar gizlense de avatar sağda kalır */
.bar{flex:none;height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:0 12px}
.bar > .icon-btn{grid-column:1;justify-self:start}
.bar > .auto{grid-column:2}
.bar > .who{grid-column:3;justify-self:end}
.bar .icon-btn{width:38px;height:38px}
.auto{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}
.auto span{font:800 12px var(--f-body);color:var(--muted)}
.auto input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.auto .sw{width:38px;height:22px}
.auto .sw::after{width:16px;height:16px}
.auto input:checked + .sw::after{transform:translateX(16px)}
.auto input:checked + .sw{background:var(--team-lo)}

/* ---------- oyuncu bölgeleri ---------- */
.zone{flex:none;position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;padding:6px 12px}
.zone.bottom{flex-direction:column-reverse}
.zone::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;pointer-events:none}
.zone.top::before{background:radial-gradient(120% 110% at 50% 0%, color-mix(in srgb,var(--team) 40%,transparent), transparent 74%)}
.zone.bottom::before{background:radial-gradient(120% 110% at 50% 100%, color-mix(in srgb,var(--team) 42%,transparent), transparent 74%)}
.zone.is-turn::before{opacity:1}
/* sırası olmayan taraf: bölge ve çubuğundaki kimlik / Otomatik Zar sönük */
.zone > *,.bar > .who,.bar > .auto{transition:filter .45s,opacity .45s}
.zone.dim > *,.bar.dim > .who,.bar.dim > .auto{filter:brightness(.62) saturate(.6);opacity:.72}
.zone::after{content:"";position:absolute;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,193,78,.45),transparent)}
.zone.top::after{bottom:0}
.zone.bottom::after{top:0}

/* oyuncu kimliği çubukların sağ kenarında: isim solda, avatar kenarda */
.who{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.who.mirror{flex-direction:row-reverse;text-align:right}
.who.mirror .nm em{justify-content:flex-end}
.nm{min-width:0}
.nm b{display:block;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 14px/1.15 var(--f-body);color:var(--text)}
.nm em{font-style:normal;display:flex;align-items:center;gap:3px;color:var(--ember);font:800 12px/1.2 var(--f-body)}
/* çipler her zaman büyüyen zar tepsisinin üstünde kalır: bahis değişimi engellenmez */
.idrow{display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.nm em svg{width:12px;height:12px}
/* maçta kalan kalkan: skorun yanında, buz renginde */
.nm em .pool{font-style:normal;display:inline-flex;align-items:center;gap:2px;margin-left:7px;color:var(--frost)}

/* ---------- bahis çipleri: açık · seçili · yanmış ---------- */
.chips{display:flex;justify-content:center;gap:clamp(6px,2.4vw,10px);position:relative;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .35s,filter .35s}
/* bahis adımı: çipler bir tık büyür (yer tutmaz, transform) */
.zone.pick .chips{transform:scale(1.1)}
.chip{--s:clamp(38px,11.2vw,48px);width:var(--s);height:var(--s);flex:none;border-radius:50%;padding:0;cursor:pointer;position:relative;
  border:3px solid transparent;color:var(--gold-hi);font:calc(var(--s)*.42)/1 var(--f-display);
  text-shadow:0 2px 0 var(--gold-ink),0 0 6px rgba(0,0,0,.4);
  background:radial-gradient(circle at 50% 30%,#4a52a8,#232a68 62%,#171c4c) padding-box,
    conic-gradient(from 200deg,var(--gold-hi),var(--gold) 20%,var(--gold-lo) 45%,var(--gold) 65%,var(--gold-hi) 85%,var(--gold)) border-box;
  box-shadow:0 3px 0 var(--stone-edge),0 6px 10px var(--shadow);
  transition:transform .18s,box-shadow .18s,opacity .25s}
.chip[aria-disabled="true"]{cursor:default}
.chip.live{animation:chipLive 1.8s ease-in-out infinite}
@keyframes chipLive{50%{box-shadow:0 3px 0 var(--stone-edge),0 0 16px rgba(255,233,168,.45)}}
.chip.suggest{animation:sugg 1.2s ease-in-out infinite}
.chip.sel{transform:translateY(-4px) scale(1.1);z-index:1;animation:none;
  box-shadow:0 0 0 3px var(--team),0 0 18px var(--team),0 7px 0 var(--stone-edge)}
.chip.burned{opacity:.5;color:#80849f;text-shadow:none;animation:none;box-shadow:0 2px 0 var(--stone-edge);
  background:radial-gradient(circle at 50% 30%,#4a4d66,#2c2e44 70%) padding-box,linear-gradient(#5d6077,#3a3c52) border-box}
.chip.burned::after{content:"";position:absolute;inset:14% 18%;
  background:linear-gradient(118deg,transparent 47%,rgba(10,12,30,.75) 48%,rgba(10,12,30,.75) 52%,transparent 53%)}
@keyframes sugg{0%,100%{box-shadow:0 0 0 2px var(--gold-hi),0 0 10px var(--gold)}50%{box-shadow:0 0 0 4px var(--gold-hi),0 0 24px var(--gold)}}
/* bayrak saklama ve başlama zarı: bahis henüz yok, çipler geri planda (yön daireleri zaten sönük) */
#app.opening .chips{opacity:.45;filter:saturate(.5)}
/* bahissiz oyun: çip satırı yok (hamle = zar toplamı), sahneye daha çok yer kalır */
#app.nobet .idrow{display:none}

/* ---------- hamle satırı: Camı Kır · zarlar · Camı Güçlendir ---------- */
/* --ds: yön dairesi boyu, --lift: çiplerle arası (büyüyen zarlara yer) */
.actrow{--ds:clamp(52px,16vw,66px);--lift:12px;--link:rgba(242,193,78,.55);display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(10px,4vw,22px);width:max-content;margin:0 auto;position:relative}
.zone.top .actrow{margin-top:var(--lift);margin-bottom:4px}
.zone.bottom .actrow{margin-bottom:var(--lift);margin-top:4px}
/* zincir bağ: Camı Kır — zar — zar — Camı Güçlendir, dairelerin kenarından zarların arasına uzanır */
.actrow::before{content:"";position:absolute;left:calc(var(--ds)/2);right:calc(var(--ds)/2);top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:var(--link);pointer-events:none}

.dir{--s:var(--ds);width:var(--s);height:var(--s);border-radius:50%;padding:0;position:relative;z-index:1;
  display:grid;place-items:center;color:var(--dc);cursor:pointer;border:3px solid transparent;
  background:radial-gradient(circle at 50% 30%,var(--stone2),var(--stone) 60%,var(--stone-edge)) padding-box,
    conic-gradient(from 200deg,var(--gold-hi),var(--gold) 20%,var(--gold-lo) 45%,var(--gold) 65%,var(--gold-hi) 85%,var(--gold)) border-box;
  box-shadow:0 4px 0 var(--stone-edge),0 8px 14px var(--shadow);
  transition:transform .22s cubic-bezier(.3,1.5,.5,1),opacity .25s,filter .25s,box-shadow .2s}
.dir svg{width:48%;height:48%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.dir.kir{--dc:var(--ember)}
.dir.guc{--dc:var(--frost)}
/* Camı Kır dairesi: çekiç; güçlendirilen turda ✓ Turu bitir (altın) */
.dir.kir > svg:nth-of-type(2),.dir.kir.end > svg:first-of-type{display:none}
.dir.kir.end > svg:nth-of-type(2){display:block}
.dir.end{--dc:var(--gold-hi);box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(242,193,78,.55),0 4px 0 var(--stone-edge)}
.dir:not(.on){opacity:.4;filter:saturate(.35);cursor:default}
.dir.on:not(.sel){opacity:.9}
.dir.sel{transform:scale(1.14);box-shadow:0 0 0 3px var(--team),0 0 24px var(--team),0 5px 0 var(--stone-edge)}
.dir.suggest:not(.sel)::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--gold-hi);
  box-shadow:0 0 14px var(--gold);animation:ringPulse 1.2s ease-in-out infinite}
@keyframes ringPulse{50%{transform:scale(1.08);opacity:.55}}
/* kalan hamle: dairenin dış üst köşesi */
.badge{position:absolute;top:-7px;min-width:25px;height:25px;padding:0 6px;border-radius:99px;display:none;
  font:15px/25px var(--f-display);color:var(--gold-ink);text-align:center;
  background:linear-gradient(var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  box-shadow:0 0 0 1.5px var(--gold-ink),0 2px 0 var(--gold-ink)}
.dir.kir .badge{left:-9px}
.dir.guc .badge{right:-9px}
.dir.sel .badge{display:block}
/* kalan kalkan (= Camı Güçlendir hakkı): Camı Güçlendir'in dış alt köşesi, buz renginde; bitince sönük 0 */
.dir .sh{position:absolute;right:-11px;bottom:-6px;height:22px;min-width:22px;padding:0 6px 0 4px;border-radius:99px;display:none;
  align-items:center;justify-content:center;gap:2px;font:14px/1 var(--f-display);color:#0d2a55;
  background:linear-gradient(#fff,var(--frost) 55%,var(--frost-lo));box-shadow:0 0 0 1.5px #0d2a55,0 2px 0 #0d2a55}
.dir .sh svg{width:12px;height:12px;filter:none}
.dir.has-sh .sh{display:flex}
.dir.out .sh{color:#2a2d48;background:linear-gradient(#b4b8cf,#7d82a0)}

/* ---------- zar tepsisi ---------- */
.tray{--d:clamp(34px,10.5vw,42px);--dsz:var(--d);justify-self:center;width:calc(var(--d)*3);height:calc(var(--d)*1.6);
  position:relative;border:0;padding:0;border-radius:50%;cursor:default;
  background:linear-gradient(var(--link),var(--link)) center/100% 2px no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--team) 26%,transparent),transparent);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.tray .die{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);
  transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s,filter .3s}
.tray .die:nth-child(1){transform:translate(-30%,6%) rotate(-18deg)}
.tray .die:nth-child(2){transform:translate(30%,-8%) rotate(22deg)}
.tray:not(.rolled):not(.can-roll) .die{filter:brightness(.78) saturate(.8)}
.tray.rolled .die:nth-child(1){transform:translateX(-66%)}
.tray.rolled .die:nth-child(2){transform:translateX(66%)}
/* atış sırası: tepsi büyür (yer tutmaz, transform); oklar aşağıda, adım okları bölümünde */
.tray.can-roll{cursor:pointer;transform:scale(1.28);
  background:linear-gradient(var(--link),var(--link)) center/100% 1.6px no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--team) 34%,transparent),transparent)}
.tray.can-roll .die:nth-child(1){animation:bob1 1.4s ease-in-out infinite}
.tray.can-roll .die:nth-child(2){animation:bob2 1.4s ease-in-out infinite .15s}
@keyframes bob1{50%{transform:translate(-30%,-6%) rotate(-12deg)}}
@keyframes bob2{50%{transform:translate(30%,-18%) rotate(28deg)}}
.tray.rolling .die{opacity:0;transition:none;animation:none}
.tray.no-tr .die{transition:none!important;animation:none!important}

/* ---------- adım okları: sıradaki adımı gösteren tek ok yapısı ----------
   Yukarı bakan, akan soluk bir şerit; --ar ile döner, --af:-1 ile ters çevrilir.
   Yalnız Animasyonlar açıkken (#app.guide): bahis → çiplerin iki yanından içe, zar → sahneye doğru,
   hamle → sahnenin (.target: tek cam / harita) iki yanından içe. */
#app.guide .zone.pick .chips::before,#app.guide .zone.pick .chips::after,
#app.guide .tray.can-roll::before,#app.guide .tray.can-roll::after,
#app.guide .target.playable::before,#app.guide .target.playable::after{
  content:"";position:absolute;top:50%;width:11px;height:36px;margin-top:-18px;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.5 7.5L5.5 3.5L9.5 7.5' fill='none' stroke='%23FFE9A8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 0/11px 11px repeat-y;
  -webkit-mask:linear-gradient(to top,transparent,#000 35%,#000 55%,transparent);mask:linear-gradient(to top,transparent,#000 35%,#000 55%,transparent);
  transform:scaleY(var(--af,1)) rotate(var(--ar,0deg));
  animation:stepArrows 1.2s linear infinite}
@keyframes stepArrows{to{background-position:50% -11px}}
.zone.pick .chips::before{left:-30px;--ar:90deg}
.zone.pick .chips::after{right:-30px;--ar:-90deg}
.tray.can-roll::before{left:3%;--ar:12deg}
.tray.can-roll::after{right:3%;--ar:-12deg}
.zone.top .tray.can-roll{--af:-1}   /* üst bölgede sahne aşağıda: oklar aşağı akar */
.target.playable::before{left:-32px;--ar:90deg}
.target.playable::after{right:-32px;--ar:-90deg}

.die{border-radius:22%;padding:calc(var(--dsz,40px)*.14);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  background:linear-gradient(150deg,#fffaf0 0%,var(--ivory) 50%,var(--ivory-lo) 100%);
  box-shadow:inset 0 -3px 0 rgba(120,90,40,.25),inset 0 2px 0 rgba(255,255,255,.9),0 3px 0 #8a6f43,0 6px 10px var(--shadow)}
.pip{width:64%;height:64%;place-self:center;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 35%,#6a4630,var(--pip) 70%)}
.pip.on{opacity:1}
.die.fly{position:absolute;left:0;top:0;margin:0;will-change:transform}

/* zar toplamı: zarların sahneye bakan tarafında */
.total{height:28px;display:grid;place-items:center;flex:none}
.total b{font:27px/1 var(--f-display);color:#fff;-webkit-text-stroke:4px var(--team-lo);paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.35);animation:popIn .38s cubic-bezier(.3,1.7,.5,1)}
.total .hint{font:800 12px var(--f-body);color:var(--gold-hi);animation:hintFade 1.6s ease-in-out infinite}
@keyframes popIn{from{transform:scale(.3);opacity:0}}
@keyframes hintFade{50%{opacity:.45}}

/* ---------- sahne ---------- */
.stage{flex:1 1 0;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 40px 2px}
@keyframes sceneIntro{from{transform:translateY(18px) scale(.94);opacity:0}}
/* Camı Güçlendir halkası (GD.Fx.ring): öğenin ortasından genişler */
.ring{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.95);box-shadow:0 0 14px var(--frost),inset 0 0 14px var(--frost);
  transform:translate(-50%,-50%) scale(.4);animation:ringOut .55s ease-out forwards}
@keyframes ringOut{to{transform:translate(-50%,-50%) scale(2.8);opacity:0}}

/* sahnenin sağında dikey Round N ve süre */
.round{position:absolute;right:6px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.round b{font:22px/1 var(--f-display);color:var(--gold-hi);text-shadow:0 2px 0 var(--gold-ink)}
.round span{font:800 12px/1 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- sonuç (sahne altında, kazananın renginde) ---------- */
.result{flex:none;min-height:50px;text-align:center;padding-top:6px;max-width:100%}
.r1{font:21px/1.15 var(--f-display);color:var(--rc,var(--gold-hi));text-shadow:0 2px 0 rgba(0,0,0,.45)}
.r2{font:700 13px/1.35 var(--f-body);color:var(--muted);margin-top:2px;min-height:17px}
.r2.gold{color:var(--gold-hi)}
.result[data-team="0"]{--rc:var(--blue)}
.result[data-team="1"]{--rc:var(--red)}
.result.muted .r1{font:800 14px/1.3 var(--f-body);color:var(--muted);text-shadow:none;padding-top:4px}
.r1.pop{animation:popIn .32s cubic-bezier(.3,1.6,.5,1)}

/* ---------- Koç ---------- */
.game-coach{flex:none;margin:2px 0 6px;max-width:340px}

/* ---------- efekt katmanı: uçan zarlar, kıvılcımlar, cam parçaları ---------- */
#fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.spark{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;will-change:transform}
.shard{position:absolute;left:0;top:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);will-change:transform}

/* ---------- kısa ekranlar ---------- */
@media (max-height:740px){
  .chip{--s:clamp(36px,10.4vw,42px)}
  .actrow{--ds:clamp(48px,14vw,56px);--lift:9px}
  .tray{--d:clamp(30px,9.4vw,36px)}
  .zone{gap:3px;padding:4px 12px}
  .total{height:24px}
  .total b{font-size:23px}
}
@media (max-height:620px){
  .chip{--s:34px}
  .actrow{--ds:44px;--lift:7px}
  .tray{--d:28px}
  .crest{width:30px;height:30px;font-size:16px}
  .result{min-height:42px}
  .r1{font-size:18px}
}

/* ---------- oyun menüsü (çekmece) ---------- */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;transition:visibility 0s .3s}
.drawer.open{visibility:visible;transition:none}
.scrim{position:absolute;inset:0;background:rgba(5,6,20,.62);opacity:0;transition:opacity .25s}
.drawer.open .scrim{opacity:1}
.panel{position:absolute;left:0;top:0;bottom:0;width:min(88vw,350px);overflow-y:auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 18px);
  background:linear-gradient(180deg,var(--stone2),var(--bg1));
  box-shadow:1.5px 0 0 rgba(242,193,78,.55),12px 0 30px rgba(0,0,0,.5);
  transform:translateX(-104%);transition:transform .3s cubic-bezier(.3,.9,.3,1);user-select:text;-webkit-user-select:text}
.drawer.open .panel{transform:none}
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ph h2{font:24px var(--f-display);color:var(--gold-hi);margin:0;text-shadow:0 2px 0 var(--gold-ink)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(242,193,78,.15)}
.row b,.newgame > b{font:800 15px var(--f-body);color:var(--text);display:block}
.row small{font:600 12px/1.3 var(--f-body);color:var(--muted);display:block;margin-top:2px}
details.sec{border-bottom:1px solid rgba(242,193,78,.15);padding:12px 2px}
details.sec summary{font:800 15px var(--f-body);color:var(--text);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details.sec summary::-webkit-details-marker{display:none}
details.sec summary::after{content:"+";color:var(--gold);font-family:var(--f-display)}
details.sec[open] summary::after{content:"–"}
details.sec .rules{margin-top:8px}
details.sec .rules p{font-size:13px}
#hist{list-style:none;margin:10px 0 0;padding:0;max-height:34vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px}
#hist li{font:700 12.5px/1.35 var(--f-body);color:var(--text);display:grid;grid-template-columns:30px 1fr;gap:6px}
#hist .rn{font:12px/1.5 var(--f-display);color:var(--gold)}
#hist .tx{border-left:3px solid var(--gold-lo);padding-left:8px}
#hist li[data-p="0"] .tx{border-color:var(--blue)}
#hist li[data-p="1"] .tx{border-color:var(--red)}
#hist .empty{color:var(--muted);display:block}
.newgame{padding:14px 2px 4px;display:flex;flex-direction:column;gap:12px}
.newgame .line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.newgame .line span{font:700 13px var(--f-body);color:var(--muted)}
.newgame .line small{display:block;font:600 11.5px/1.3 var(--f-body);color:var(--muted);opacity:.8;margin-top:2px}
.exit-row{margin-top:auto;padding-top:18px}
.exit-row .btn{font-size:16px}
.exit-row small{display:block;margin-top:8px;text-align:center;font:700 12px var(--f-body);color:var(--muted)}

/* ---------- maç sonu kartı ---------- */
.endcard{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;
  background:radial-gradient(circle at 50% 40%,rgba(242,193,78,.2),rgba(5,6,20,.82) 62%);transition:opacity .3s,visibility 0s .3s}
.endcard.open{opacity:1;visibility:visible;transition:opacity .3s}
.ec-panel{width:min(92vw,340px);position:relative;padding:58px 18px 18px;border-radius:20px;text-align:center;
  border:3px solid transparent;
  background:linear-gradient(180deg,var(--stone2),var(--bg1)) padding-box,
    linear-gradient(140deg,var(--gold-hi),var(--gold-lo),var(--gold),var(--gold-hi)) border-box;
  box-shadow:0 0 0 2px var(--gold-ink),0 20px 50px rgba(0,0,0,.6);transform:scale(.9);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.endcard.open .ec-panel{transform:none}
.ec-top{position:absolute;left:50%;top:-58px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.ec-top > svg{width:46px;height:34px;color:var(--gold);filter:drop-shadow(0 2px 0 var(--gold-ink));margin-bottom:-6px;position:relative;z-index:1}
.crest.big{width:76px;height:76px;font-size:40px;box-shadow:0 0 0 3px var(--gold),0 0 0 5px var(--gold-ink),0 0 30px var(--team)}
.crest.big .bot-tag{width:26px;height:26px;right:-4px;bottom:-2px}
.crest.big .bot-tag svg{width:16px;height:16px}
.ribbon{margin:10px -32px 4px;padding:11px 30px;font:26px/1.1 var(--f-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:linear-gradient(var(--team-hi),var(--team) 40%,var(--team-lo));
  clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);overflow-wrap:anywhere}
.ec-sub{font:800 15px var(--f-body);color:var(--gold-hi);margin:6px 0 12px}
.ec-meta{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.ec-meta span{font:800 12px var(--f-body);color:var(--muted);background:var(--stone-edge);padding:6px 11px;border-radius:99px}
.ec-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.ec-tbl th{font:15px var(--f-display);padding:6px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-tbl th:first-child{width:38%}
.ec-tbl th:nth-child(2){color:var(--blue)}
.ec-tbl th:nth-child(3){color:var(--red)}
.ec-tbl td{font:700 13px var(--f-body);color:var(--muted);padding:8px 4px;border-top:1px solid rgba(242,193,78,.15);text-align:left}
.ec-tbl td + td{font:17px var(--f-display);color:var(--text);text-align:center}
.ec-btns{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;margin-top:18px}
.ec-btns .btn{font-size:17px;padding:13px 8px;white-space:nowrap}

/* ---------- bağlantı bildirimi (online) ---------- */
.net-toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 52px);transform:translateX(-50%);z-index:85;width:min(92vw,420px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;padding:10px 12px;border-radius:14px;
  font:800 13px/1.35 var(--f-body);color:var(--text);
  background:linear-gradient(var(--stone2),var(--stone));box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.6),0 10px 24px rgba(0,0,0,.5)}
.net-toast b{color:var(--gold-hi)}
.nt-acts{display:flex;gap:6px}
.pill{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:99px;font:800 12.5px var(--f-body);
  color:var(--gold-hi);background:var(--stone-edge);box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.5)}
.pill svg{width:15px;height:15px}
.pill.gold{color:var(--gold-ink);background:linear-gradient(var(--gold-hi),var(--gold));box-shadow:0 2px 0 var(--gold-lo)}