:root{
  --bg:#fbfbfb; --panel:#ffffff;
  --fill:#f1f1f1; --fill2:#e7e7e7;
  --line:#b8b8b8; --line-soft:#d6d6d6;
  --ink:#2f2f2f; --ink-2:#5c5c5c; --muted:#8a8a8a; --note:#7a7a7a;
  --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;
  --font:system-ui,"Segoe UI",Arial,sans-serif;
  --bg-green: url("../images/bg-green.jpg");
  --bg-candies: url("../images/bg-candies.png");
}
*{box-sizing:border-box}
body{background-color:var(--bg);color:var(--ink);font:14px/1.5 var(--font);margin:0;
  min-height:100vh;display:flex;flex-direction:column;
  background-image:var(--bg-green);background-size:cover;background-attachment:fixed;
  background-repeat:no-repeat;background-position:center center}
html.bg-candies body{background-image:var(--bg-candies)}
main{flex:1 0 auto;display:flex;flex-direction:column}
.page.on{flex:1 0 auto}
a{color:var(--ink);text-decoration:none}
button{font-family:var(--font);font-size:13px;color:var(--ink);cursor:pointer}
.wrap{width:1280px;max-width:100%;margin:0 auto;padding:0 24px}

/* ---- draft badge ---- */
.wfbadge{position:fixed;top:8px;right:12px;z-index:300;border:1px dashed #9a9a9a;background:#fdfdfd;
  color:#6a6a6a;font-size:11px;padding:3px 9px;border-radius:2px;letter-spacing:.02em}

/* ---- header ---- */
/* cam paneller (adım 35): header, footer ve TOS akordeonu şeffaf + bulanık, ortak değişkenler */
:root{--gl-a:.24;--gl-blur:10px;--nav-a:0;--nav-blur:5px;--nav-h:78px;--nav-font:var(--font);--tos-font:var(--font);--tos-reserve:258px;--ftr-a:.2;--ftr-blur:5px;--ftr-fs:12px;--ftr-fs-legal:13px;--ftr-ink:#ffffff;--ftr-link:#5c5c5c}
.site-header{position:sticky;top:0;z-index:150;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,var(--nav-a));backdrop-filter:blur(var(--nav-blur));-webkit-backdrop-filter:blur(var(--nav-blur))}
.hdr{display:flex;align-items:center;gap:26px;height:var(--nav-h);padding-right:196px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.02em;font-size:14px;cursor:pointer}
.logo .mark{width:26px;height:26px;border:1px solid var(--line);background:
  linear-gradient(45deg,transparent 47%,var(--line-soft) 47%,var(--line-soft) 53%,transparent 53%),
  linear-gradient(-45deg,transparent 47%,var(--line-soft) 47%,var(--line-soft) 53%,transparent 53%),var(--fill)}
.nav{display:flex;gap:22px;margin-left:8px}
.nav a{font-size:13px;color:var(--ink-2);padding:4px 2px;border-bottom:2px solid transparent;cursor:pointer}
.nav a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--line)}
.hdr .spacer{flex:1}
.btn{display:inline-block;border:1px solid var(--line);background:var(--fill);padding:8px 14px;
  font-size:13px;border-radius:2px;cursor:pointer;color:var(--ink)}
