/* =========================================================
   "Streets" teması (oyuncuya: Sokaklar): kâğıt zemin, kalın siyah çizgi, sert gölge, canlı renk.
   style.css'in üstüne yazar. Eski tasarıma dönmek için index.html'den bu dosyayı kaldır.
   ========================================================= */
:root {
  --ink: #fff7ea;          /* zemin (eski koyu zemin değişkeni) */
  --ink2: #f3ead8;
  --surface: #ffffff;
  --surface2: #ffffff;
  --line: #111;
  --line2: #111;
  --text: #111;
  --muted: #5d5a55;
  --gold: #ffd93d;
  --gold2: #c2410c;        /* açık zeminde okunur vurgu */
  --gold3: #b45309;
  --red: #ff4f6d;
  --red2: #d61f45;
  --green: #15803d;
  --blue: #4d6bff;
  --teal: #0e9f9a;
  --lime: #c6ff3d;
  --pink: #ff4fa3;
  --sun: #ffd93d;
  --mint: #7cf0c8;
  --hard: 4px 4px 0 #111;
  --display: 'Archivo Black', 'Anton', Impact, sans-serif;
  --sans: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --radius: 16px;
  --shadow: 6px 6px 0 #111;
}
body { background: var(--ink); color: var(--text); font-weight: 600; }
.grain { display: none; }
a { color: var(--blue); }
.eyebrow { color: #111; background: var(--lime); display: inline-block; padding: 1px 8px; border: 2px solid #111; border-radius: 99px; letter-spacing: .6px; font-size: 10.5px; }
.muted { color: var(--muted); }
.gold-t { color: #c2410c; }
.red-t { color: #d61f45; }

/* ---------- üst bilgi ---------- */
#hud { background: var(--ink); backdrop-filter: none; border-bottom: 3px solid #111; }
.badge span { background: var(--sun); color: #111; border: 3px solid #111; box-shadow: 2px 2px 0 #111; font-family: var(--display); }
.xpring .t { stroke: rgba(0, 0, 0, .12); }
.xpring .p { stroke: var(--green); filter: none; }
.name { font-family: var(--display); font-weight: 400; letter-spacing: .2px; }
.sub a { color: var(--blue); }
.wallet { background: var(--lime); border: 3px solid #111; box-shadow: var(--hard); }
.coin-ic { color: #111; filter: none; }
.c1 { color: #111; font-family: var(--display); }
.c2 { color: #333; }
.iconbtn { background: #fff; border: 3px solid #111; box-shadow: 3px 3px 0 #111; color: #111; }
.nb { box-shadow: 0 0 0 2px #111; background: var(--pink); }
.meter { background: #fff; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
.meter.en > .ic { color: #b45309; }
.meter.st > .ic { color: var(--blue); }
.meter.hp > .ic { color: #d61f45; }
.meter.low { border-color: #d61f45; }
.bar { background: #eee6d6; border: 2px solid #111; height: 8px; }
.meter .bar { height: 7px; }
.meter.en .bar i, .bar.gold i { background: var(--sun); box-shadow: none; }
.meter.st .bar i { background: var(--mint); }
.meter.hp .bar i, .bar.red i, .bar.hp i { background: var(--pink); }
.bar.green i, .bar i { box-shadow: none; }

/* ---------- başlıklar, kartlar ---------- */
.shead-ic { background: var(--sun); border: 3px solid #111; box-shadow: 3px 3px 0 #111; color: #111; }
.shead h2 { font-family: var(--display); letter-spacing: 0; }
.card { background: #fff; border: 3px solid #111; box-shadow: var(--hard); border-radius: 18px; }
.card + .card { margin-top: 14px; }
.stats div { background: #fff; border: 2px solid #111; border-radius: 12px; box-shadow: 2px 2px 0 #111; }
.chip { background: #fff; border: 2px solid #111; color: #111; }

/* ---------- düğmeler ---------- */
.btn { border: 3px solid #111; box-shadow: var(--hard); font-family: var(--display); font-weight: 400; letter-spacing: .3px; border-radius: 14px; color: #111; background: #fff; }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; }
.btn.gold { background: var(--sun); color: #111; box-shadow: var(--hard); }
.btn.red { background: var(--pink); color: #fff; box-shadow: var(--hard); text-shadow: 1px 1px 0 #111; }
.btn.ghost { background: #fff; border: 3px solid #111; }
.btn.dim, .btn.atk.dim { background: #e7e0d2; color: #777; box-shadow: 2px 2px 0 #111; }
.link { color: var(--blue); }
.link.danger { color: #d61f45; }
.plus { background: var(--lime); border: 2px solid #111; color: #111; box-shadow: 2px 2px 0 #111; }
.plus.dim { background: #e7e0d2; color: #999; }
.do { border: 3px solid #111 !important; box-shadow: 3px 3px 0 #111; background: var(--sun); color: #111; }
.do.dim { background: #e7e0d2; color: #888; }

/* ---------- alt menü: siyah yüzen bar ---------- */
#nav { background: #111; border-top: 0; margin: 0 10px calc(8px + env(safe-area-inset-bottom)); border-radius: 22px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .25); padding-bottom: 0; }
#nav button { color: #cfc8bb; }
#nav button.on { color: #111; }
#nav button.on .ic { filter: none; }
#nav .pill { background: var(--lime); border: 0; border-radius: 16px; }
#nav button.dot::after { background: var(--pink); box-shadow: 0 0 0 2px #111; }

/* ---------- sekme çipleri ---------- */
.chips-nav button { background: #fff; border: 2px solid #111; color: #111; box-shadow: 2px 2px 0 #111; }
.chips-nav button.on { background: var(--lime); color: #111; border-color: #111; }

/* ---------- listeler ---------- */
.stoprow, .mahrow, .ilrow, .prow { background: #fff; border: 2px solid #111 !important; box-shadow: 3px 3px 0 #111; border-radius: 14px; }
.stoprow.won { opacity: 1; background: #eafbe2; }
.stoprow.next { background: var(--lime); }
.stoprow.lock { background: #f0eadf; }
.board li { background: #fff; border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
.board li.me { background: var(--lime); border-color: #111; }
.rival.foe { background: #ffe3ee; border-color: #111; }
.lvpill, .pill-s, .stoptag, .pts { border: 2px solid #111; background: var(--sun); color: #111; }
.stoptag.won { background: var(--mint); color: #111; }
.stoptag.todo { background: var(--sun); color: #111; }

/* ---------- alt sayfa (sheet) ---------- */
#sheet-panel, .sheet-panel, #sheet .panel { background: var(--ink) !important; border-top: 3px solid #111; }
.sh-scrim { background: rgba(17, 17, 17, .45) !important; }
.sh-title h2 { font-family: var(--display); }

/* ---------- pencereler ---------- */
#overlay { background: rgba(17, 17, 17, .55); backdrop-filter: none; }
.ov-card { background: var(--ink); border: 3px solid #111; box-shadow: var(--shadow); color: #111; }
.ov-title { font-family: var(--display); color: #111; }
.ov-center { color: #fff; }
.ov-center .ov-title { color: #fff; text-shadow: 3px 3px 0 #111; }
.ov-center p { color: #fff; }
.ov-center .muted { color: #e8e0d0; }
.toast { background: #111; color: #fff; border: 3px solid #111; box-shadow: 4px 4px 0 var(--lime); }
.warn, .threatbox, .abibox, .abilist, .siegebox, .regionbox, .masterbox, .guardbox, .mahlead { border: 2px solid #111 !important; box-shadow: 3px 3px 0 #111; background: #fff; color: #111; }
.masterbox.on, .abibox, .mahlead.mine { background: var(--sun) !important; }
.siegebox.bad { background: #ffe3ee !important; }
.regionbox.mine { background: var(--lime) !important; }
input, textarea, select { background: #fff; color: #111; border: 2px solid #111; }

/* ---------- koyu kalan sahneler: harita, kavga, arena, giriş ---------- */
.mapwrap.real, .citymap, .intro, .vs, .arena, .ar-me { color: #f4ecdf; }
.mapwrap.real { border: 3px solid #111; box-shadow: var(--hard); border-radius: 18px; }
.mapctl button { border: 2px solid #111; background: #fff; color: #111; box-shadow: 2px 2px 0 #111; }
.maplegend, #ilcechip { color: #111; }
#ilcechip { background: #fff; border: 3px solid #111; box-shadow: var(--hard); }
.vs { background: var(--blue); transition: background .25s; }
.vs-banner { font-family: var(--display); color: var(--lime); text-shadow: 4px 4px 0 #111; }
.vs.lose .vs-banner { color: #fff; }
.vs-rounds span { background: #fff; color: #111; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
.vs-rounds .w { background: var(--lime); color: #111; }
.vs-rounds .l { background: var(--pink); color: #fff; }
.vs .cmp { background: #fff; color: #111; border: 3px solid #111; box-shadow: var(--hard); }
.vs .cmp .muted, .vs .cmp small { color: #555; }
.vs-rew span { background: #fff; color: #111; border: 2px solid #111; border-radius: 10px; padding: 2px 8px; box-shadow: 2px 2px 0 #111; }
.vs-rew .gold-t { color: #111; background: var(--lime); }
.vs-rew .red-t { color: #fff; background: var(--pink); }

/* ---------- sezon, reklam, davet kartları ---------- */
.seasoncard { background: var(--sun) !important; }
.refcard { background: #fff !important; }
.adcard { background: var(--mint) !important; }
.kahya.on { background: var(--lime) !important; border-color: #111; }
.sbadge { background: var(--sun); color: #111; border: 2px solid #111; }
.mbadge.home { background: var(--sun); color: #111; border: 2px solid #111; }
.mbadge.own { background: var(--mint); color: #111; border: 2px solid #111; }
.face { border: 3px solid #111 !important; box-shadow: 2px 2px 0 #111; }

/* ---------- avatar ---------- */
.face.av, .face:has(> .avatar), .vs-face.av, .pc-emb.av { background: none !important; padding: 0; overflow: visible; }
.face > .avatar, .mc-face > .avatar { width: 100%; height: 100%; border-radius: 50%; display: block; }
.vs-face.av { box-shadow: 0 0 0 4px #111, 6px 6px 0 4px #111 !important; border-radius: 50%; }
.vs-face.av .avatar { width: 110px; height: 110px; }
.pc-emb.av { position: relative; width: 96px; height: 96px; border: 0; cursor: pointer; flex: none; }
.pc-emb.av .avatar { width: 96px; height: 96px; filter: drop-shadow(3px 3px 0 #111); }
.pc-emb .av-edit { position: absolute; top: -6px; right: -6px; font-style: normal; background: #fff; border: 2px solid #111; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font-size: 14px; box-shadow: 2px 2px 0 #111; }
.aved { text-align: center; }
.av-big { margin: 8px auto 10px; width: 150px; filter: drop-shadow(4px 4px 0 #111); }
.av-parts { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.av-parts::-webkit-scrollbar { display: none; }
.av-parts button { flex: none; padding: 6px 11px; border-radius: 99px; background: #fff; border: 2px solid #111; font: 700 12.5px var(--sans); box-shadow: 2px 2px 0 #111; }
.av-parts button.on { background: var(--lime); }
.av-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 4px; }
.av-opts.colors { grid-template-columns: repeat(8, 1fr); }
.av-opts .thumb { background: #fff; border: 2px solid #111; border-radius: 14px; padding: 6px 2px 4px; box-shadow: 2px 2px 0 #111; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.av-opts .thumb small { font-size: 10.5px; font-weight: 700; }
.av-opts .thumb.on { background: var(--lime); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #111; }
.av-opts .sw { aspect-ratio: 1; border: 3px solid #111; border-radius: 50%; box-shadow: 2px 2px 0 #111; }
.av-opts .sw.on { outline: 3px solid var(--pink); outline-offset: 2px; }

/* ---------- zafer yeşil, yenilgi kırmızı ---------- */
.vs.win { background: #22c55e; }
.vs.lose { background: #ff4f6d; }
.vs-banner, .vs.lose .vs-banner { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; text-shadow: 5px 5px 0 #111 !important; filter: none !important; }
.vs.win .vs-rounds .w, .vs.win .vs-rew .gold-t { background: var(--sun); }
.vs.lose .vs-rounds .l { background: #111; color: #fff; }
.vs.lose .vs-rew .red-t { background: #111; color: #fff; }
.vs .vs-side b, .vs .vs-side small { color: #fff; text-shadow: 2px 2px 0 #111; }
.vs.lose .btn.red { background: var(--sun); color: #111; text-shadow: none; }

/* ---------- eşya, dükkân, çanta, mülk ---------- */
:root { --r0: #e9e2d4; --r1: #9fd8ff; --r2: #d9b8ff; --r3: #ffd93d; }
/* nadirlik rengi: düz dolgulu kutu, kalın çerçeve, koyu ikon */
.item .tile, .prop .tile, .bagitem .tile, .itemhero .tile, .ih-tile {
  background: var(--rc, var(--sun)) !important; border: 3px solid #111 !important; box-shadow: 3px 3px 0 #111 !important;
  color: #111 !important; border-radius: 16px;
}
.item.r3 .tile, .bagitem.r3 .tile { box-shadow: 3px 3px 0 #111, 0 0 0 3px #fff, 0 0 0 6px #111 !important; }
.item.lock .tile, .prop.lock .tile { background: #e7e0d2 !important; color: #999 !important; }
.item.lock, .prop.lock { opacity: .65; }
.rar, .itemhero .rar { display: inline-block; color: #111 !important; background: var(--rc); border: 2px solid #111; border-radius: 99px; padding: 0 8px; font-size: 9.5px; letter-spacing: .6px; box-shadow: 2px 2px 0 #111; }
.item h3 { font-family: var(--display); font-weight: 400; margin-top: 3px; }
.item .st, .bagitem .st { color: #111; }
.lvtag { display: inline-block; background: #111; color: var(--lime); border-radius: 10px; padding: 4px 10px; font: 13px var(--display); }
.item .ia .link { font-weight: 700; }
/* çanta (cephanelik) */
.bagitem { background: #fff !important; border: 3px solid #111 !important; box-shadow: 3px 3px 0 #111; }
.bagitem .cnt, .prop .cnt { background: var(--pink) !important; color: #fff !important; border: 2px solid #111; font-weight: 800; }
.bagitem small.on { color: var(--green); font-weight: 800; }
/* eşya detay sayfası */
.itemhero .rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 10deg, transparent 10deg 24deg) !important; }
.itemhero h2 { font-family: var(--display); color: #111; }
.ih-stats div { background: #fff !important; border: 2px solid #111 !important; box-shadow: 2px 2px 0 #111; color: #111; }
/* mülk kartları */
.prop { background: #fff; }
.prop.own { background: #fffbe6; border-color: #111 !important; }
.till { background: var(--lime) !important; }
.till .big { color: #111; font-family: var(--display); }
.haracnote { color: #111; font-weight: 700; }
/* kuşanma yuvaları */
.slot3, .slots3 button { background: #fff; border: 2px solid #111 !important; box-shadow: 2px 2px 0 #111; color: #111; }
.slot3.empty { background: #f1ebdf !important; color: #888; border-style: dashed !important; }
.eqrow .tile { background: var(--rc, var(--sun)) !important; border: 2px solid #111 !important; color: #111 !important; }
/* sekme seçici */
.seg { background: #fff; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
.seg button.on { background: var(--sun); color: #111; border-radius: 12px; }
/* güç kutuları ve donanım yuvaları */
.pw-big { background: var(--sun) !important; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
.pw-big + .pw-big { background: var(--mint) !important; }
.pw-big .ic { color: #111 !important; }
.pw-big small { color: #333; font-weight: 700; }
.slot { background: #fff; border: 2px solid #111 !important; box-shadow: 3px 3px 0 #111; }
.slot.full { background: #eafbe2; }
.slot.short { background: #ffe8ee; }
.slot.short .sl-h span, .slot .link { color: #d61f45; font-weight: 800; }
.milestone { color: #c2410c !important; font-weight: 800; }

/* =========================================================
   Harita: açık "kâğıt harita", durum renkleri net
   ========================================================= */
.mapwrap.real { background: #cfe8f5; color: #111; }            /* deniz/boşluk: açık mavi */
.citymap.real .void { fill: #cfe8f5; }
.citymap.real .gridl { stroke: rgba(17, 17, 17, .05); }
.citymap.real .ilce { fill: #fffdf7; stroke: #111; stroke-width: 1.3; }
.citymap.real .ilce:hover { fill: #fff6c9; }
.citymap.real .ilce.open:not(.mine):not(.owned) { fill: #fffdf7; stroke: #111; }
.citymap.real .ilce.locked:not(.mine):not(.owned), .citymap.real .ilce.st-lock { fill: #e9e3d6; }
.citymap.real .ilce.st-won { fill: #d9ff8f; }
.citymap.real .ilce.st-cur { fill: #bfe6ff; stroke: #111; stroke-width: 2.4; }
.citymap.real .ilce.st-master { fill: var(--sun); stroke: #111; }
.citymap.real .ilce.owned { fill: color-mix(in srgb, var(--own) 30%, #fffdf7); }
.citymap.real .ilce.mine { fill: #ffe98a; stroke: #111; }
.citymap.real .ilce.rg, .citymap.real .ilce.rg-mine { stroke: var(--pink); stroke-width: 2.6; }
.citymap.real .ilce.sel { stroke: #111; stroke-width: 3; fill-opacity: 1; }
.citymap.real .areas:has(.sel) .ilce:not(.sel) { fill-opacity: .6; }
/* ilçe adları */
.citymap.real .il-n { fill: #111; stroke: #fffdf7; stroke-width: .3em; font-family: var(--sans); font-weight: 700; }
.citymap.real .il-n.st { fill: #111; }
.citymap.real .il-n .own { fill: #c2410c; }
.il-n .rgtag { fill: var(--pink); }
/* rota */
.citymap.real .route { stroke: #111; opacity: .55; }
.citymap.real .route.done { stroke: var(--pink); opacity: 1; filter: none; }
/* durak düğümleri */
.node .disc { fill: #fff; stroke: #111; stroke-width: 3.5; }
.node .halo { fill: #111; opacity: .12; }
.node .track { stroke: rgba(17, 17, 17, .15); }
.node .prog { stroke: var(--green); filter: none; }
.node .glyph { fill: #111; }
.node.lock .disc { fill: #e9e3d6; }
.node.lock .glyph { fill: #888; }
.node .nl { fill: #111; stroke: #fffdf7; stroke-width: 5px; font-family: var(--display); letter-spacing: .3px; }
.node.lock .nl { fill: #777; }
.node .ns { fill: #444; stroke: #fffdf7; font-weight: 700; }
.node .pulse { stroke: var(--pink); stroke-width: 3; }
.node.next .disc { fill: var(--lime); }
.node .crownb circle { fill: var(--sun); stroke: #111; stroke-width: 2; }
.node .crownb use { fill: #111; }
.node .crownb.hot circle { fill: var(--pink); stroke: #111; }
.node .crownb.hot use { fill: #fff; }
.citymap.real .node .home circle { fill: var(--sun); stroke: #111; stroke-width: 2.5; }
.citymap.real .node .home use { fill: #111; }
.citymap.real .leader { stroke: #111; opacity: .4; }
.citymap.real .anchor { stroke: #111; }
/* oyuncu sayısı rozeti */
.citymap.real .pcount rect { fill: #fff; stroke: #111; stroke-width: 2.5; }
.citymap.real .pcount.live rect { fill: var(--lime); }
.citymap.real .pcount .dot { fill: var(--pink); stroke: #111; }
/* mahalleler (ilçeye yakınlaşınca) */
.citymap.real .mah, .citymap.real .realmahs .mah { fill: #fffdf7; stroke: #111; stroke-width: .8; }
.citymap.real .mah:hover { fill: #fff6c9; }
.citymap.real .mah.syn { stroke: #111; stroke-dasharray: 3 3; stroke-opacity: .45; }
.citymap.real .mah.has, .citymap.real .realmahs .mah.has { fill: #bfe6ff; stroke: #111; }
.citymap.real .mah.won, .citymap.real .realmahs .mah.won { fill: #d9ff8f; }
.citymap.real .mah.mine, .citymap.real .realmahs .mah.mine { fill: var(--mint); stroke: #111; stroke-width: 1.6; }
.citymap.real .mah.home, .citymap.real .realmahs .mah.home { fill: var(--sun); stroke: #111; stroke-width: 2.2; }
.citymap.real .mah.cur { stroke: var(--pink); stroke-width: 2.6; }
.citymap.real .mah-n { fill: #111; stroke: #fffdf7; stroke-width: .32em; font-family: var(--sans); font-weight: 700; }
.citymap.real .mah-n.has { fill: #0b4a7a; }
.citymap.real .mah-n.home, .citymap.real .mah-n.cur { fill: #111; font-weight: 800; }
/* lejant: aynı renkler, okunur */
.maplegend { color: #111; border-bottom: 2px solid #111; font-weight: 700; }
.maplegend i { width: 14px; height: 11px; border: 2px solid #111; border-radius: 4px; }
.lg-home { background: var(--sun) !important; }
.lg-mine { background: var(--mint) !important; }
.lg-won { background: #d9ff8f !important; }
.lg-cur { background: #fff !important; border-color: var(--pink) !important; }
.lg-has { background: #bfe6ff !important; }
.lg-syn { background: #fff !important; border-style: dashed !important; }
.lg-master { background: var(--sun) !important; }
/* alt çubuk ("Devam", ilçe özeti) */
.mapcta { background: #fff !important; color: #111 !important; border: 3px solid #111 !important; box-shadow: var(--hard) !important; backdrop-filter: none !important; }
.mapcta .muted, .mapcta small { color: #444 !important; }
.mapcta.ilcechip .x { background: #fff; border: 2px solid #111; color: #111; box-shadow: 2px 2px 0 #111; }
.mapwrap .osm, .mapwrap .attr { color: #333 !important; }
.mapnote { color: #333 !important; text-shadow: none !important; }
/* ilçe sahibi (en zengin oyuncu) dolguyu değil çerçeveyi boyar; dolgu oyun durumunu gösterir */
.citymap.real .ilce.owned { fill: #fffdf7; stroke: var(--own); stroke-width: 2.4; }
.citymap.real .ilce.owned.st-won { fill: #d9ff8f; }
.citymap.real .ilce.owned.st-cur { fill: #bfe6ff; }
.citymap.real .ilce.owned.st-lock { fill: #e9e3d6; }
.citymap.real .ilce.owned.st-master { fill: var(--sun); }
.citymap.real .ilce.mine.st-won { fill: #d9ff8f; }
.citymap.real .ilce.mine.st-cur { fill: #bfe6ff; }
/* ilçe kutusu haritayı kapatmasın: lejant tek satır, kaydırılabilir; kutu kompakt */
.mapcta.ilcechip { padding: 8px 10px !important; gap: 6px 10px !important; bottom: 10px !important; }
.maplegend { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 10px; padding-bottom: 5px; gap: 8px !important; }
.maplegend::-webkit-scrollbar { display: none; }
.maplegend span { flex: none; }
.mapcta.ilcechip .mc-t small { font-size: 11px; }
.mapcta.ilcechip .mc-t b { font-size: 15px; }
/* telefonda harita ekranın yarısını geçmesin: sayfa haritanın üstünden/altından kaydırılabilsin */
.mapwrap.real:not(.big) { aspect-ratio: auto; height: min(52vh, 460px); height: min(52dvh, 460px); }
/* denge: yetişme bonusu ve güçlü avı */
.catchup { display: inline-block; margin: 4px 0; padding: 3px 10px; border: 2px solid #111; border-radius: 99px; background: var(--lime); color: #111; font: 800 11.5px var(--sans); box-shadow: 2px 2px 0 #111; }
.underdog { display: inline-block; margin: 6px auto 0; padding: 4px 12px; background: var(--sun); color: #111; border: 3px solid #111; border-radius: 12px; font: 14px var(--display); box-shadow: 3px 3px 0 #111; transform: rotate(-2deg); }
/* profil, ödül koy vb. pencereler (eski "ov-card intro" sınıfı) açık temada */
.ov-card.intro { background: var(--ink) !important; color: #111; border: 3px solid #111; box-shadow: var(--shadow); }
.ov-card.intro .ov-title, .profhead .ov-title { color: #111; text-shadow: none; }
.ov-card.intro .muted, .profhead .muted { color: #555; }
.ov-card.intro label { color: #111; font-weight: 700; }
.profhead .face { width: 72px; height: 72px; flex: none; }
.ov-card .stats b { color: #111; }

/* ---------- okunurluk düzeltmeleri (kontrast taraması) ---------- */
/* alt sayfalar (iş, ilçe, mahalle, iller, görevler, eşya) */
.sh-panel { background: var(--ink) !important; border: 3px solid #111 !important; border-bottom: 0 !important; box-shadow: 0 -6px 0 rgba(0, 0, 0, .12) !important; color: #111; }
.sh-grab i { background: #111; opacity: .35; }
.sh-title h2, .dhero h2, .sq-title { color: #111; }
.sh-title p, .dhero p, .sq-title small { color: #555; }
.dhero-ic { background: var(--sun) !important; border: 3px solid #111 !important; color: #111 !important; box-shadow: 3px 3px 0 #111; }
.empty, .empty span { color: #555; }
.empty b { color: #111; }
.hint { color: #555; }
.ilrow { color: #111; }
.ilrow b { color: #111; }
.ilrow .ir-n { color: #555; }
.ilrow small { color: #555; }
.mahlead b, .mahlead span { color: #111; }
.mahlead small { color: #555; }
.mahlead.buy { background: var(--mint) !important; }
.do-t { color: #111; }
/* iş kartları ve ustalık */
.job, .job h3 { color: #111; }
.job small, .job .muted { color: #555; }
/* kavga ekranı küçük yazılar */
.vs-rew .red-t { background: #111 !important; color: #fff !important; }
.vs p.gold-t, .vs .gold-t.small { color: #111 !important; background: var(--sun); display: inline-block; padding: 2px 10px; border: 2px solid #111; border-radius: 10px; }
.vs .muted, .vs p.small { color: #fff; text-shadow: 1px 1px 0 #111; }
/* profil altı */
.credits, .credits a { color: #333 !important; }
.credits a { text-decoration: underline; }
.link.danger { color: #b0122f !important; font-weight: 800; }
.news li { color: #111; }
.news li.good { color: #0d6b2f; }
.news li.bad { color: #b0122f; }
.ilrow small, .ilrow .here { color: #444 !important; }
.ilrow.won small { color: #0d6b2f !important; }
/* Hesap sorulacaklar */
.revbox { background: #ffe3ee; border: 3px solid #111; box-shadow: var(--hard); }
.revbox.in-ov { background: #fff; border-radius: 16px; padding: 4px 12px; }
.rev-row { border-top-color: rgba(0,0,0,.12); }
.rev-main b { color: #111; }
.rev-main small, .revbox .muted { color: #444; }
/* Adam adayları */
.cands .cand { border-top-color: rgba(0,0,0,.12); }
.cand-e { background: var(--sun); border: 2px solid #111; }
.cand-main b { color: #111; }
.cand-main small, .sumchips small { color: #444; }
.rtag { background: var(--blue); border: 2px solid #111; }
.cand.rar-e .rtag { background: var(--pink); }
.cand.rar-u .cand-e { background: #b9c6ff; box-shadow: 3px 3px 0 #111; }
.cand.rar-e .cand-e { background: var(--pink); box-shadow: 3px 3px 0 #111; }
.sumchips span { background: #fff; border: 2px solid #111; color: #111; }
.card.recruit.cands { display: block !important; }
.cands .ch { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* Gazete + yolculuk */
.gz-head { border-bottom: 4px double #111; }
.gz-head h2 { font-family: var(--display); font-size: 30px; }
.gz-head small, .gz-head p { color: #444; }
.gz-item { border-bottom: 2px solid #111; }
.gz-item.top { border-bottom: 4px double #111; }
.gz-ic { background: var(--sun); border: 2px solid #111; color: #111; box-shadow: 2px 2px 0 #111; }
.gz-item.k-win .gz-ic, .gz-item.k-loss .gz-ic { background: var(--pink); color: #fff; }
.gz-item.k-revenge .gz-ic { background: #ff9f43; }
.gz-item.k-lvl .gz-ic { background: var(--lime); }
.gz-item.k-crew .gz-ic { background: var(--mint); }
.gz-tag { color: #c2410c; }
.gz-meta, .gz-meta a { color: #444; }
.marchbox { background: #e4f0ff; border: 3px solid #111; box-shadow: var(--hard); }
.mb-bar { background: #fff; border: 2px solid #111; }
.mb-bar i { background: var(--lime); }

.marchmap { background: #fff; border: 3px solid #111; }
.mm-dots circle { fill: #111; opacity: .28; }
.mm-route { stroke: #111; opacity: .7; }
.mm-done { stroke: var(--pink); stroke-width: 3.2; }
.mm-from { fill: var(--lime); stroke: #111; } .mm-to { fill: var(--pink); stroke: #111; }
.mm-lab { fill: #111; stroke: #fff; }

/* Sefer hazırlığı */
.so-row, .so-vrow { background: #fff; border: 2px solid #111; }
.so-row.on, .so-vrow.on { background: var(--sun); }
.so-ck { border: 2px solid #111; background: #fff; }
.so-row.on .so-ck { background: #111; color: #fff; border-color: #111; }
.so-step button { background: #fff; border: 2px solid #111; }
.so-sum { background: #fff7ea; border: 3px solid #111; box-shadow: 3px 3px 0 #111; }
.so-warn { color: #d61f45; }
.so-row small, .so-vm small, .so-h small, .so-eta small { color: #444; }

/* ---------- Yer seçici (il/ilçe/mahalle) – açık kağıt zemin, koyu yazı ---------- */
.picker { background: var(--ink); border: 3px solid #111; box-shadow: var(--shadow); color: #111; }
.pk-head .ov-title { background: none; -webkit-text-fill-color: #111; color: #111; text-shadow: none; }
.pk-head .x, .picker .x { background: #fff; border: 2px solid #111; color: #111; }
.crumb { background: #fff; border: 2px solid #111; }
.crumb small, .crumb b { color: #5d5a55; }
.crumb.done b { color: #111; }
.crumb.on { background: #ffd93d; box-shadow: 2px 2px 0 #111; }
.crumb.on b, .crumb.on small { color: #111; }
.pk-search { background: #fff; border: 2px solid #111; }
.pk-search .ic { color: #111; }
.pk-search input { color: #111; }
.pk-item { color: #111; border-bottom: 2px solid rgba(17, 17, 17, .15); }
.pk-item:hover, .pk-item:focus-visible { background: #ffd93d; }
.pk-item .chev { color: #111; }
.pk-loading { color: #5d5a55; }
.cityhead h2 { overflow-wrap: normal; }
@media (max-width: 430px) { .cityhead > div:first-child { flex-basis: 100%; } }

/* ---------- Giriş ekranı: koyu gece zemini, açık yazı ---------- */
.intro:not(.ov-card) input, .intro:not(.ov-card) .field input { color: #f4ecdf; -webkit-text-fill-color: #f4ecdf; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); }
.intro:not(.ov-card) input::placeholder { color: rgba(244, 236, 223, .55); -webkit-text-fill-color: rgba(244, 236, 223, .55); }
.intro:not(.ov-card) label, .intro:not(.ov-card) .muted, .intro:not(.ov-card) small { color: rgba(244, 236, 223, .85); }
.intro:not(.ov-card) .moon { top: 8%; right: 28%; width: 56px; height: 56px; }

/* ---------- İlerleme çubukları ve tamamlandı tikleri ---------- */
.bar { border-width: 2px; }
.bar.thin { height: 10px; border-width: 2px; background: #fff; }
.bar.thin i, .bar.gold i { background: var(--sun); }
.dmastery .bar { height: 12px; background: #fff; }
.jm small { color: #111; font-weight: 800; width: 34px; }
.jm small .ic { color: var(--green); font-size: 18px; }
.sday .tick, .okmark { background: var(--green); color: #fff; border: 2px solid #111; }
.sday .tick .ic, .okmark .ic { color: #fff; }
.chip.ok { color: var(--green); background: #e6f7ea; border-color: var(--green); }
.chip.no { color: #b42318; background: #fdecea; border-color: #b42318; }
.chip.ok .ic, .chip.no .ic { color: inherit; }
.inbox-list li { border: 2px solid #111; background: #fff; color: #111; }
.inbox-list li.new { background: #ffd93d; }
.inbox-list li .ic { color: #111; }
.rfbtn { background: #fff; border: 2px solid #111; box-shadow: 2px 2px 0 #111; color: #111; }
.goalbar { background: #fffbe0; border: 2px solid #111; color: #111; box-shadow: 2px 2px 0 #111; }
.burnbox { border: 2px solid #111; background: #ffe3df; color: #111; }
.citymap.real .mah.burned, .citymap.real .realmahs .mah.burned { fill: #111 !important; stroke: #c8261b; stroke-width: 1.6; }
.goalbar.season { background: #e7f6ff; }
.pushrow { border-bottom: 2px solid #111; }
.backgift { border: 3px solid #111; background: #ffd93d; box-shadow: 3px 3px 0 #111; color: #111; }
.backgift .gold-t { color: #111; }
.opbtn { background: #fff; border: 2px solid #111; box-shadow: 2px 2px 0 #111; color: #111; }
.ticker { background: #fffbe0; border: 2px solid #111; color: #111; }

/* ---------- Okunabilirlik toparlaması: pembe zeminde beyaz yazı yeterli kontrast vermiyordu (~3:1) ---------- */
.btn.red { color: #111; text-shadow: none; }
.pillbadge, .pc-emb span, .bagitem .cnt, .prop .cnt { color: #111 !important; text-shadow: none; }
.threat.hard { color: #b45309; }
.threat.hard .pips i.on { background: #b45309; }
.threat.even { color: #7a5a00; }

.nb { color: #111 !important; }
.cult { background: #fff; border: 2px solid #111; color: #111; box-shadow: 2px 2px 0 #111; }
.cult.on { background: var(--sun); }
.ilwar-list li { background: #fff; border: 2px solid #111; box-shadow: 2px 2px 0 #111; color: #111; }
.ilwar-list li.me { background: var(--sun); }
.lb-f { background: var(--sun); border: 2px solid #111; }
.member .mlv, .ah-lv { background: var(--sun); color: #111; border: 2px solid #111; }
.bagitem .cond { background: var(--sun); color: #111; border: 2px solid #111; }
.bagitem .cond.bad { background: var(--pink); color: #111; }
.repairbar { background: #fffbe0; border: 2px solid #111; color: #111; }

/* ---------- Giriş ekranı: sokak/graffiti (Streets ve Klasik; Yeşilçam kendi afişini kullanır) ---------- */
html:not(.yesilcam) .intro:not(.ov-card) {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 79, 163, .45) 0, transparent 38%),
    radial-gradient(circle at 92% 30%, rgba(198, 255, 61, .30) 0, transparent 34%),
    radial-gradient(circle at 50% 95%, rgba(77, 107, 255, .35) 0, transparent 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 14px),
    #0d0b10;
}
html:not(.yesilcam) .intro:not(.ov-card)::before {
  content: ''; position: absolute; left: -10%; right: -10%; top: 3%; height: 22px; transform: rotate(-4deg);
  background: repeating-linear-gradient(90deg, #ffd93d 0 22px, #111 22px 44px); border-block: 3px solid #111; opacity: .95;
}
html:not(.yesilcam) .intro:not(.ov-card)::after {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: 13%; height: 16px; transform: rotate(3deg);
  background: repeating-linear-gradient(90deg, #ff4fa3 0 22px, #111 22px 44px); border-block: 3px solid #111; opacity: .9;
}
html:not(.yesilcam) .intro:not(.ov-card) .moon {
  top: 11%; width: 52px; height: 52px;
  background: radial-gradient(circle at 40% 35%, #fff, #ff4fa3 72%); box-shadow: 0 0 60px rgba(255, 79, 163, .75), 0 0 0 4px #111; opacity: 1;
}
html:not(.yesilcam) .intro:not(.ov-card) .skyline .win:nth-child(3n) { fill: #c6ff3d; }
html:not(.yesilcam) .intro:not(.ov-card) .skyline .win:nth-child(3n+1) { fill: #ff4fa3; }
html:not(.yesilcam) .intro-logo { transform: rotate(-4deg); margin-top: -4vh; }
html:not(.yesilcam) .intro-logo span {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-stroke: 3px #111; paint-order: stroke fill; filter: none;
  color: var(--lime); text-shadow: 4px 4px 0 #111, 7px 7px 0 var(--pink); letter-spacing: 2px;
}
html:not(.yesilcam) .intro-logo span + span { color: var(--sun); font-size: 68px; letter-spacing: 4px; margin-top: -.12em; text-shadow: 4px 4px 0 #111, 8px 8px 0 #4d6bff; }
html:not(.yesilcam) .intro-logo::after {
  content: 'KİM BU MAHALLENİN ABİSİ?'; margin-top: 14px; padding: 4px 12px; background: #fff; color: #111; border: 3px solid #111; box-shadow: 3px 3px 0 var(--pink);
  font: 13px var(--display); letter-spacing: .6px; transform: rotate(3deg);
}
html:not(.yesilcam) .intro-form { margin-top: 36px; }
html:not(.yesilcam) .intro:not(.ov-card) label { color: #fff; font-family: var(--display); letter-spacing: .6px; }
html:not(.yesilcam) .intro:not(.ov-card) input { color: #111; -webkit-text-fill-color: #111; background: #fff; border: 3px solid #111; box-shadow: 4px 4px 0 var(--lime); border-radius: 12px; }
html:not(.yesilcam) .intro:not(.ov-card) .btn.gold { background: var(--lime); color: #111; border: 3px solid #111; box-shadow: 5px 5px 0 var(--pink); font-family: var(--display); font-size: 20px; letter-spacing: .5px; text-transform: uppercase; padding: 14px 16px; animation: introPulse 2s ease-in-out infinite; }
@keyframes introPulse { 50% { transform: translate(-1px, -1px) scale(1.02); } }
@media (max-width: 380px) { html:not(.yesilcam) .intro-logo span { font-size: 52px; } html:not(.yesilcam) .intro-logo span + span { font-size: 56px; } }

/* ---------- Güç kartı: poster ---------- */
html:not(.klasik) .powercard { position: relative; overflow: hidden; background: #fff; border: 3px solid #111; box-shadow: 6px 6px 0 #111; }
html:not(.klasik) .powercard::before { content: ''; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; background: var(--pink); border: 3px solid #111; border-radius: 50%; opacity: .9; }
html:not(.klasik) .powercard > * { position: relative; }
html:not(.klasik) .powercard .eyebrow { background: #111; color: var(--lime); transform: rotate(-4deg); border-color: #111; }
html:not(.klasik) .powercard .pw-num { font: 56px/1 var(--display); color: var(--sun); -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 4px 4px 0 #111; transform: rotate(-2deg); transform-origin: left; }
html:not(.klasik) .powercard .pw-bar { height: 16px; border-width: 3px; background: #fff; }
html:not(.klasik) .dchip { box-shadow: 2px 2px 0 #111; border-width: 2px; background: #fff; }
html:not(.klasik) .dchip.hard { background: #ffe1e6; }
html:not(.klasik) .dchip.easy { background: #dcffe9; }
html:not(.klasik) .dchip.even { background: #fff4c7; }
/* Rakip kartı: saldır düğmesi daha çarpıcı */
html:not(.klasik) .rival .btn.atk { box-shadow: 4px 4px 0 #111; transform: rotate(-1.5deg); }
html:not(.klasik) .rival.foe { border-color: var(--red2); box-shadow: 5px 5px 0 var(--red2); }