.btn.primary{background:var(--fill2);border-color:#8f8f8f;font-weight:600}
.btn.ghost{background:var(--panel)}

/* ---- product ticker strip (locations screen) ---- */
.strip{display:none;border-bottom:1px solid var(--line);background:var(--fill)}
.strip.on{display:block}
.strip .wrap{display:flex;align-items:center;gap:12px;height:38px;cursor:pointer}
.strip .tri{color:var(--muted)}
.strip .thumb{width:26px;height:20px;border:1px dashed var(--line);flex:none;background:
  linear-gradient(45deg,transparent 46%,var(--line-soft) 46%,var(--line-soft) 54%,transparent 54%),
  linear-gradient(-45deg,transparent 46%,var(--line-soft) 46%,var(--line-soft) 54%,transparent 54%)}
.strip .txt{color:var(--ink-2);font-size:13px}
.strip .go{margin-left:auto;color:var(--ink-2);font-size:12px;border-bottom:1px dotted var(--muted)}
.strip .dots{display:flex;gap:5px;margin-left:14px}
.strip .dots i{width:5px;height:5px;border:1px solid var(--line);border-radius:50%}
.strip .dots i.on{background:var(--muted);border-color:var(--muted)}

/* ---- pages ---- */
.page{display:none}
.page.on{display:block}
#p-home.on{display:flex}

/* ---- wireframe atoms ---- */
.imgbox{position:relative;border:1px solid var(--line);background:var(--fill);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.imgbox::before,.imgbox::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}
.imgbox::before{background:linear-gradient(to top right,transparent calc(50% - 0.6px),var(--line-soft) 50%,transparent calc(50% + 0.6px))}
.imgbox::after{background:linear-gradient(to bottom right,transparent calc(50% - 0.6px),var(--line-soft) 50%,transparent calc(50% + 0.6px))}
.imgbox span{position:relative;z-index:2;background:rgba(255,255,255,.86);border:1px dashed var(--line);
  padding:3px 8px;font-size:11px;color:var(--note);font-style:italic;max-width:80%;text-align:center}
.imgbox-real{border:none;background:transparent}
.imgbox-real::before,.imgbox-real::after{display:none}
.imgbox-real{display:flex;align-items:center;justify-content:center;overflow:visible}
.imgbox-real .pimg{position:relative;display:inline-block;max-width:100%;line-height:0;background:none;border:0;padding:0;box-shadow:none}
.imgbox-real img{position:relative;z-index:2;max-width:100%;width:auto;height:auto;object-fit:contain}
/* ürün zemin gölgesi (adım 32): görselin hemen altında, perspektifli elips */
:root{--pg-color:#000000;--pg-a:.3;--pg-w:126%;--pg-h:22px;--pg-y:-21px;--pg-soft:70%;--pr-fs-title:37px;--pr-fs-pitch:20px;--pr-fs-intro:18px}
.imgbox-real .pimg::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:var(--pg-w);bottom:var(--pg-y);height:var(--pg-h);border-radius:50%;background:radial-gradient(ellipse at center,var(--pg-color) 0%,transparent var(--pg-soft));opacity:var(--pg-a);z-index:1;pointer-events:none}
.wf-slide.mpcard .sl-grid{align-items:start}   /* kart gorselinin ust kenari baslikla ayni hizada */
.imgbox-real.card-box{height:auto!important;min-height:0;align-items:flex-start}
.imgbox-real .pimg.mpcard::after{display:none}
.imgbox-real .pimg.mpcard img{border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.imgbox-real a.pimg.mpcard{cursor:pointer}
.imgbox-real a.pimg.mpcard:hover img{box-shadow:0 14px 36px rgba(0,0,0,.45)}
.sl-info .sl-more{display:inline-block;font-size:var(--pr-fs-intro);border-bottom:1px dotted currentColor;cursor:pointer}
.note{font-size:11px;font-style:italic;color:var(--note);margin-top:6px}
.note::before{content:"\270E  "}
.h1{font-size:30px;line-height:1.24;font-weight:700;margin:0 0 12px}
.h2{font-size:19px;font-weight:700;margin:0 0 14px}
.h3{font-size:15px;font-weight:600;margin:0 0 6px}
.sub{color:var(--ink-2);font-size:15px;margin:0 0 20px;max-width:60ch}
.price{font-weight:700;font-size:15px}
.soon{display:inline-block;border:1px dashed var(--line);background:var(--fill);color:var(--muted);
  font-size:11px;padding:2px 7px;border-radius:2px;vertical-align:middle;margin-left:8px;font-weight:400}
ul.bul{margin:10px 0 14px;padding-left:18px;color:var(--ink-2);font-size:13px}
ul.bul li{margin:3px 0}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.sec{padding:26px 0 44px}

/* ---- HOME split hero (legacy, unused) ---- */
#p-home{align-items:center;min-height:calc(100vh - var(--nav-h) - 54px)} /* header (--nav-h + 1px border) + footer 53 */
#p-home{min-height:calc(100dvh - var(--nav-h) - 54px)} /* dvh: mobilde adres cubugu acikken gercek yukseklik; masaustunde vh ile ayni */
#p-products.on{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--nav-h) - 54px)} /* slayt sayfaya dikey ortali */
#p-products.on{min-height:calc(100dvh - var(--nav-h) - 54px)}
.split{display:grid;grid-template-columns:45fr 55fr;gap:46px;align-items:center;width:100%;padding:24px 0}
.hero-l{padding-right:10px}

/* ---- HOME static intro ---- */
.home-intro{max-width:720px;margin:0 auto;text-align:center;background:rgba(255,255,255,.92);
  border:1px solid var(--line);padding:32px 40px;border-radius:2px}
.home-intro .sub{margin-left:auto;margin-right:auto}
.home-intro .cta-row{justify-content:center;margin-top:8px}

/* frameless slider */
.fslider{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.92);
  padding:20px 24px;border-radius:2px}
.fslider .imgbox{height:280px}
.wf-slide{display:none}
.wf-slide.is-on{display:block}
.sl-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.sl-info .h2{margin-bottom:4px;font-size:var(--pr-fs-title);font-family:"Fredoka One",Fredoka,"Nunito",sans-serif;font-weight:400;letter-spacing:.01em} /* urun basligi logo fontunda */
.sl-info .pitch{color:var(--ink-2);font-size:var(--pr-fs-pitch);margin-bottom:8px}
.sl-info .sl-intro{color:var(--ink-2);font-size:var(--pr-fs-intro);margin:0 0 14px;max-width:none}
.sl-info .price{display:inline-block;margin-bottom:14px}
.sl-nav{display:flex;align-items:center;gap:8px;padding:14px 2px 0}
.sl-nav button.arw{border:1px solid var(--line);background:var(--panel);width:28px;height:26px;line-height:1;border-radius:2px}
.dots{display:flex;gap:7px;margin-left:6px}
.wf-dot{width:9px;height:9px;border:1px solid var(--line);background:var(--panel);border-radius:50%;padding:0;cursor:pointer}
.wf-dot.on{background:#8f8f8f;border-color:#6f6f6f}
.sl-nav .cnt{margin-left:auto;font-size:11px;color:var(--muted);font-style:italic}
.flash{outline:2px dashed var(--muted);outline-offset:6px}

/* ---- chips / toolbar ---- */
.chips-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.chips{display:flex;align-items:center;gap:8px;margin-bottom:0}
.chip{border:1px solid var(--line);background:var(--panel);padding:7px 16px;font-size:13px;
  border-radius:14px;cursor:pointer;color:var(--ink-2)}
.chip.on{background:var(--fill2);border-color:#6f6f6f;color:var(--ink);font-weight:600}
.chip.add{border-style:dashed;color:var(--muted);padding:7px 12px}
.seg{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--panel)}
.seg button{background:none;border:0;padding:7px 16px;cursor:pointer;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--fill2);color:var(--ink);font-weight:600}
.pencil{font-size:11px;font-style:italic;color:var(--note)}
.tools{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.spacer{flex:1}
/* ---- Locations/Ranks arama kutusu: chips satirinin tam ortasinda. Varsayilan hali
   yalnizca yuvarlak bir buyutec dugmesi; tiklaninca kutuya acilir. Genislik .lsearch
   uzerinde animasyonlanir ve ic ogeler mutlak konumludur, boylece ortadaki grid sutunu
   da acilirken yumusakca buyur. Gorunum yanindaki cam dugmelerle ayni (bkz. asagida). ---- */
.lsearch{position:relative;height:33px;width:33px;min-width:0;transition:width .18s ease}
.lsearch.open{width:210px}
.chips-row .lsearch:not([hidden])+.spacer{display:none}   /* kutu gorunurken bosluk .lsearch'ten gelir; gizliyken (yakinda oyunu) spacer segmenti saga iter */
#p-locations .chips-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}   /* chip'ler sol, arama satirin tam ortasi, segment sag */
#p-locations .chips-row>.chips{justify-self:start}
#p-locations .chips-row>.seg{justify-self:end}
.lsearch[hidden]{display:none}
/* Yer daralinca once ARAMA KUTUSU verir: segment hic kucultulmez ve buton yazisi sarmaz.
   Aksi halde 600-720 arasinda kutu .seg'i sikistirip "Player ranks"i iki satira
   dusuruyor, satiri 33px yerine 48px yapiyordu. */
.chips-row .seg{flex-shrink:0}
.chips-row .seg button{white-space:nowrap}
.lsearch .lsearch-btn{position:absolute;left:0;top:0;width:33px;height:33px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--ink-2);
  cursor:pointer;transition:opacity .18s ease}
.lsearch.open .lsearch-btn{opacity:0;pointer-events:none}
.lsearch input{position:absolute;left:0;top:0;width:100%;height:33px;box-sizing:border-box;
  font-family:var(--font);font-size:13px;line-height:normal;color:var(--ink);
  padding:7px 10px;margin:0;border:1px solid var(--line);border-radius:2px;background:var(--panel);
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.lsearch.open input{opacity:1;pointer-events:auto}
.lsearch input::placeholder{color:var(--muted)}

/* ---- table ---- */
table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.92)}
th,td{border:1px solid var(--line-soft);padding:8px 10px;text-align:left;font-weight:400;font-size:13px}
th{background:var(--fill);color:var(--ink-2);cursor:pointer;user-select:none;font-size:12px;white-space:nowrap}
th .ar{color:var(--muted);font-size:10px}
tbody tr:nth-child(4n+3){background:#fbfbfa}
td.num{font-family:var(--mono);font-size:12px}
td .exp{border:1px solid var(--line);background:var(--fill);width:18px;height:18px;line-height:16px;
  text-align:center;cursor:pointer;border-radius:2px;color:var(--ink-2);padding:0}
.sub-row td{background:#f7f7f5;border-top:0}
.subgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 18px;padding:4px 2px}
.subgrid div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--line-soft);
  padding:2px 0;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.tbl-wrap{border:1px solid var(--line);border-radius:14px;overflow:clip}
.tbl-wrap table{border:0}
/* --- adım 26: locations tablosu sayfayı kaydırmaz; sınır 100vh - pay, fazlası tablo içinde kayar, başlık sticky.
   Kaydırma çubuğu: başlık renginde, dar, oval tutamaç (WebKit; scrollbar-color kullanılmıyor ki özel çizim geçerli kalsın) --- */
:root{--tbl-reserve:194px;--sb-w:12px} /* navbar haric pay; navbar --nav-h ile ayrica dusulur */
/* adım 28: locations'ta buton satırı ile tablo arası daralır (boş not satırı gizli, 10px), bölüm dolguları küçülür → tablo daha uzun */
#p-locations .tools{display:none}
#p-locations .chips-row{margin-bottom:10px}
#p-locations .sec{padding:18px 0 28px}   /* tablo üstü 215 + footer ve boşluk; 1920x889'da sayfa kaymaz (adım 27: biraz daha uzun) */
.tbl-wrap,.board{max-height:calc(100vh - var(--nav-h) - var(--tbl-reserve));overflow:auto}
.tbl-wrap,.board{max-height:calc(100dvh - var(--nav-h) - var(--tbl-reserve))}
.boards .tbl-wrap,.boards .board{max-height:calc(100vh - var(--nav-h) - var(--tbl-reserve) - 36px)} /* rank panolarının üstündeki başlık+alt yazı satırı (adım 30) */
.boards .tbl-wrap,.boards .board{max-height:calc(100dvh - var(--nav-h) - var(--tbl-reserve) - 36px)}
.tbl-wrap thead th{position:sticky;top:0;z-index:2}
.board .bh{position:sticky;top:0;z-index:2}
/* adım 27: gri-beyaz kaydırma çubuğu, tutamaçta üç çizgili "grip"; ray köşelerden 14px içeride ki oval köşeler bozulmasın */
.tbl-wrap::-webkit-scrollbar,.board::-webkit-scrollbar,.acc::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w)}
.tbl-wrap::-webkit-scrollbar-track,.board::-webkit-scrollbar-track,.acc::-webkit-scrollbar-track{background:rgba(255,255,255,.35);border-radius:99px;margin:14px 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tbl-wrap::-webkit-scrollbar-thumb,.board::-webkit-scrollbar-thumb,.acc::-webkit-scrollbar-thumb{
  background-color:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.28);border-radius:99px;
  background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.4) 0 1px,transparent 1px 4px);
  background-size:5px 10px;background-position:center;background-repeat:no-repeat}
.tbl-wrap::-webkit-scrollbar-thumb:hover,.board::-webkit-scrollbar-thumb:hover,.acc::-webkit-scrollbar-thumb:hover{background-color:#fff;border-color:rgba(0,0,0,.45)}
.tbl-wrap::-webkit-scrollbar-corner,.board::-webkit-scrollbar-corner,.acc::-webkit-scrollbar-corner{background:transparent}
/* adım 27: altta solma + aşağı ok — sticky ::after kaydırma kutusunun altına yapışır; JS .more sınıfıyla "devamı var" durumunda gösterir */
.tbl-wrap::after,.board::after{content:"▼";position:sticky;bottom:0;display:block;height:44px;margin-top:-44px;
  background:linear-gradient(to bottom,rgba(var(--tbl-rgb),0),rgba(var(--tbl-rgb),.92) 70%);
  text-align:center;line-height:60px;font-size:11px;color:var(--tbl-ink,#000);opacity:0;transition:opacity .25s;pointer-events:none;
  overflow:hidden}  /* line-height 60 > height 44: without this the 16px taskan satir kutunun scrollHeight'ini buyutur ve .more her zaman acik kalirdi */
.tbl-wrap.more::after,.board.more::after{opacity:.9}

/* ---- empty ---- */
.card{background:var(--panel);border:1px solid var(--line)}
.empty{padding:64px 20px;text-align:center;color:var(--ink-2)}
.empty .box{width:120px;height:84px;margin:0 auto 16px;border:1px dashed var(--line);background:
  linear-gradient(45deg,transparent 48%,var(--line-soft) 48%,var(--line-soft) 52%,transparent 52%),
  linear-gradient(-45deg,transparent 48%,var(--line-soft) 48%,var(--line-soft) 52%,transparent 52%)}

/* ---- ranks boards ---- */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.board{border:1px solid var(--line);background:rgba(255,255,255,.92);border-radius:14px;overflow:clip}
.board .bh{display:flex;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--fill)}
.board .bh b{font-weight:600;font-size:12px}
.board .bh .rs{margin-left:auto;font-size:11px;color:var(--ink-2);border:1px dashed var(--line);
  padding:1px 7px;border-radius:2px}
.board table th{background:none;border-top:0;cursor:default}

/* ---- Game Locations "Player ranks" görünümü: iki sıralama tablosu yan yana, tablo görünümüyle aynı dil ---- */
.rk-col{min-width:0}                    /* grid hücresi içerikle şişmesin; taşan satır tablo içinde kayar */
.rk-head{display:flex;align-items:baseline;gap:10px;padding:0 4px 6px}
.rk-cap{margin-left:auto;font-size:12px;color:#fff;opacity:.85;
  text-shadow:var(--gl-title-sh-x) var(--gl-title-sh-y) var(--gl-title-sh-blur) var(--gl-title-sh-color)}
/* ilk üç: sıra hücresi event sarısıyla tonlanır (yeni renk yok), satır kalın yazılır */
.tbl-wrap tr.rk-top td{font-weight:700}
.tbl-wrap td.rk1{background:rgba(255,230,0,.42)}
.tbl-wrap td.rk2{background:rgba(255,230,0,.24)}
.tbl-wrap td.rk3{background:rgba(255,230,0,.12)}

/* ---- product detail ---- */
.crumb{font-size:12px;color:var(--muted);padding-top:20px}
.crumb a{border-bottom:1px solid var(--line-soft);cursor:pointer}
.buy{border:1px solid var(--line-soft);background:var(--fill);padding:12px 14px;font-size:13px;margin-top:16px}

/* ---- TOS ---- */
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.acc{border:1px solid var(--line);font-family:var(--tos-font);background:rgba(255,255,255,var(--gl-a));backdrop-filter:blur(var(--gl-blur));-webkit-backdrop-filter:blur(var(--gl-blur));max-width:960px;max-height:calc(100vh - var(--nav-h) - var(--tos-reserve));overflow:auto}
.acc{max-height:calc(100dvh - var(--nav-h) - var(--tos-reserve))}
.acc-item{border-top:1px solid var(--line-soft)}
.acc-item:first-child{border-top:0}
.acc-h{display:flex;width:100%;text-align:left;gap:12px;align-items:center;background:transparent;
  border:0;padding:14px 18px;font-size:14px;font-weight:600}
.acc-h .mk{width:18px;color:var(--muted)}
.acc-b{display:none;padding:0 18px 18px 48px;color:var(--ink-2);font-size:13px;max-width:88ch}
.acc-item.open .acc-b{display:block}
.acc-item.open .acc-h{background:rgba(255,255,255,.35)}
/* kutunun altinda "devami var" ipucu: sona gelince kaybolur */
.acc-wrap{position:relative;max-width:960px}
.acc-more{position:absolute;left:1px;right:calc(var(--sb-w) + 1px);bottom:1px;height:72px;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.9));transition:opacity .2s}
.acc-wrap.at-end .acc-more{opacity:0}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line);background:rgba(255,255,255,var(--ftr-a));backdrop-filter:blur(var(--ftr-blur));-webkit-backdrop-filter:blur(var(--ftr-blur));color:var(--ftr-ink);font-size:var(--ftr-fs)}
.site-footer .wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:52px;gap:2px;line-height:1.3}
.site-footer .ftr-row{display:flex;align-items:center;justify-content:center;gap:8px}
.site-footer .ftr-legal{font-size:var(--ftr-fs-legal)}
.site-footer a{color:var(--ftr-link);border-bottom:1px dotted var(--ftr-link);cursor:pointer}

/* ---- notes drawer ---- */
.notes-btn{position:fixed;right:14px;bottom:14px;z-index:190;border:1px dashed #9a9a9a;background:#fdfdfd;
  padding:7px 12px;font-size:12px;border-radius:2px}
.notes-panel{position:fixed;right:14px;bottom:52px;z-index:190;width:320px;display:none;
  border:1px dashed #9a9a9a;background:#fdfdfd;padding:14px 16px;font-size:12px;color:#5c5c5c}
.notes-panel.open{display:block}
.notes-panel ol{margin:8px 0 0;padding-left:18px}
.notes-panel li{margin:6px 0;line-height:1.45}
/* --- adım 3: logo + saydam tablo --- */
.logo{font-family:"Fredoka One",Fredoka,"Nunito",sans-serif;font-weight:400;font-size:22px;letter-spacing:.01em;color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.6)}
.logo .mark{display:none}
.tbl-wrap{background:rgba(var(--tbl-rgb,12,44,22),var(--tbl-a,.58));backdrop-filter:blur(var(--tbl-blur,10px));-webkit-backdrop-filter:blur(var(--tbl-blur,10px));border-color:rgba(255,255,255,.22)}
.tbl-wrap table{background:transparent;color:#f2f6f0}
.tbl-wrap th,.tbl-wrap td{border-color:rgba(255,255,255,.14)}
.tbl-wrap th{background:rgba(0,0,0,.28);color:#fff}
.tbl-wrap th .ar{color:rgba(255,255,255,.6)}
.tbl-wrap tbody tr:nth-child(4n+3){background:rgba(255,255,255,.05)}
.tbl-wrap tbody tr:hover{background:rgba(255,255,255,.08)}
.tbl-wrap td.num{color:#eaf5e6}
.tbl-wrap td .exp{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.tbl-wrap .sub-row td{background:rgba(0,0,0,.22)}
.tbl-wrap .subgrid div{color:#dfe8dc;border-bottom-color:rgba(255,255,255,.18)}
.tbl-wrap a{color:#fff}
/* --- adım 4: sabit tablo/kart renkleri + şerit --- */
:root{--tbl-rgb:37,123,20;--tbl-a:.74;--tbl-blur:30px}
html.bg-candies{--tbl-rgb:153,112,0}
.board{background:rgba(var(--tbl-rgb),var(--tbl-a));backdrop-filter:blur(var(--tbl-blur));-webkit-backdrop-filter:blur(var(--tbl-blur));border-color:rgba(255,255,255,.22);color:#f2f6f0}
.board .bh{background:rgba(0,0,0,.28);color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.board .bh .rs{color:#f2f6f0;border-color:rgba(255,255,255,.4)}
.board table{background:transparent;color:#f2f6f0}
.board th,.board td{border-color:rgba(255,255,255,.14)}
.board th{color:#fff}
.board tbody tr:nth-child(4n+3){background:rgba(255,255,255,.05)}
.board td.num{color:#eaf5e6}
.strip{background:transparent;border-bottom:0}
.strip .wrap{background:rgba(255,255,255,.35);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.35);border-radius:14px;margin-top:10px;padding:0 16px;width:1232px;max-width:calc(100% - 48px)}
/* --- adım 5: tablo yazı rengi değişkeni --- */
:root{--tbl-ink:#f2f6f0}
.tbl-wrap table,.board,.board table,.tbl-wrap td.num,.board td.num,.tbl-wrap .subgrid div,.board .bh .rs{color:var(--tbl-ink)}
.tbl-wrap th,.board th,.board .bh,.tbl-wrap a,.tbl-wrap td .exp{color:var(--tbl-ink)}
/* --- adım 6: beyaz saydam tablo, siyah yazı, başlık satırı değişkeni --- */
:root{--tbl-rgb:255,255,255;--tbl-a:.65;--tbl-blur:20px;--tbl-ink:#000;--th-rgb:68,255,0;--th-a:.45}
html.bg-candies{--tbl-rgb:255,255,255;--th-rgb:255,115,0}
.tbl-wrap th,.board .bh{background:rgba(var(--th-rgb),var(--th-a))}
.tbl-wrap th .ar{color:var(--tbl-ink);opacity:.6}
.tbl-wrap td .exp{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.3)}
.tbl-wrap th,.tbl-wrap td,.board th,.board td,.board .bh{border-color:rgba(0,0,0,.14)}
.tbl-wrap tbody tr:nth-child(4n+3),.board tbody tr:nth-child(4n+3){background:rgba(0,0,0,.04)}
.tbl-wrap tbody tr:hover{background:rgba(0,0,0,.07)}
.tbl-wrap .sub-row td{background:rgba(0,0,0,.06)}
.tbl-wrap .subgrid div{border-bottom-color:rgba(0,0,0,.2)}
.tbl-wrap,.board{border-color:rgba(0,0,0,.18)}
.board .bh .rs{border-color:rgba(0,0,0,.35)}
/* --- adım 7: buton değişkenleri (chip, seg, btn) --- */
:root{--bt-rgb:255,255,255;--bt-a:.35;--bt-ink:#000;--bt-blur:20px;--bton-rgb:255,255,255;--bton-a:.85;--bton-ink:#000;--bt-line:.35}
.chip,.seg,.btn{background:rgba(var(--bt-rgb),var(--bt-a));color:var(--bt-ink);border-color:rgba(0,0,0,var(--bt-line));
  backdrop-filter:blur(var(--bt-blur));-webkit-backdrop-filter:blur(var(--bt-blur))}
.seg button{color:var(--bt-ink)}
.seg button+button{border-left-color:rgba(0,0,0,var(--bt-line))}
.chip.on,.seg button.on,.btn.primary{background:rgba(var(--bton-rgb),var(--bton-a));color:var(--bton-ink);border-color:rgba(0,0,0,var(--bt-line))}
.chip.add{color:var(--bt-ink);opacity:.75}
/* arama kutusu ve buyutec dugmesi: yanindaki cam butonlarla ayni gorunum (yari saydam,
   blur), kutuda 14px kose ve ortali yazi, dugmede tam yuvarlak */
.lsearch input,.lsearch .lsearch-btn{background:rgba(var(--bt-rgb),var(--bt-a));color:var(--bt-ink);border-color:rgba(0,0,0,var(--bt-line));backdrop-filter:blur(var(--bt-blur));-webkit-backdrop-filter:blur(var(--bt-blur))}
.lsearch input{text-align:center;border-radius:14px}
.lsearch input::placeholder{color:var(--bt-ink);opacity:.55}
.lsearch input:focus{outline:none;background:rgba(var(--bton-rgb),var(--bton-a))}
.lsearch .lsearch-btn:hover,.lsearch .lsearch-btn:focus-visible{background:rgba(var(--bton-rgb),var(--bton-a))}
@media (prefers-reduced-motion:reduce){.lsearch,.lsearch input,.lsearch .lsearch-btn{transition:none}}
.btn.ghost{background:rgba(var(--bt-rgb),var(--bt-a))}
/* --- adım 8: küçük harf logo + sarı fırça darbesi --- */
.logo{text-transform:lowercase;font-size:24px}
.logo .brush{position:relative;display:inline-block;padding:0 6px;margin-left:2px}
.logo .brush .w{position:relative;z-index:1}
.logo .brush .stroke{position:absolute;left:-14px;top:-4px;width:calc(100% + 28px);height:calc(100% + 10px);z-index:0;pointer-events:none}
/* --- adım 9: iki satır logo, zıplayan harfler --- */
.hdr{height:var(--nav-h);padding-right:24px}
.logo{margin-left:6px}
.logo{flex-direction:column;align-items:center;gap:0;line-height:.95}
.logo .top{display:flex;font-size:24px;letter-spacing:.02em;padding-left:0;margin-bottom:0}
.logo .top i{display:inline-block;font-style:normal;animation:hop 10s infinite;animation-delay:calc(var(--i) * .18s);will-change:transform}
@keyframes hop{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  1.8%{transform:translateY(-9px);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  3.6%,100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.logo .top i{animation:none}}
.logo .brush{margin-left:0}
/* --- adım 10: logo boyut/konum değişkenleri --- */
:root{--lg-top-size:33px;--lg-top-y:0px;--lg-bot-size:17px;--lg-bot-y:0px}
.logo .top{font-size:var(--lg-top-size);transform:translateY(var(--lg-top-y))}
.logo .brush{font-size:var(--lg-bot-size);transform:translateY(var(--lg-bot-y))}
/* --- adım 11: performans denemesi değişkenleri --- */
:root{--st-blur:0px;--bt-blur:0px;--bg-attach:fixed;--tbl-blur:0px}
body,.site-header{background-attachment:var(--bg-attach)}
.strip .wrap{backdrop-filter:blur(var(--st-blur));-webkit-backdrop-filter:blur(var(--st-blur))}
/* --- adım 12: sarı şerit, mavi link, genişlik --- */
:root{--wrap-w:1200px;--st-rgb:255,247,0;--st-a:1;--st-w:calc(var(--wrap-w) - 48px)}
.wrap{width:var(--wrap-w)}
.strip .wrap{background:rgba(var(--st-rgb),var(--st-a));width:var(--st-w)}
.strip .tri{display:none}
.strip .dots{margin-left:0;order:-1}
.strip .go{color:#1e6fd9;border-bottom-color:#1e6fd9}
/* --- adım 13: numara sütunu, event bildirimi --- */
tr.rowmain{cursor:pointer}
tr.rowmain.ev td{background:rgba(255,230,0,.35)}
tr.rowmain.ev td.num{font-weight:700}
/* --- adım 17: Event Notice toast — eski sitedeki Bootstrap 4 görünümü (kullanıcı onaylı JSON: hdr-y 4px, hdr-h 35px, sun 0.7) --- */
:root{--hdr-y:4px;--hdr-h:35px;--sun-scale:0.7}
.toast{position:fixed;top:84px;right:18px;z-index:500;min-width:240px;max-width:350px;overflow:hidden;font-size:.875rem;color:#212529;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:rgba(255,255,255,.95);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);border-radius:.25rem;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateX(120%);transition:transform .35s ease}
.toast.show{transform:none}
.toast-header{display:flex;align-items:center;min-height:var(--hdr-h);padding:.25rem .75rem;background:#FFE633;border-bottom:1px solid rgba(0,0,0,.05)}
.toast-header > *{align-self:center;transform:translateY(var(--hdr-y))}
.toast-header .sun{display:block;flex:none;margin-right:5px;width:calc(26px * var(--sun-scale));height:calc(26px * var(--sun-scale))}
.toast-header strong{margin-right:auto;color:#000;opacity:.7;font-weight:700}
.toast-header small{font-size:80%;padding:0 4px;line-height:1;color:#6c757d}
.toast-header .close{margin-left:.5rem;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;
  background:transparent;border:0;padding:0;cursor:pointer;display:flex;align-items:center;font-family:inherit}
.toast-header .close:hover{opacity:.75}
.toast-header .close span{display:block;line-height:1;transform:translateY(-1px)}
.toast-body{padding:.75rem}
.toast-body .sub{display:block;color:#6c757d;font-size:12px;margin-top:2px}
/* --- adım 14: kalıcı varsayılanlar (kullanıcı onayladı, sabitlendi) — Game Locations başlığı / navbar --- */
:root{--gl-title-color:#ffffff;--gl-title-opacity:1;--gl-head-rgb:68,255,0;--gl-head-a:1;--gl-title-fs:19px;
  --gl-title-sh-x:0px;--gl-title-sh-y:1px;--gl-title-sh-blur:3px;--gl-title-sh-color:#000000;
  --nav-font-size:19px;--nav-text-color:#575757;--nav-underline-color:#2bff00;--nav-glow-blur:0px;--nav-glow-color:#ffffff}
/* adım 16: candies temasına özgü locations-list değerleri (kullanıcı onaylı JSON) — flowers = :root varsayılanları */
html.bg-candies{--gl-head-rgb:255,187,0;--tbl-a:.9}
.board .bh b,.rk-head b{color:var(--gl-title-color);opacity:var(--gl-title-opacity);
  font-family:"Fredoka One",Fredoka,"Nunito",sans-serif;font-weight:400;font-size:var(--gl-title-fs,12px);
  text-shadow:var(--gl-title-sh-x) var(--gl-title-sh-y) var(--gl-title-sh-blur) var(--gl-title-sh-color)}
/* Game Locations "Locations" görünümü (varsayılan görünüm) — tablonun başlık satırı asıl görünen "liste başlığı"dır */
.tbl-wrap th{color:var(--gl-title-color);
  font-family:"Fredoka One",Fredoka,"Nunito",sans-serif;font-weight:400;font-size:var(--gl-title-fs,12px);
  text-shadow:var(--gl-title-sh-x) var(--gl-title-sh-y) var(--gl-title-sh-blur) var(--gl-title-sh-color)}
/* liste başlığı arka plan rengi/opaklığı (kullanıcı tunable) — kalıcı varsayılan: rgb(68,255,0) / 1 (adım14 :root) */
.tbl-wrap th,.board .bh{background:rgba(var(--gl-head-rgb),var(--gl-head-a))}
.nav a{font-size:var(--nav-font-size);font-family:var(--nav-font);color:var(--nav-text-color);
  text-shadow:0 0 var(--nav-glow-blur) var(--nav-glow-color)}
.nav a.on{color:var(--nav-text-color);border-bottom-color:var(--nav-underline-color)}
/* --- adım 15: firefly arka plan efekti (canvas, legacy stars.js'in vanilla JS karşılığı) --- */
body{isolation:isolate} /* canvas'ın z-index:-1 katmanı body'nin kendi arkaplanının önünde, normal içeriğin arkasında kalsın diye yeni bir stacking context açar */
.firefly-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}
/* --- adım 23: kelebekler (aynı canvas'a çizilir; kullanıcı onaylı butterfly-canvas JSON'u varsayılan) --- */
:root{--bf-count:3;--bf-size:72px;--bf-speed:.9;--bf-flap:.7s;--bf-open:80deg;--bf-lag:.2;--bf-bend:.2;--bf-elev:-25deg;--bf-depth:.6;
  --bf-pmode:gold;--bf-pdens:2;--bf-psize:1.2;--bf-pgrav:60;--bf-plife:1.6s;
  --bf-glow:1.5;--bf-glow-spread:24px;--bf-glow-mode:gold}   /* adım 25: parıltı (0 = kapalı); kullanıcı onaylı butterflies JSON'u */
/* --- adım 18: gökkuşağı (kullanıcı onaylı JSON) — sol üstte, yumuşak, düşük opaklık; ateş böceklerinin önünde, içeriğin arkasında --- */
:root{--rb-op:.15;--rb-size:1400px;--rb-x:0%;--rb-y:-190px;--rb-blur:2px;--rb-band:30px}
.rainbow{position:fixed;left:var(--rb-x);top:var(--rb-y);width:var(--rb-size);height:calc(var(--rb-size)/2);
  transform:translateX(-50%);opacity:var(--rb-op);filter:blur(var(--rb-blur));pointer-events:none;z-index:-1;
  background:radial-gradient(circle calc(var(--rb-size)/2) at 50% 100%,
    transparent 0 calc(100% - 7*var(--rb-band)),
    #b04cff calc(100% - 7*var(--rb-band)) calc(100% - 6*var(--rb-band)),
    #4b3cff calc(100% - 6*var(--rb-band)) calc(100% - 5*var(--rb-band)),
    #2f9bff calc(100% - 5*var(--rb-band)) calc(100% - 4*var(--rb-band)),
    #3ee06a calc(100% - 4*var(--rb-band)) calc(100% - 3*var(--rb-band)),
    #ffe93a calc(100% - 3*var(--rb-band)) calc(100% - 2*var(--rb-band)),
    #ff9a1f calc(100% - 2*var(--rb-band)) calc(100% - 1*var(--rb-band)),
    #ff3b3b calc(100% - 1*var(--rb-band)) 100%,
    transparent 100%);
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 55%);
  mask-image:linear-gradient(to top,transparent 0,#000 55%)}
/* --- adım 19: products slider kartı ayarları (sim panelinden canlı) — arka plan opaklık/blur/göster, yazı fontu/rengi/gölgesi, ok opaklığı --- */
/* kullanıcı onaylı JSON (products): arka plan gizli (html.pr-nobg), Segoe UI, siyah yazı, gölge yok, oklar %20 */
:root{--pr-a:.05;--pr-blur:8px;--pr-font:"Segoe UI",system-ui,sans-serif;--pr-ink:#ffffff;--pr-sh-x:1px;--pr-sh-y:1px;--pr-sh-blur:5px;--pr-sh-color:#000000;--pr-arw-a:.2}
.fslider{background:rgba(255,255,255,var(--pr-a));-webkit-backdrop-filter:blur(var(--pr-blur));backdrop-filter:blur(var(--pr-blur))}
html.pr-nobg .fslider{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.sl-info{font-family:var(--pr-font);color:var(--pr-ink);text-shadow:var(--pr-sh-x) var(--pr-sh-y) var(--pr-sh-blur) var(--pr-sh-color)}
.sl-info .h2,.sl-info .pitch,.sl-info .sl-intro,.sl-info .price,.sl-info .sl-more{color:var(--pr-ink)}
.sl-info .pitch,.sl-info .sl-intro{opacity:.85}
.sl-nav button.arw{opacity:var(--pr-arw-a)}
/* --- adım 20: home — yazı arka planı kaldırıldı, eski sitenin sloganları; font varsayılan olarak products ile aynı --- */
/* kullanıcı onaylı JSON (home): Fredoka One, beyaz, gölge 1px 1px 4px siyah, arka plan gizli */
:root{--hm-font:"Fredoka One",Fredoka,sans-serif;--hm-ink:#ffffff;--hm-sh-x:1px;--hm-sh-y:1px;--hm-sh-blur:4px;--hm-sh-color:#000000}
html.hm-nobg .home-intro{background:transparent;border-color:transparent}
.home-intro{font-family:var(--hm-font);color:var(--hm-ink);text-shadow:var(--hm-sh-x) var(--hm-sh-y) var(--hm-sh-blur) var(--hm-sh-color)}
.home-intro .h1{color:var(--hm-ink);font-family:inherit;font-size:30px;font-weight:600;line-height:1.25;margin-bottom:10px}
.home-intro .sub{color:var(--hm-ink);font-size:20px;line-height:1.35;max-width:none}
.home-intro .sub.store{color:#ffc107}
.home-intro .sub.store a{color:#17a2b8;text-decoration:underline}
.home-intro .cta-row{margin-top:14px}
.home-intro .cta-row .btn,.home-intro .note{text-shadow:none}
/* home'daki üç düğme aynı stil: yarı saydam (primary'nin opak görünümü kaldırıldı), oval köşe */
.home-intro .cta-row .btn{background:rgba(var(--bt-rgb),var(--bt-a));color:var(--bt-ink);border-color:rgba(0,0,0,var(--bt-line));
  font-weight:600;border-radius:14px;padding:9px 18px}
/* --- adım 22: sitedeki tüm düğmeler locations chip'leri gibi oval (14px) --- */
.btn,.seg,.sl-nav button.arw,td .exp,.notes-btn{border-radius:14px}
.home-intro .cta-row .btn:hover{background:rgba(var(--bt-rgb),calc(var(--bt-a) + .2))}
/* Visit Store düğmesi + açılır menü (Inworld / Marketplace) */
.store-wrap{position:relative;display:inline-block}
.store-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);padding:6px;text-align:left;font-family:var(--font);text-shadow:none}
.store-menu a{display:block;padding:8px 10px;border-radius:4px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.store-menu a small{display:block;font-weight:400;font-size:12px;color:var(--ink-2)}
.store-menu a:hover{background:var(--fill2)}
/* --- adım 21: home büyük logo (navbar logosunun büyüğü); harfler zıplar, havada bir tur döner, düşer --- */
:root{--hl-top:72px;--hl-bot:36px;--hl-jump:40px;--hl-dur:.8s;--hl-stagger:.12s;--hl-every:6s}
.hero-logo{cursor:default;margin:0 auto 18px;text-shadow:0 0 6px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.6)}
.hero-logo .top{font-size:var(--hl-top);transform:none}
.hero-logo .brush{font-size:var(--hl-bot);transform:none;padding:0 .25em}
.hero-logo .brush .stroke{left:-.55em;width:calc(100% + 1.1em);top:-.12em;height:calc(100% + .3em)}
/* sade animasyon: harfler tek tek zıplayıp geri düşer, dönme yok (hem hero hem navbar) */
.logo .top i{animation:none;transform:none;transform-origin:50% 55%;translate:0 0;rotate:0deg}
.logo .top i.go{animation:heroJump var(--hl-dur) both;animation-delay:calc(var(--i) * var(--hl-stagger))}
/* navbar logosu küçük ölçek (JS her 5 sn tetikler); eski "hop" döngüsü kapatıldı */
.hdr .logo .top i{--hl-jump:12px;--hl-dur:.7s;--hl-stagger:.08s}
@keyframes heroJump{
  0%{translate:0 0;animation-timing-function:cubic-bezier(.17,.67,.35,1)}   /* hızlı kalkış, tepede yavaşlar */
  50%{translate:0 calc(var(--hl-jump) * -1);animation-timing-function:cubic-bezier(.65,0,.83,.33)} /* yerçekimiyle hızlanarak iner */
  100%{translate:0 0}
}
@media (prefers-reduced-motion:reduce){.logo .top i.go{animation:none}}
/* --- adım 28: canlı veri — değişen hücre vurgusu, 18+ rozeti, oyun kipi ikonu --- */
@keyframes cellChg{0%{background:rgba(255,230,0,.85)}100%{background:rgba(255,230,0,0)}}
td.chg{animation:cellChg 1s ease-out}
@media (prefers-reduced-motion:reduce){td.chg{animation:none}}
td[data-k="loc"]{max-width:260px;overflow:hidden}
td[data-k="host"]{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-cell{display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap}
.loc-cell .loc-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto;color:blue}
.loc-pin{width:16px;height:16px;flex:0 0 auto;display:block}
.adult-badge{width:18px;height:16px;flex:0 0 auto;margin-left:6px;display:block}
td .maplink{margin-right:0;text-decoration:none;opacity:.7;display:inline-flex;flex:0 0 auto}
td .maplink:hover{opacity:1}
td .mode{margin-right:5px;opacity:.7;cursor:help}
td .exp.scores-btn{width:auto;padding:0 9px;line-height:18px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer}
td.loading{padding:26px;text-align:center;color:var(--ink-2)}
/* --- adım 29: rate hücresi üstünde "ne zaman başladı" ipucu (salt CSS tooltip) + canlı veri arıza notu --- */
td.tip{position:relative;cursor:help}
td.tip[data-tip]::after,td.tip[data-tip]::before{position:absolute;left:50%;opacity:0;pointer-events:none;
  transition:opacity .12s ease;transform:translateX(-50%);z-index:20}
td.tip[data-tip]::after{content:attr(data-tip);bottom:calc(100% + 7px);white-space:nowrap;background:rgba(20,20,20,.92);
  color:#fff;font-size:11px;font-weight:600;line-height:1.4;padding:4px 8px;border-radius:6px}
td.tip[data-tip]::before{content:"";bottom:100%;border:5px solid transparent;border-top-color:rgba(20,20,20,.92)}
td.tip[data-tip]:hover::after,td.tip[data-tip]:hover::before{opacity:1}
.tbl-note{margin-top:6px;padding:0 4px;font-size:12px;font-style:italic;color:var(--ink-2)}
/* --- adım 28: skor penceresi (modal) — tablo diliyle aynı --- */
.modal-back{position:fixed;top:0;right:0;bottom:0;left:0;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.45);animation:modalIn .18s ease-out}
.modal-back[hidden]{display:none}   /* display:flex, [hidden] varsayilanini ezerdi */
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-card{width:560px;max-width:100%;max-height:78vh;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.35)}
.modal-head{display:flex;align-items:baseline;gap:8px;padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.12);
  background:rgba(var(--th-rgb,68,255,0),var(--th-a,.45))}
.modal-head strong{font-size:15px;color:#000}
.modal-head small{margin-right:auto;font-size:12px;color:rgba(0,0,0,.62)}
.modal-head .close{margin-left:auto;padding:0 2px;font:inherit;font-size:22px;font-weight:700;line-height:1;color:#000;
  opacity:.5;background:transparent;border:0;cursor:pointer;align-self:center}
.modal-head .close:hover{opacity:.85}
.modal-body{overflow:auto}
.modal-body table{background:transparent}
.modal-body thead th{position:sticky;top:0;z-index:2;background:#f0f0f0;cursor:default}
.modal-body tr.top10 td{font-weight:600}
.modal-body .msg{padding:26px;text-align:center;color:var(--ink-2)}
/* --- adım 36: responsive — tablet (≤900px) ve telefon (≤600px); masaüstü (≥1000px) değişmez, :root varsayılanları yalnız burada ezilir --- */
@media (max-width:900px){
  :root{--nav-h:112px}   /* iki satırlı header: logo satırı + linkler/HQ satırı; yükseklik hesapları (home, tablo, TOS) bu değeri kullanır */
  .hdr{flex-wrap:wrap;height:auto;min-height:var(--nav-h);gap:2px 14px;padding:6px 24px 8px 16px}
  .hdr::before{content:"";flex-basis:100%;order:1;height:0}   /* logo ile linkler arasına satır kırımı (hamburger yok) */
  .hdr .logo{order:0;margin-left:0}
  .hdr .nav,.hdr .spacer,.hdr #hqbtn{order:2}
  .nav{flex-wrap:wrap;gap:0 14px;margin-left:0}
  .nav a{display:inline-flex;align-items:center;min-height:40px;padding:4px 4px}
  #hqbtn{min-height:40px}
  #sim,#simShow{display:none!important}
}
/* Arama kutusu chip/segment satirinin altina tam genislikte iner: order:1 onu order'i 0 olan
   diger uc ogenin arkasina atar, flex-basis:100% de yeni satira zorlar. Esik 600 degil 720:
   601-720 arasinda kutu tek satirda .seg'i sikistirip segmenti iki satira dusuruyordu.
   .chips-row'un sarmasi da bu blokta -- kutu yeni satira ancak sarma acikken inebilir. */
@media (max-width:720px){
  .chips-row{flex-wrap:wrap}
  #p-locations .chips-row{display:flex}   /* dar ekranda grid yerine sarmalanan flex */
  /* Kapaliyken buyutec dugmesi ilk satirda chip'lerin yaninda durur; acilinca kendi
     satirina inip tam genisligi alir (order:1 onu order'i 0 olan digerlerinin arkasina atar). */
  #p-locations .lsearch{flex:0 0 33px}
  #p-locations .lsearch.open{order:1;flex:1 1 100%;width:auto}
  #p-locations .lsearch:not([hidden])+.spacer{display:block}   /* ilk satirda spacer segmenti yine saga itsin */
}
@media (max-width:600px){
  :root{--nav-h:60px;--pr-fs-title:26px;--pr-fs-pitch:16px;--pr-fs-intro:15px;--bf-count:0;--tbl-reserve:330px;--tos-reserve:280px}   /* reserve'ler: şerit hapı + chips satırı iki satıra sarar, footer büyür; sayfa kaymaz, tablo içinde kayar */
  .wrap{padding:0 16px}
  .wrap.sec,#p-locations .sec{padding-left:12px;padding-right:12px}   /* .sec yan dolguyu sıfırlar; telefonda içerik kenara yapışmasın */
  .hdr{padding:6px 16px;flex-wrap:nowrap;gap:12px}   /* telefon: tek satır — logo + 4 link; HQ düğmesi gizli */
  .hdr::before{display:none}
  .hdr .nav{order:0;margin-left:0}
  .hdr .logo{zoom:.85}
  .nav{gap:0 8px}
  .nav a{font-size:14px;padding:4px 1px}
  #hqbtn{display:none}
  #p-home{min-height:calc(100vh - var(--nav-h) - 89px)}   /* footer telefonda iki satıra sarar (~87px + üst çizgi) */
  #p-home{min-height:calc(100dvh - var(--nav-h) - 89px)}
  #p-products.on{min-height:calc(100vh - var(--nav-h) - 89px)}
  #p-products.on{min-height:calc(100dvh - var(--nav-h) - 89px)}
  .strip .wrap{height:auto;min-height:38px;padding:6px 12px;gap:4px 10px}   /* ürün şeridi: metin sarınca hap büyür, taşmaz */
  .strip .txt{flex:1 1 0;min-width:0;line-height:1.3}
  .strip .go{display:none}   /* hapın tamamı zaten tıklanır; 'See product' kuyruğu telefonda gizli */
  .firefly-bg{display:none}   /* ateş böceği + kelebek canvas'ı telefonda kapalı */
  .site-footer{font-size:11px}.site-footer .ftr-legal{font-size:11px}   /* telefonda telif satırı + TOS tek satıra sığsın */
  .home-intro{padding:24px 18px}
  .split{grid-template-columns:1fr}
  .sl-grid{grid-template-columns:1fr;gap:10px}
  .sl-media{order:-1}   /* görsel üstte, yazı altta */
  .sl-media .imgbox-real{height:230px!important}   /* inline 280px kutu; %150 ölçekli görsel telefonda kutudan taşmasın */
  .sl-media .imgbox-real img{max-height:200px!important}
  .sl-media .imgbox-real.card-box{height:auto!important}
  .sl-nav button.arw{width:40px;height:36px;font-size:18px}   /* dokunma hedefi */
  #pane>.tbl-wrap th:last-child,#pane>.tbl-wrap td[data-k="range"]{display:none}   /* Range sütunu telefonda gizli */
  #pane>.tbl-wrap th:first-child,#pane>.tbl-wrap td:first-child:not([colspan]){display:none}   /* # sütunu telefonda gizli; colspan'lı "Loading…/No active" satırı görünür kalır */
  #pane>.tbl-wrap th,#pane>.tbl-wrap td{padding:7px 4px}
  td.tip[data-tip]::after,td.tip[data-tip]::before{display:none}   /* mutlak konumlu ipucu tabloya hayalet yatay kaydırma ekliyordu */
  #pane>.tbl-wrap th{font-size:13px}
  td .exp.scores-btn{padding:0 6px}
  td[data-k="loc"]{max-width:100px}
  td[data-k="host"]{max-width:80px}
  .boards{grid-template-columns:1fr}
  .boards .tbl-wrap,.boards .board{max-height:max(160px,calc((100vh - var(--nav-h) - var(--tbl-reserve) - 80px)/2))}   /* alt alta iki pano: başlık satırı + ara boşluklar ≈80; taban 160px: çok kısa ekranda sayfa kayabilir */
  .boards .tbl-wrap,.boards .board{max-height:max(160px,calc((100dvh - var(--nav-h) - var(--tbl-reserve) - 80px)/2))}
  .acc-h{padding:12px 14px}
  .acc-b{padding:0 14px 14px 32px}
  .site-footer .wrap{height:auto;min-height:52px;padding:8px 16px}
  .site-footer .ftr-row{flex-wrap:wrap;gap:2px 8px}
}
@media (max-width:360px){
  :root{--nav-h:96px}
  .hdr{flex-wrap:wrap;row-gap:0}   /* 320px: logo üstte, linkler altta */
  #pane>.tbl-wrap th{font-size:12px}
  td[data-k="loc"]{max-width:90px}
  td[data-k="host"]{max-width:60px}
  html.bg-candies #pane>.tbl-wrap th:nth-child(5),html.bg-candies #pane>.tbl-wrap td[data-k="left"]{display:none}   /* 320px: Candies'te Left sütunu da gizli, Jackpot + Scores kalır */
  .boards .tbl-wrap th:first-child{width:32px!important}.boards .tbl-wrap th:last-child{width:80px!important}   /* pano sütun genişlikleri JS ile inline verilir (44/120px); 320px'te daralt */
  .boards .tbl-wrap td:nth-child(2){max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* uzun oyuncu adı tabloyu genişletmesin */
  .boards .tbl-wrap th,.boards .tbl-wrap td{padding-left:4px;padding-right:4px;font-size:12px}
}
/* --- /adım 36 --- */
/* --- adim 37: urun partikulleri --- */
/* Products sayfasinda etkin urun gorselinin arkasindan cikip disariya suzulen renkli parcaciklar.
   canvas her urun gorsel kutusunun icinde, mutlak konumlu ve gorselin altinda (z-index:0 < img z-index:2);
   olculeri JS tarafindan piksel piksel verilir (kenar payi viewport'a gore kisilir ki sayfa kaymasin).
   Konum atasi .imgbox'in kendi position:relative kurali; canvas onun icinde mutlak konumlanir. */
:root{--pp-rate:18;--pp-burst:40;--pp-size:7;--pp-speed:55;--pp-life:1.8;--pp-alpha:.85;--pp-spread:.5}
.pp-canvas{position:absolute;left:0;top:0;z-index:0;pointer-events:none}
@media (max-width:600px){
  :root{--pp-rate:9;--pp-burst:20}   /* telefonda kapatilmaz, yariya inilir */
}
/* --- /adim 37 --- */