/* Layout: tek ekranlık oyun — başlık, mod çubuğu, bilgi satırı, esnek tahta sahnesi, altta klavye.
   Renkler wordle500 tarzı: kömür zemin, yeşil = doğru yer, sarı = başka yer, kırmızı = yok; kabartma tuşlar. */
:root{
  --bg:#F4F4F5; --surface:#FFFFFF; --raise:#FFFFFF; --ink:#18181B; --muted:#6B6B73; --line:#D4D4D8;
  --accent:#5BA35B; --accent-ink:#FFFFFF;
  --ok:#5BA35B; --near:#D1B43F; --miss:#D9534F; --danger:#C9302C;
  --key:#E4E4E7; --key-top:#E6E8EB; --key-bot:#CFD3D8; --key-sh:#A9AEB5; --key-ink:#18181B;
  --tile:#E4E4E7; --tile-border:#D4D4D8; --tile-typed:#D4D4D8; --tile-filled:#9A9AA2; --bar:#9A9AA2;
  --glow1:rgba(91,163,91,.10); --glow2:rgba(168,85,247,.08);
  --overlay:rgba(9,9,11,.5); --shadow:0 10px 40px rgba(0,0,0,.18);
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121213; --surface:#1E1E20; --raise:#3A3A3D; --ink:#F1F1F1; --muted:#9A9AA0; --line:#333336;
    --key:#2B2B2E; --key-top:#6B6D70; --key-bot:#4A4B4E; --key-sh:#2A2B2D; --key-ink:#FFFFFF;
    --tile:#2B2B2E; --tile-border:#333336; --tile-typed:#3A3A3D; --tile-filled:#5C5C61; --bar:#3A3A3D;
    --glow1:rgba(91,163,91,.10); --glow2:rgba(168,85,247,.10);
    --overlay:rgba(0,0,0,.66); --shadow:0 10px 40px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121213; --surface:#1E1E20; --raise:#3A3A3D; --ink:#F1F1F1; --muted:#9A9AA0; --line:#333336;
  --key:#2B2B2E; --key-top:#6B6D70; --key-bot:#4A4B4E; --key-sh:#2A2B2D; --key-ink:#FFFFFF;
  --tile:#2B2B2E; --tile-border:#333336; --tile-typed:#3A3A3D; --tile-filled:#5C5C61; --bar:#3A3A3D;
  --glow1:rgba(91,163,91,.10); --glow2:rgba(168,85,247,.10);
  --overlay:rgba(0,0,0,.66); --shadow:0 10px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* Yüksek kontrast: turuncu, mavi ve gri (kırmızı-yeşil ayrımına dayanmaz) */
:root[data-cb="1"]{ --ok:#F5793A; --near:#85C0F9; --miss:#6D6D72; }

*{box-sizing:border-box}
html{height:100%}
body{height:100%;margin:0;background:var(--bg);background-image:radial-gradient(800px 600px at 10% 0%,var(--glow1),transparent 70%),radial-gradient(800px 600px at 90% 100%,var(--glow2),transparent 70%);background-attachment:fixed;color:var(--ink);font:400 15px/1.45 var(--f-body);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
[hidden]{display:none!important}

#app{height:100%;max-width:760px;margin:0 auto;padding-inline:16px;display:flex;flex-direction:column}

/* Başlık */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px 8px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brandlogo{width:34px;height:34px;flex:none;border-radius:8px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.brand h1{font:800 1.55rem/1 var(--f-display);letter-spacing:-.025em;margin:0}
.brand small{display:block;font:600 .64rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.actions{display:flex;gap:2px}
.ib{width:40px;height:40px;border-radius:10px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.ib:hover{background:var(--key)}
.ib svg{width:22px;height:22px}

/* Mod çubuğu */
.modes{display:flex;gap:2px;background:var(--key);padding:3px;border-radius:12px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.modes::-webkit-scrollbar{display:none}
.modes button{flex:1 0 auto;border:0;background:transparent;padding:8px 10px;border-radius:9px;font-weight:600;font-size:.86rem;white-space:nowrap;cursor:pointer;color:var(--muted)}
.modes button:hover{color:var(--ink)}
.modes button[aria-selected="true"]{background:var(--raise);color:var(--ink);box-shadow:0 1px 3px rgba(10,15,30,.16)}
.modes .s{display:none}
@media (max-width:480px){ .modes .l{display:none} .modes .s{display:inline} .modes button{padding:8px 6px;font-size:.82rem} }

/* Bilgi satırı */
.info{display:flex;align-items:center;gap:8px;min-height:46px;padding-block:6px}
.info .l{flex:1 1 auto;min-width:0}
#infoLabel{font:800 1.02rem/1.15 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#infoSub{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#infoSub .clock{font:700 .95rem var(--f-mono);color:var(--ink)}
#infoSub .clock.low{color:var(--danger);animation:pulse 1s infinite}
.badge{font:700 .6rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:var(--near);color:#fff;margin-left:6px;vertical-align:2px}
.lens{display:flex;gap:2px;background:var(--key);padding:3px;border-radius:10px;flex:none}
.lens button{border:0;background:transparent;width:30px;height:30px;border-radius:7px;font:700 .86rem var(--f-mono);cursor:pointer;color:var(--muted)}
.lens button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:999px;height:36px;padding:0 12px;font-weight:700;font-size:.82rem;cursor:pointer;flex:none;white-space:nowrap}
.pill:hover:not(:disabled){border-color:var(--muted)}
.pill:disabled{opacity:.4;cursor:default}
.pill svg{width:17px;height:17px}
.pill.icon{width:36px;padding:0;justify-content:center}
.pill.armed{background:var(--danger);border-color:var(--danger);color:#fff}

/* Sahne ve tahtalar */
#stage{flex:1 1 0;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden}
.boards{display:grid;justify-content:center;align-content:center;perspective:900px}
.board{display:grid;gap:var(--g);transition:opacity .4s}
.board.done{opacity:.5}
.row{display:grid;grid-template-columns:repeat(var(--len),var(--t));gap:var(--g)}
.tile{width:var(--t);height:var(--t);border:2px solid var(--tile-border);border-radius:calc(var(--t)*.14);display:grid;place-items:center;font:800 calc(var(--t)*.5)/1 var(--f-display);color:var(--ink);user-select:none;background:var(--tile)}
.boards.b4 .tile, .boards.b2 .tile{border-width:1.5px}
.tile[data-s="t"]{background:var(--tile-typed);border-color:var(--tile-filled);animation:pop .11s ease-out}
.tile[data-s="c"]{background:var(--ok);border-color:var(--ok);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.tile[data-s="p"]{background:var(--near);border-color:var(--near);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}
.tile[data-s="a"]{background:var(--miss);border-color:var(--miss);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.tile.ghost{color:var(--ok);opacity:.5}
.tile.flip{animation:flip var(--fd,480ms) ease-in-out both}
.tile.win{animation:bounce .7s ease both}
.row.shake{animation:shake .42s}

/* Süreli mod girişi */
#intro{position:absolute;inset:0;display:grid;place-items:center;padding:16px;z-index:5}
.intro-card{max-width:380px;text-align:center;display:grid;gap:14px;justify-items:center}
.intro-card h2{font:800 2rem/1 var(--f-display);margin:0;letter-spacing:-.02em}
.intro-card p{margin:0;color:var(--muted)}
.big-clock{font:700 3.6rem/1 var(--f-mono);letter-spacing:-.04em;color:var(--accent)}
.intro-card .rules{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{font-size:.78rem;font-weight:600;background:var(--key);border-radius:999px;padding:5px 10px}

/* Bildirimler */
#toasts{position:absolute;top:6px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:20}
.toast{background:var(--ink);color:var(--bg);font-weight:700;padding:9px 15px;border-radius:10px;font-size:.9rem;animation:tin .18s ease-out;max-width:92%;text-align:center;box-shadow:var(--shadow)}
.toast.ach{background:var(--accent);color:var(--accent-ink)}
.toast.out{opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}

/* Klavye */
.kb{display:flex;flex-direction:column;gap:7px;padding-block:8px 14px;user-select:none;touch-action:manipulation}
.kr{display:flex;gap:5px;justify-content:center}
.key{flex:1 1 0;min-width:0;max-width:52px;height:var(--kh,56px);border:0;border-radius:9px;background:linear-gradient(180deg,var(--key-top),var(--key-bot));box-shadow:0 3px 0 var(--key-sh),0 4px 6px rgba(0,0,0,.18);color:var(--key-ink);font:800 1.08rem/1 var(--f-display);position:relative;cursor:pointer;padding:0;display:grid;place-items:center;overflow:hidden;transition:color .25s,transform .07s,box-shadow .07s}
.key.wide{flex:1.55 1 0;max-width:80px;font:700 .74rem/1 var(--f-body);letter-spacing:.06em}
.key svg{width:22px;height:22px}
.key:active,.key.pressed{transform:translateY(2px);box-shadow:0 1px 0 var(--key-sh),0 1px 2px rgba(0,0,0,.18)}
.key[data-k="enter"]{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 85%,#fff),var(--accent));box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000),0 4px 6px rgba(0,0,0,.18);color:#fff}
.key > span{position:relative;z-index:1}
.key[data-s="c"]{background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 88%,#fff),var(--ok));box-shadow:0 3px 0 color-mix(in srgb,var(--ok) 55%,#000),0 4px 6px rgba(0,0,0,.18);color:#fff}
.key[data-s="p"]{background:linear-gradient(180deg,color-mix(in srgb,var(--near) 88%,#fff),var(--near));box-shadow:0 3px 0 color-mix(in srgb,var(--near) 55%,#000),0 4px 6px rgba(0,0,0,.18);color:#fff}
.key[data-s="a"]{background:linear-gradient(180deg,color-mix(in srgb,var(--miss) 88%,#fff),var(--miss));box-shadow:0 3px 0 color-mix(in srgb,var(--miss) 55%,#000),0 4px 6px rgba(0,0,0,.18);color:#fff;opacity:.8}
.kq{position:absolute;inset:0;display:grid;z-index:0;border-radius:inherit;overflow:hidden}
.kq.b2{grid-template-columns:1fr 1fr}
.kq.b4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.kq i[data-s="c"]{background:var(--ok)}
.kq i[data-s="p"]{background:var(--near)}
.key.mq{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
@media (max-height:760px){ :root{--kh:50px} }
@media (max-height:640px){ :root{--kh:44px} .top{padding-block:6px 6px} .brand small{display:none} }

/* Pencereler */
#modal{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;padding:16px;z-index:50}
.sheet{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:18px;width:min(470px,100%);max-height:100%;overflow:auto;box-shadow:var(--shadow);padding:22px 20px 22px;position:relative;transform:translateY(14px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease}
#modal.show .sheet{transform:none;opacity:1}
.sheet h2{font:800 1.4rem/1.1 var(--f-display);margin:0 44px 14px 0;text-wrap:balance;letter-spacing:-.015em}
.sheet h3{font:700 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:20px 0 10px}
.sheet p{margin:0 0 10px}
#mClose{position:absolute;top:12px;right:12px}
.lede{color:var(--muted)}

.mini{display:inline-flex;gap:4px}
.mini span{width:34px;height:34px;display:grid;place-items:center;border-radius:6px;font:800 1.05rem var(--f-display);border:2px solid var(--tile-border);background:var(--tile);color:var(--ink)}
.mini span[data-s="x"]{background:var(--tile-typed);border-color:var(--tile-filled)}
.mini span[data-s="c"]{background:var(--ok);border-color:var(--ok);color:#fff}
.mini span[data-s="p"]{background:var(--near);border-color:var(--near);color:#fff}
.mini span[data-s="a"]{background:var(--miss);border-color:var(--miss);color:#fff}
.ex{display:grid;gap:4px;margin-bottom:12px}
.ex p{font-size:.88rem;margin:0}
.answers{display:grid;gap:8px;margin-bottom:6px}
.ans{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ans a{font-size:.82rem;font-weight:600}

.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.nums b{display:block;font:800 1.8rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.nums span{font-size:.72rem;color:var(--muted);line-height:1.15;display:block}
.dist{display:grid;gap:4px}
.bar{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:center;font:700 .8rem var(--f-mono)}
.bar i{display:block;font-style:normal;background:var(--bar);color:#fff;text-align:right;padding:2px 7px;border-radius:4px;min-width:fit-content;transition:width .6s ease}
.bar.hl i{background:var(--ok)}

.btns{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.btn{flex:1 1 140px;border:0;border-radius:12px;padding:13px 16px;font-weight:700;cursor:pointer;background:var(--key);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.pri{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent));color:var(--accent-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.btn.pri:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.btn svg{width:18px;height:18px}
.btn:hover{filter:brightness(1.06)}
.cd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--key)}
.cd b{font:700 1.4rem var(--f-mono);font-variant-numeric:tabular-nums}
.cd span{font-size:.82rem;color:var(--muted)}
textarea.share{width:100%;min-height:150px;margin-top:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 .85rem var(--f-mono);padding:10px}

.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row div{min-width:0}
.set-row strong{font-weight:700}
.set-row p{margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.sw{width:46px;height:28px;border-radius:999px;border:0;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw[aria-checked="true"]{background:var(--ok)}
.sw[aria-checked="true"]::after{transform:translateX(18px)}
.seg{display:inline-flex;background:var(--key);padding:3px;border-radius:10px;gap:2px;flex:none;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 10px;border-radius:7px;font-weight:600;font-size:.82rem;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--ink);box-shadow:0 1px 3px rgba(10,15,30,.16)}
.danger{border:1px solid var(--danger);color:var(--danger);background:transparent;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer}
.danger.armed{background:var(--danger);color:#fff}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.ach>div{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:3px;align-content:start}
.ach>div.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.ach b{font:700 .9rem/1.2 var(--f-display)}
.ach span{font-size:.74rem;color:var(--muted);line-height:1.25}
.ach>div:not(.on) b{color:var(--muted)}
.ach svg{width:20px;height:20px}
.ach .on svg{color:var(--ok)}
.ach>div:not(.on) svg{color:var(--line)}
.hist{list-style:none;margin:0;padding:0;display:grid}
.hist li{display:flex;justify-content:space-between;gap:10px;padding-block:8px;border-bottom:1px solid var(--line);font-size:.86rem}
.hist li:last-child{border-bottom:0}
.hist .w{font:700 .9rem var(--f-display);letter-spacing:.04em;min-width:0;overflow-wrap:anywhere}
.hist .r{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.hist .r b{color:var(--ok)}
.hist .r b.x{color:var(--danger)}
.found{display:flex;flex-wrap:wrap;gap:6px}
.found span{font:700 .82rem var(--f-display);letter-spacing:.04em;padding:5px 9px;border-radius:7px;background:var(--ok);color:#fff}
.found span.m{background:var(--miss)}
.score-big{font:800 3.2rem/1 var(--f-display);color:var(--accent);font-variant-numeric:tabular-nums}
dl.modes-help{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:.88rem}
dl.modes-help dt{font-weight:700}
dl.modes-help dd{margin:0;color:var(--muted)}
kbd{font:600 .78rem var(--f-mono);background:var(--key);border-radius:5px;padding:2px 6px}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

@keyframes pop{0%{transform:scale(.86)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-32%)}50%{transform:translateY(4%)}62%{transform:translateY(-12%)}80%{transform:translateY(2%)}100%{transform:translateY(0)}}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* ---------- Çevrim içi ---------- */
.live{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;margin-right:4px;border-radius:999px;border:0;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);font:700 .7rem/1 var(--f-body);letter-spacing:.1em;cursor:pointer}
.live b{font:700 .8rem var(--f-mono);letter-spacing:0;color:var(--ink)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:beat 1.8s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:420px){ .brand small{display:none} .brand h1{font-size:1.3rem} .live{padding:0 8px;letter-spacing:.04em} }
.modes .duel-tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}

#intro.scroll{overflow:auto;place-items:start center;padding-block:12px 20px;grid-template-columns:minmax(0,1fr)}
.lobby{width:100%;max-width:460px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.lobby h2{font:800 1.6rem/1.1 var(--f-display);margin:0 0 6px;letter-spacing:-.02em}
.lobby h3{font:700 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.lobby p{margin:0}
.lede.small{font-size:.8rem}
.namebox label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.row-in{display:flex;gap:8px}
.row-in input{flex:1 1 auto;min-width:0;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 1rem var(--f-body);padding:0 12px}
.row-in input:focus{outline:2.5px solid var(--accent);outline-offset:1px}
.btn.big{width:100%;padding:16px;font-size:1.02rem}
.qwait{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1.5px dashed var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.qwait div{flex:1;min-width:0}
.qwait p{font-size:.8rem;color:var(--muted)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.plist li.empty{display:block;font-size:.84rem;color:var(--muted);background:transparent;border-style:dashed}
.plist .pn{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .ps{font-size:.76rem;color:var(--muted)}
.plist .pill{height:30px;padding:0 10px}
.hist small{font:500 .78rem var(--f-body);color:var(--muted);letter-spacing:0}
.hist .r b.d{color:var(--muted)}

.lg{display:inline-block;width:12px;height:12px;border-radius:3px;transform:rotate(45deg);flex:none;background:#A8693A}

.opp{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);margin-bottom:4px}
.opp .who{display:grid;gap:1px;min-width:0}
.opp .who b{font:800 1rem/1.15 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp .st{font-size:.76rem;color:var(--muted)}
.eyebrow{font:700 .62rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ogrid{display:grid;gap:2px;flex:none}
.orow{display:flex;gap:2px}
.orow i{width:9px;height:9px;border-radius:2px;background:var(--tile-typed)}
.orow i[data-s="c"]{background:var(--ok)}.orow i[data-s="p"]{background:var(--near)}.orow i[data-s="a"]{background:var(--miss)}

.pts{display:inline-block;margin-top:12px;font:800 1rem var(--f-display);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:6px 12px;border-radius:999px}
.ogs{display:grid;gap:4px}
.mini.sm span{width:26px;height:26px;font-size:.82rem;border-radius:5px}

.league-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border-radius:16px;color:#fff;background:#A8693A}
.league-card div{display:grid;gap:3px}
.league-card b{font:800 1.7rem/1 var(--f-display)}
.league-card .eyebrow{color:rgba(255,255,255,.8)}
.league-card span{font-size:.84rem}
.league-card .lc-r{text-align:right;justify-items:end}
.league-card .lc-r b{font-size:1.4rem}
.ranks{list-style:none;margin:10px 0 0;padding:0;display:grid}
.ranks li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line)}
.ranks li:last-child{border-bottom:0}
.ranks li.me{background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:8px}
.ranks li.empty{color:var(--muted);font-size:.86rem}
.ranks .rk{width:24px;font:700 .86rem var(--f-mono);color:var(--muted);text-align:right}
.ranks .pn{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranks b{font:700 .95rem var(--f-mono)}
.nums.three{grid-template-columns:repeat(3,1fr)}
.pts-help{margin:0;padding-left:18px;font-size:.84rem;color:var(--muted);display:grid;gap:3px}
.tiers{display:flex;flex-wrap:wrap;gap:12px;font-size:.84rem;font-weight:600}
.tiers span{display:inline-flex;align-items:center;gap:7px}
.tiers small{color:var(--muted);font-weight:500}

/* Özel oda */
.room{display:grid;gap:10px;padding:14px;border-radius:14px;border:1.5px dashed var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.room-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.room-top div{display:grid;gap:4px}
.room .code{font:700 2.2rem/1 var(--f-mono);letter-spacing:.18em;color:var(--accent)}
.room .row-in .btn{flex:1 1 auto;padding:11px 12px}
.room-ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.room-ctl .btn{padding:0 12px;height:40px}
.room-ctl input{text-transform:uppercase;letter-spacing:.14em;font-family:var(--f-mono)}
@media (max-width:420px){ .room-ctl{grid-template-columns:minmax(0,1fr)} }

/* Düello tepkileri */
.opp{position:relative}
.opp .who{flex:1 1 auto}
.emo{position:relative;flex:none}
.emo-b{width:36px;height:36px}
.emo-pop{position:absolute;top:calc(100% + 6px);right:0;display:flex;gap:2px;padding:5px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);z-index:30}
.emo-pop button{width:38px;height:38px;border:0;border-radius:9px;background:transparent;font-size:1.35rem;cursor:pointer;line-height:1}
.emo-pop button:hover{background:var(--key)}
.bub{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:25}
.bub span{position:absolute;left:-20px;top:-22px;width:40px;text-align:center;font-size:2.1rem;line-height:44px;animation:emo 2.2s ease-out forwards}
@keyframes emo{0%{opacity:0;transform:translateY(10px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1.15)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}

/* =====================================================================
   İlerleme, ekonomi, turnuva ve sezonlu lig
   ===================================================================== */

/* Lig kademe renkleri (8 grup) */
.lg-bronz{background:#B87333}.lg-gumus{background:#9AA4B5}.lg-altin{background:#D9A520}.lg-platin{background:#3FB8A8}
.lg-elmas{background:#3D9BE0}.lg-usta{background:#8E5BE0}.lg-buyuk{background:#E0476A}.lg-sampiyon{background:linear-gradient(135deg,#FFD24A,#FF6A3D,#C04BE0)}
.lgc-bronz{background:linear-gradient(135deg,#B87333,#8A5222)}.lgc-gumus{background:linear-gradient(135deg,#8E99AE,#5F6A80)}
.lgc-altin{background:linear-gradient(135deg,#D9A520,#9C7408)}.lgc-platin{background:linear-gradient(135deg,#3FB8A8,#1D7C70)}
.lgc-elmas{background:linear-gradient(135deg,#3D9BE0,#1E5FA8)}.lgc-usta{background:linear-gradient(135deg,#8E5BE0,#5A2FA8)}
.lgc-buyuk{background:linear-gradient(135deg,#E0476A,#9C1F44)}.lgc-sampiyon{background:linear-gradient(135deg,#F2B523,#E0476A 55%,#8E3BD6)}

/* Bildirim türleri */
.toast.xp{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.toast.lvl{background:linear-gradient(135deg,#F2B523,#E07A1F);color:#1a1205}
.toast.warn{background:#E07A1F;color:#fff}

/* Avatar ve çerçeveler */
.av{--s:36px;width:var(--s);height:var(--s);border-radius:50%;padding:2px;display:inline-grid;flex:none;background:var(--line)}
.av>span{border-radius:50%;background:var(--raise);display:grid;place-items:center;font-size:calc(var(--s)*.52);line-height:1;width:100%;height:100%}
.av.sm{--s:28px}.av.lg{--s:68px;padding:3px}
.av>span{overflow:hidden}.av>span>img{width:100%;height:100%;object-fit:cover;display:block}
.photorow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.photoup{cursor:pointer}
.fr-yok{background:transparent;padding:0}
.fr-bronz{background:linear-gradient(135deg,#E3A06A,#8A5222)}
.fr-gumus{background:linear-gradient(135deg,#F2F5FA,#7F8AA0)}
.fr-altin{background:linear-gradient(135deg,#FFE27A,#C99A12);box-shadow:0 0 8px rgba(232,185,35,.45)}
.fr-neon{background:conic-gradient(#39FF88,#00F0FF,#FF3CAC,#39FF88);box-shadow:0 0 10px rgba(0,240,255,.55)}
.fr-ates{background:conic-gradient(#FF3D00,#FFC23D,#FF7A1A,#FF3D00);box-shadow:0 0 10px rgba(255,106,0,.6);animation:flame 1.6s ease-in-out infinite}
.fr-gokkusagi{background:conic-gradient(#FF5E5E,#FFC23D,#5BD65B,#3DB8FF,#B05BFF,#FF5E5E)}
.fr-sadakat{background:linear-gradient(135deg,var(--ok),var(--near))}
@keyframes flame{50%{box-shadow:0 0 16px rgba(255,140,0,.85)}}

/* Başlıktaki profil çipi */
.pchip{position:relative;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 4px;margin-right:4px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:700 .78rem var(--f-body)}
.pchip:hover{border-color:var(--muted)}
.pchip .lv{white-space:nowrap}
.pchip .xpbar{position:absolute;left:34px;right:10px;bottom:4px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.pchip .xpbar i{display:block;height:100%;background:var(--accent)}
.pchip .dot{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--miss);box-shadow:0 0 0 2px var(--bg);animation:pulse 1.4s infinite}

/* Sekmeler (profil, mağaza) */
.tabs{display:flex;gap:2px;background:var(--key);padding:3px;border-radius:12px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;border:0;background:transparent;padding:7px 10px;border-radius:9px;font-weight:600;font-size:.82rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--raise);color:var(--ink);box-shadow:0 1px 3px rgba(10,15,30,.16)}
.sheet{width:min(520px,100%)}

/* İlerleme çubuğu */
.pbar{height:7px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));transition:width .5s}
.pbar.big{height:10px;margin:10px 0 4px}

/* Profil kartı */
.pcard{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:var(--key);border:1px solid var(--line)}
.pinfo{flex:1;min-width:0;display:grid;gap:2px}
.pinfo>b{font:800 1.25rem/1.1 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptitle{font-size:.78rem;font-weight:700;color:var(--near)}
.lvrow{display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.lvrow b{color:var(--ink)}
.coins{text-align:center;display:grid}
.coins b{font:800 1.3rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.coins span{font-size:.7rem;color:var(--muted)}
.btns.tight{margin-top:10px}
.nums b.sm{font-size:1rem;line-height:1.6}

/* Günlük ödül şeridi */
.rstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:10px}
.rday{display:grid;justify-items:center;gap:2px;padding:7px 2px;border-radius:10px;border:1px solid var(--line);text-align:center;opacity:.65}
.rday small{font-size:.6rem;color:var(--muted)}
.rday span{font-size:1.2rem}
.rday b{font-size:.58rem;line-height:1.1}
.rday.got{opacity:1;background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:var(--ok)}
.rday.now{opacity:1;border:2px solid var(--near);box-shadow:0 0 0 3px color-mix(in srgb,var(--near) 25%,transparent);animation:pulse 1.6s infinite}

/* Seriler */
.streaks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.streaks div{display:grid;justify-items:center;text-align:center;padding:10px 4px;border-radius:12px;background:var(--key)}
.streaks b{font:800 1.3rem/1.1 var(--f-display)}
.streaks span{font-size:.68rem;font-weight:600}
.streaks small{font-size:.64rem;color:var(--muted)}
.streaks .fire{background:linear-gradient(160deg,color-mix(in srgb,#FF7A1A 22%,var(--key)),var(--key))}

/* Görevler */
.missions{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.missions li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.missions li>div{flex:1;min-width:0}
.missions b{font-size:.86rem}
.missions .rw{display:grid;text-align:right;font:700 .8rem var(--f-mono)}
.missions .rw small{font:600 .64rem var(--f-body);color:var(--muted);white-space:nowrap}
.missions li.done{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.missions li.done b{color:var(--ok)}

/* Başarımlar */
.ach>div{position:relative}
.ach em{position:absolute;top:8px;right:8px;font:700 .56rem var(--f-body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--near)}
.ach .hid:not(.on){border-style:dashed}

/* Takvim */
.calnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calnav b{font:800 1.05rem var(--f-display);text-transform:capitalize}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal>span{font-size:.66rem;font-weight:700;color:var(--muted);padding-bottom:2px}
.cal i{font-style:normal;aspect-ratio:1;display:grid;place-items:center;border-radius:8px;font:600 .78rem var(--f-mono);background:var(--key);color:var(--muted)}
.cal i.e{background:transparent}
.cal i.w{background:var(--ok);color:#fff}
.cal i.l{background:var(--miss);color:#fff}
.cal i.f{opacity:.35}
.cal i.t{outline:2px solid var(--ink);outline-offset:-2px}
.legend{display:flex;gap:14px;justify-content:center;margin-top:10px;font-size:.74rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:3px;background:var(--key)}
.legend i.w{background:var(--ok)}.legend i.l{background:var(--miss)}

/* Rekorlar */
.recs{list-style:none;margin:0;padding:0;display:grid}
.recs li{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:.88rem}
.recs li:last-child{border-bottom:0}
.recs b{font:700 .92rem var(--f-mono)}

/* Düzenle: avatar, çerçeve, ünvan seçimi */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.pick{position:relative;aspect-ratio:1;border-radius:12px;border:1.5px solid var(--line);background:var(--key);cursor:pointer;display:grid;place-items:center;gap:2px;padding:4px}
.pick>span{font-size:1.6rem;line-height:1}
.pick small{font-size:.56rem;font-weight:700;color:var(--muted)}
.pick:disabled{cursor:default;opacity:.45;filter:grayscale(.6)}
.pick.sel{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.pick.fr{aspect-ratio:auto;padding:8px 4px}
.tpicks{display:flex;flex-wrap:wrap;gap:6px}
.tpick{border:1.5px solid var(--line);background:var(--key);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.8rem;cursor:pointer}
.tpick small{font-weight:500;color:var(--muted)}
.tpick:disabled{opacity:.45;cursor:default}
.tpick.sel{border-color:var(--near);color:var(--near)}

/* Mağaza */
.wallet{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;margin-bottom:12px;background:linear-gradient(135deg,color-mix(in srgb,#F2B523 22%,var(--key)),var(--key));border:1px solid var(--line)}
.wallet span{font-size:.8rem;color:var(--muted);font-weight:600}
.wallet b{font:800 1.4rem var(--f-display)}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.item{display:grid;justify-items:center;gap:6px;padding:10px;border-radius:14px;border:1px solid var(--line);text-align:center}
.item>b{font-size:.84rem}
.item small.lede{font-size:.7rem;margin:0}
.item .pill{height:30px;font-size:.76rem}
.item .pill.buy{border-color:var(--near)}
.item .pill[data-poor]{opacity:.55}
.prev{width:100%;height:58px;border-radius:10px;display:grid;place-items:center;background:var(--key);overflow:hidden}
.prev.big{font-size:1.9rem;letter-spacing:2px}
.prev.swatch{display:flex;gap:5px;align-items:center;justify-content:center;border:1px solid var(--line)}
.prev.swatch i{width:20px;height:20px;border-radius:5px}
.prev.ttl{font:800 .9rem var(--f-display);color:var(--near);padding:0 6px}
.try{border:0;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:5px 12px;font-weight:700;font-size:.74rem;cursor:pointer}
.demo-tile{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;font:800 1rem var(--f-display);color:#fff;background:var(--ok);animation:flip 1.6s ease-in-out infinite}
.demo-tile.fx-zoom{animation-name:fxzoom}.demo-tile.fx-spin{animation-name:fxspin}.demo-tile.fx-drop{animation-name:fxdrop}.demo-tile.fx-glow{animation-name:fxglow}
.kbp{display:flex;gap:5px}
.kbp span{width:30px;height:36px;border-radius:7px;display:grid;place-items:center;font:800 .9rem var(--f-display);color:var(--key-ink);background:linear-gradient(180deg,var(--key-top),var(--key-bot));box-shadow:0 3px 0 var(--key-sh)}
.kbp[data-kbp="duz"] span{background:var(--key-bot);box-shadow:none}
.kbp[data-kbp="yuvarlak"] span{border-radius:999px}
.kbp[data-kbp="cam"] span{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 16%,transparent),color-mix(in srgb,var(--ink) 4%,transparent));border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 25%,transparent)}

/* Ayarlar: çok seçenekli satırlar alt alta */
.set-row.col{flex-direction:column;align-items:stretch}

/* Kutu efektleri (mağaza) */
:root[data-fx="zoom"] .tile.flip{animation-name:fxzoom}
:root[data-fx="spin"] .tile.flip{animation-name:fxspin}
:root[data-fx="drop"] .tile.flip{animation-name:fxdrop}
:root[data-fx="glow"] .tile.flip{animation-name:fxglow}
@keyframes fxzoom{0%{transform:scale(1)}50%{transform:scale(.05)}78%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes fxspin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.2)}100%{transform:rotate(360deg) scale(1)}}
@keyframes fxdrop{0%{transform:none;opacity:1}49%{transform:translateY(40%) scale(.8);opacity:0}50%{transform:translateY(-70%) scale(.8);opacity:0}80%{transform:translateY(6%);opacity:1}100%{transform:none}}
@keyframes fxglow{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}70%{transform:rotateX(0);box-shadow:0 0 22px 3px color-mix(in srgb,var(--accent) 70%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* Klavye görünümleri (mağaza) */
:root[data-kb="duz"] .key{background-image:none!important;box-shadow:none!important;background-color:var(--key-bot)}
:root[data-kb="duz"] .key[data-s="c"]{background-color:var(--ok)}
:root[data-kb="duz"] .key[data-s="p"]{background-color:var(--near)}
:root[data-kb="duz"] .key[data-s="a"]{background-color:var(--miss)}
:root[data-kb="duz"] .key[data-k="enter"]{background-color:var(--accent)}
:root[data-kb="duz"] .key:active,:root[data-kb="duz"] .key.pressed{transform:scale(.94)}
:root[data-kb="yuvarlak"] .key{border-radius:999px}
:root[data-kb="cam"] .key:not([data-s]):not([data-k="enter"]){background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 16%,transparent),color-mix(in srgb,var(--ink) 4%,transparent));border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(8px)}

/* Lobi: yapay zekâ, turnuva formu, oyuncu listesi */
.bots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.botb{display:grid;justify-items:center;gap:3px;padding:10px 4px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--bc) 55%,var(--line));background:color-mix(in srgb,var(--bc) 10%,var(--surface));cursor:pointer}
.botb:hover{background:color-mix(in srgb,var(--bc) 20%,var(--surface))}
.botb i{width:10px;height:10px;border-radius:50%;background:var(--bc);box-shadow:0 0 8px var(--bc)}
.botb b{font-size:.8rem}
.botb small{font-size:.66rem;color:var(--muted)}
@media (max-width:440px){ .bots{grid-template-columns:repeat(3,1fr)} }
.tform{display:grid;gap:8px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.trow>span{font-size:.8rem;font-weight:600;color:var(--muted)}
.trow .seg,.set-row .seg{max-width:100%;flex:0 1 auto}
.tform .btn{padding:12px}
.tform .btn svg{width:18px;height:18px}
.plist .pn small,.ranks .pn small{display:block;font:500 .7rem var(--f-body);color:var(--muted)}
.invite{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.invite div{display:grid}
.invite b{font:800 1.1rem var(--f-display)}
.invite span{font-size:.8rem;color:var(--muted)}

/* Turnuva ekranı */
.tour .thead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tour .thead h2{margin:4px 0 0}
.tcode{text-align:right;display:grid}
.tcode b{font:700 1.6rem/1 var(--f-mono);letter-spacing:.12em;color:var(--accent)}
.tstatus{padding:10px 12px;border-radius:12px;background:var(--key);font-size:.88rem}
.tplayers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.tplayers li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.tplayers li.empty{border-style:dashed;color:var(--muted);font-size:.84rem;justify-content:center;background:transparent}
.tplayers .pn{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tplayers small{color:var(--muted);font-size:.72rem}
.bracket{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(128px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px}
.bcol{display:flex;flex-direction:column;justify-content:space-around;gap:10px}
.bcol>.eyebrow{text-align:center}
.bm{position:relative;border-radius:12px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.bm.cur{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.bm.live{box-shadow:0 0 0 2px color-mix(in srgb,var(--miss) 45%,transparent)}
.bm .lv{position:absolute;top:4px;right:6px;font:800 .54rem var(--f-body);letter-spacing:.1em;color:var(--miss);animation:pulse 1.2s infinite}
.tp{display:flex;align-items:center;gap:5px;padding:5px 6px;min-height:38px;font-size:.78rem}
.tp .av{--s:22px}
.tp+.tp{border-top:1px solid var(--line)}
.tp .pn{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp.win{background:color-mix(in srgb,var(--ok) 14%,transparent)}
.tp.win b{color:var(--ok)}
.tp.lost{opacity:.5}
.tp.me .pn{color:var(--accent)}
.tp.bye .pn{color:var(--muted);font-weight:500}
.tg{display:grid;gap:1px}
.tg span{display:flex;gap:1px}
.tg i{width:5px;height:5px;border-radius:1px;background:var(--tile-typed)}
.tg i[data-s="c"]{background:var(--ok)}.tg i[data-s="p"]{background:var(--near)}.tg i[data-s="a"]{background:var(--miss)}

/* Rakip kartında avatar */
.opp>.av{margin-right:-2px}

/* Lig penceresi */
.promo{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:10px 0;border-radius:14px;border:2px solid var(--near);background:color-mix(in srgb,var(--near) 12%,transparent)}
.promo div{flex:1;min-width:0}
.promo p{margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.promo .btn{flex:none;padding:10px 14px}
.lchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.lchips span{font-size:.76rem;padding:5px 10px;border-radius:999px;background:var(--key)}
.stars{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.star{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,#F2B523 12%,transparent),transparent)}
.star div{display:grid;min-width:0}
.star b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star small{font-size:.72rem;color:var(--muted)}
.star.none{opacity:.6}
.sbadges{display:flex;flex-wrap:wrap;gap:6px}
.sbadge{font-size:.74rem;font-weight:700;color:#fff;padding:5px 10px;border-radius:999px}
.ladder{display:grid;gap:2px}
.ladder span{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;font-size:.84rem;font-weight:600}
.ladder small{margin-left:auto;font:500 .72rem var(--f-mono);color:var(--muted)}
.ladder .here{background:color-mix(in srgb,var(--accent) 14%,transparent);outline:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.ranks .av{margin-left:-2px}

/* Harf analizi */
.letters{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.letters div{display:grid;justify-items:center;padding:8px 2px;border-radius:10px;background:var(--key)}
.letters b{font:800 1.3rem var(--f-display)}
.letters span{font:600 .72rem var(--f-mono);color:var(--muted)}

/* Dar ekran başlığı */
@media (max-width:480px){
  .brand>div{display:none}
  .live{font-size:0;gap:4px;padding:0 8px}
  .live b{font-size:.8rem}
  .ib{width:34px;height:36px}
  .pchip{padding-right:8px;margin-right:2px}
  .stars{grid-template-columns:1fr}
  .streaks{grid-template-columns:repeat(2,1fr)}
  .rday b{display:none}
}

/* =====================================================================
   Temalar (mağaza). Her tema bütün renk değişkenlerini tanımlar.
   ===================================================================== */
:root[data-theme="amoled"]{--bg:#000;--surface:#0D0D0D;--raise:#262626;--ink:#F5F5F5;--muted:#8C8C8C;--line:#1F1F1F;--accent:#5BA35B;--accent-ink:#fff;--ok:#5BA35B;--near:#D1B43F;--miss:#D9534F;--key:#141414;--key-top:#3A3A3A;--key-bot:#262626;--key-sh:#0A0A0A;--key-ink:#fff;--tile:#0D0D0D;--tile-border:#262626;--tile-typed:#1A1A1A;--tile-filled:#4A4A4A;--bar:#262626;--glow1:transparent;--glow2:transparent;--overlay:rgba(0,0,0,.75);--shadow:0 10px 40px rgba(0,0,0,.7);color-scheme:dark}
:root[data-theme="minimal"]{--bg:#FFFFFF;--surface:#FFFFFF;--raise:#F2F2F2;--ink:#111;--muted:#777;--line:#E5E5E5;--accent:#1F1F1F;--accent-ink:#fff;--ok:#1F1F1F;--near:#8A8A8A;--miss:#9E9E9E;--key:#F2F2F2;--key-top:#FAFAFA;--key-bot:#ECECEC;--key-sh:#D0D0D0;--key-ink:#111;--tile:#fff;--tile-border:#E0E0E0;--tile-typed:#F4F4F4;--tile-filled:#999;--bar:#BBB;--glow1:transparent;--glow2:transparent;--overlay:rgba(0,0,0,.4);--shadow:0 10px 40px rgba(0,0,0,.12);color-scheme:light}
:root[data-theme="mor"]{--bg:#1A1027;--surface:#251838;--raise:#3A2856;--ink:#F3ECFF;--muted:#A99BC4;--line:#352650;--accent:#A855F7;--accent-ink:#fff;--ok:#A855F7;--near:#E0A93B;--miss:#E05A7A;--key:#2B1C42;--key-top:#4A3570;--key-bot:#362552;--key-sh:#1C1230;--key-ink:#fff;--tile:#251838;--tile-border:#352650;--tile-typed:#33224D;--tile-filled:#6A5394;--bar:#3A2856;--glow1:rgba(168,85,247,.18);--glow2:rgba(224,169,59,.07);--overlay:rgba(10,4,20,.7);--shadow:0 10px 40px rgba(0,0,0,.5);color-scheme:dark}
:root[data-theme="orman"]{--bg:#0F1A12;--surface:#172619;--raise:#26402A;--ink:#E8F2E6;--muted:#93A893;--line:#233826;--accent:#4CAF6A;--accent-ink:#fff;--ok:#4CAF6A;--near:#C9A83A;--miss:#B5523B;--key:#1A2D1D;--key-top:#3F5A43;--key-bot:#2C4230;--key-sh:#13200F;--key-ink:#fff;--tile:#172619;--tile-border:#233826;--tile-typed:#20341F;--tile-filled:#4F6E52;--bar:#26402A;--glow1:rgba(76,175,106,.14);--glow2:rgba(201,168,58,.06);--overlay:rgba(4,10,5,.7);--shadow:0 10px 40px rgba(0,0,0,.5);color-scheme:dark}
:root[data-theme="buz"]{--bg:#EAF4FB;--surface:#FFFFFF;--raise:#FFFFFF;--ink:#0F2A3D;--muted:#5E7C91;--line:#CFE3F1;--accent:#1F7FBF;--accent-ink:#fff;--ok:#1F7FBF;--near:#8B6FD6;--miss:#9AA8B5;--key:#DCEBF6;--key-top:#FFFFFF;--key-bot:#DCEBF6;--key-sh:#A9C6DB;--key-ink:#0F2A3D;--tile:#F7FBFE;--tile-border:#CFE3F1;--tile-typed:#E3F0F9;--tile-filled:#8FB3CC;--bar:#9AB6CB;--glow1:rgba(31,127,191,.12);--glow2:rgba(139,111,214,.08);--overlay:rgba(15,42,61,.4);--shadow:0 10px 40px rgba(15,42,61,.15);color-scheme:light}
:root[data-theme="ates"]{--bg:#1A0B07;--surface:#26120C;--raise:#43211A;--ink:#FFEFE6;--muted:#C49A88;--line:#3A1D14;--accent:#F26B1D;--accent-ink:#fff;--ok:#F26B1D;--near:#E0A21B;--miss:#8B2A1A;--key:#2E160F;--key-top:#5A2C1F;--key-bot:#401E15;--key-sh:#1A0A06;--key-ink:#fff;--tile:#26120C;--tile-border:#3A1D14;--tile-typed:#3A1B12;--tile-filled:#7A4433;--bar:#43211A;--glow1:rgba(242,107,29,.2);--glow2:rgba(224,162,27,.09);--overlay:rgba(12,4,2,.7);--shadow:0 10px 40px rgba(0,0,0,.55);color-scheme:dark}
:root[data-theme="uzay"]{--bg:#0A0B1E;--surface:#12142E;--raise:#262A55;--ink:#E8EAFF;--muted:#8F94C7;--line:#1F2348;--accent:#5B8CFF;--accent-ink:#fff;--ok:#5B8CFF;--near:#C77DFF;--miss:#3A3F6B;--key:#151838;--key-top:#343A72;--key-bot:#262A55;--key-sh:#0D0F26;--key-ink:#fff;--tile:#12142E;--tile-border:#1F2348;--tile-typed:#1B1E40;--tile-filled:#4B5094;--bar:#262A55;--glow1:rgba(91,140,255,.16);--glow2:rgba(199,125,255,.14);--overlay:rgba(4,4,14,.72);--shadow:0 10px 40px rgba(0,0,0,.55);color-scheme:dark}
:root[data-theme="uzay"] body{background-image:radial-gradient(1px 1px at 12% 22%,#fff8,transparent),radial-gradient(1px 1px at 72% 12%,#fff8,transparent),radial-gradient(1.5px 1.5px at 42% 72%,#fff6,transparent),radial-gradient(1px 1px at 88% 58%,#fff7,transparent),radial-gradient(1px 1px at 28% 88%,#fff5,transparent),radial-gradient(800px 600px at 10% 0%,var(--glow1),transparent 70%),radial-gradient(800px 600px at 90% 100%,var(--glow2),transparent 70%)}
:root[data-theme="retro"]{--bg:#241734;--surface:#2E1E44;--raise:#4A3270;--ink:#FFE9F7;--muted:#B9A0CC;--line:#3D2A5A;--accent:#FF3CAC;--accent-ink:#fff;--ok:#FF3CAC;--near:#1FB5E0;--miss:#5A4A78;--key:#33224D;--key-top:#5B3F86;--key-bot:#432E66;--key-sh:#1A1028;--key-ink:#fff;--tile:#2E1E44;--tile-border:#3D2A5A;--tile-typed:#392656;--tile-filled:#7A5AA8;--bar:#4A3270;--glow1:rgba(255,60,172,.18);--glow2:rgba(31,181,224,.14);--overlay:rgba(14,6,22,.72);--shadow:0 10px 40px rgba(0,0,0,.5);color-scheme:dark}
:root[data-theme="retro"] .brand h1{background:linear-gradient(90deg,#FF3CAC,#2BD2FF);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="neon"]{--bg:#07070C;--surface:#10101A;--raise:#23233A;--ink:#F2FFF7;--muted:#8D93A8;--line:#1C1C2C;--accent:#39FF88;--accent-ink:#07070C;--ok:#18C964;--near:#E8C500;--miss:#FF3B6B;--key:#13131F;--key-top:#22223A;--key-bot:#17172A;--key-sh:#050508;--key-ink:#fff;--tile:#0C0C14;--tile-border:#252540;--tile-typed:#161626;--tile-filled:#4B4B78;--bar:#23233A;--glow1:rgba(57,255,136,.12);--glow2:rgba(255,59,107,.1);--overlay:rgba(0,0,0,.75);--shadow:0 10px 40px rgba(0,0,0,.6);color-scheme:dark}
:root[data-theme="neon"] .tile[data-s="c"]{box-shadow:0 0 14px var(--ok)}
:root[data-theme="neon"] .tile[data-s="p"]{box-shadow:0 0 14px var(--near)}
:root[data-theme="neon"] .tile[data-s="a"]{box-shadow:0 0 12px var(--miss)}
:root[data-theme="cyberpunk"]{--bg:#0D0221;--surface:#170838;--raise:#2B1460;--ink:#F4F0FF;--muted:#9C8FC9;--line:#261056;--accent:#00F0FF;--accent-ink:#0D0221;--ok:#00B8C4;--near:#D4C600;--miss:#FF2A6D;--key:#1B0A44;--key-top:#3A1C7A;--key-bot:#2B1460;--key-sh:#08011A;--key-ink:#fff;--tile:#170838;--tile-border:#2E1466;--tile-typed:#22104D;--tile-filled:#5A3AA8;--bar:#2B1460;--glow1:rgba(0,240,255,.14);--glow2:rgba(255,42,109,.16);--overlay:rgba(6,1,16,.75);--shadow:0 10px 40px rgba(0,0,0,.6);color-scheme:dark}
:root[data-theme="cyberpunk"] .tile{border-radius:2px 10px 2px 10px}
:root[data-theme="cyberpunk"] .brand h1{color:#FCEE0A;text-shadow:2px 0 #FF2A6D,-2px 0 #00F0FF}
:root[data-theme="matrix"]{--bg:#000800;--surface:#021402;--raise:#0A2E0E;--ink:#B7FFC4;--muted:#4FA35E;--line:#0A240C;--accent:#00FF41;--accent-ink:#000800;--ok:#00A82B;--near:#8FB300;--miss:#0B3D16;--key:#031A05;--key-top:#0D3312;--key-bot:#08240C;--key-sh:#000;--key-ink:#00FF41;--tile:#010D02;--tile-border:#0B2E0F;--tile-typed:#062008;--tile-filled:#1C6A2A;--bar:#0A2E0E;--glow1:rgba(0,255,65,.1);--glow2:transparent;--overlay:rgba(0,4,0,.8);--shadow:0 10px 40px rgba(0,0,0,.7);--f-display:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
:root[data-theme="matrix"] .tile[data-s]{text-shadow:0 0 6px #00FF41}
:root[data-theme="terminal"]{--bg:#0C0C0C;--surface:#141414;--raise:#2A2A2A;--ink:#33FF66;--muted:#1FA847;--line:#222;--accent:#33FF66;--accent-ink:#0C0C0C;--ok:#22A84A;--near:#CC8C00;--miss:#444;--key:#181818;--key-top:#2A2A2A;--key-bot:#1E1E1E;--key-sh:#050505;--key-ink:#33FF66;--tile:#0F0F0F;--tile-border:#2A2A2A;--tile-typed:#1A1A1A;--tile-filled:#33FF66;--bar:#2A2A2A;--glow1:transparent;--glow2:transparent;--overlay:rgba(0,0,0,.8);--shadow:0 10px 40px rgba(0,0,0,.7);--f-display:"JetBrains Mono",ui-monospace,monospace;--f-body:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
:root[data-theme="terminal"] .tile,:root[data-theme="terminal"] .key{border-radius:3px}
:root[data-theme="altin"]{--bg:#16120A;--surface:#211A0E;--raise:#3D3018;--ink:#FFF4D6;--muted:#BFA978;--line:#33280F;--accent:#E8B923;--accent-ink:#16120A;--ok:#D4A017;--near:#4F8FB8;--miss:#6B5A3A;--key:#271F10;--key-top:#4A3B1C;--key-bot:#362B13;--key-sh:#120E05;--key-ink:#FFF4D6;--tile:#211A0E;--tile-border:#3A2E14;--tile-typed:#2E2412;--tile-filled:#8A7136;--bar:#3D3018;--glow1:rgba(232,185,35,.16);--glow2:rgba(232,185,35,.06);--overlay:rgba(8,6,2,.72);--shadow:0 10px 40px rgba(0,0,0,.55);color-scheme:dark}
:root[data-theme="altin"] .brand h1{background:linear-gradient(90deg,#FFE27A,#C99A12);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="turkiye"]{--bg:#FFF5F5;--surface:#FFFFFF;--raise:#FFFFFF;--ink:#1A0A0B;--muted:#7A5558;--line:#F0D4D6;--accent:#E30A17;--accent-ink:#fff;--ok:#E30A17;--near:#E8961C;--miss:#9AA0A6;--key:#FBE3E5;--key-top:#FFFFFF;--key-bot:#FBE3E5;--key-sh:#E2B6BA;--key-ink:#1A0A0B;--tile:#FFFFFF;--tile-border:#F0D4D6;--tile-typed:#FDECED;--tile-filled:#D98A90;--bar:#D9A5A9;--glow1:rgba(227,10,23,.08);--glow2:rgba(227,10,23,.05);--overlay:rgba(26,10,11,.45);--shadow:0 10px 40px rgba(120,0,10,.15);color-scheme:light}
:root[data-theme="yilbasi"]{--bg:#0E2A1E;--surface:#133626;--raise:#1F5039;--ink:#FFF8EC;--muted:#A9C7B6;--line:#1A4430;--accent:#C7372F;--accent-ink:#fff;--ok:#2F9E5B;--near:#D4AF2F;--miss:#C7372F;--key:#163D2B;--key-top:#24583F;--key-bot:#1A432F;--key-sh:#071A11;--key-ink:#fff;--tile:#133626;--tile-border:#1D4A34;--tile-typed:#1A412E;--tile-filled:#4D8A6A;--bar:#1F5039;--glow1:rgba(212,175,47,.12);--glow2:rgba(199,55,47,.14);--overlay:rgba(3,12,8,.72);--shadow:0 10px 40px rgba(0,0,0,.5);color-scheme:dark}
:root[data-theme="yilbasi"] body{background-image:radial-gradient(2px 2px at 15% 20%,#fff9,transparent),radial-gradient(2px 2px at 65% 8%,#fff8,transparent),radial-gradient(1.5px 1.5px at 85% 40%,#fff8,transparent),radial-gradient(2px 2px at 35% 60%,#fff6,transparent),radial-gradient(1.5px 1.5px at 55% 85%,#fff7,transparent),radial-gradient(800px 600px at 10% 0%,var(--glow1),transparent 70%),radial-gradient(800px 600px at 90% 100%,var(--glow2),transparent 70%)}
/* Yüksek kontrast her temanın üstüne yazılır */
:root[data-cb="1"][data-theme]{--ok:#F5793A;--near:#85C0F9;--miss:#6D6D72}

/* =====================================================================
   Sosyal, bulut kayıt, paylaşım ve mobil eklemeler
   ===================================================================== */

/* Oyun sonu kazanımları */
.gains{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
.gains span{font:700 .82rem var(--f-body);padding:6px 11px;border-radius:999px;background:var(--key);animation:gin .4s ease-out both}
.gains span:nth-child(2){animation-delay:.08s}.gains span:nth-child(3){animation-delay:.16s}.gains span:nth-child(4){animation-delay:.24s}.gains span:nth-child(5){animation-delay:.32s}
.gains .g-xp{background:color-mix(in srgb,var(--accent) 20%,var(--key));color:var(--ink)}
.gains .g-c{background:color-mix(in srgb,#F2B523 22%,var(--key))}
.gains .g-up{background:linear-gradient(135deg,#F2B523,#E07A1F);color:#1a1205}
@keyframes gin{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}

/* Paylaşım çubuğu */
.sharebar{display:flex;flex-wrap:wrap;gap:6px}
.sharebar .pill{text-decoration:none;color:var(--ink);height:34px}

/* Başlangıç kelimesi önerisi */
.suggest{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:6;border:1px dashed var(--line);background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--muted);border-radius:999px;padding:6px 14px;font:600 .78rem var(--f-body);cursor:pointer;backdrop-filter:blur(6px)}
.suggest:hover{color:var(--ink);border-color:var(--muted)}

/* Büyük tuş modu */
:root[data-big="1"]{--kh:66px}
:root[data-big="1"] .key{font-size:1.3rem;max-width:60px}
:root[data-big="1"] .kb{gap:8px}
:root[data-big="1"] .kr{gap:6px}
@media (max-height:760px){ :root[data-big="1"]{--kh:58px} }

/* Hızlı Saat işareti */
.pchip .hh{color:#F2B523;margin-right:4px;font-weight:800}

/* Düello: emoji + hazır mesajlar */
.emo-pop{flex-direction:column;width:min(300px,86vw)}
.emo-e{display:flex;flex-wrap:wrap;gap:2px}
.emo-q{display:flex;flex-wrap:wrap;gap:4px;padding-top:6px;margin-top:4px;border-top:1px solid var(--line)}
.emo-q button{width:auto;height:auto;font:600 .76rem var(--f-body);padding:5px 9px;border-radius:999px;background:var(--key)}
.bub span.txt{width:auto;left:auto;right:auto;transform:translateX(-50%);white-space:nowrap;font:800 .9rem/1 var(--f-body);background:var(--ink);color:var(--bg);padding:7px 11px;border-radius:12px;box-shadow:var(--shadow)}

/* Arkadaşlar */
.fcode{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--key);border:1px solid var(--line)}
.fcode div{display:grid;gap:3px}
.fcode b{font:700 1.6rem/1 var(--f-mono);letter-spacing:.14em;color:var(--accent)}
.pn a{color:inherit;text-decoration:none}
.pn a:hover{text-decoration:underline}
.plist li.off{opacity:.62}
.st{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--muted)}
.st-idle{background:var(--ok)}.st-duel,.st-tourney{background:var(--near)}.st-queue,.st-room{background:var(--accent)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.feed li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:.86rem}
.feed li:last-child{border-bottom:0}
.feed li>span{flex:1;min-width:0}
.feed small{color:var(--muted);font-size:.72rem;white-space:nowrap}
.feed li.empty{color:var(--muted);border:0}
.plist .pill.icon{width:30px;height:30px;padding:0}
.plist .pill.armed,.ranks .pill.armed{background:var(--danger);border-color:var(--danger);color:#fff}

/* Hesap */
.acc{display:grid;gap:10px}
.acc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line)}
.acc-row.col{flex-direction:column;align-items:stretch}
.acc-row p{margin:3px 0 0;font-size:.8rem;color:var(--muted)}
.acc .row-in{flex-wrap:wrap}
.acc .row-in input{font-family:var(--f-mono);font-size:.84rem}
.linkcode{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;border:2px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.linkcode b{font:700 2rem/1 var(--f-mono);letter-spacing:.12em;color:var(--accent)}
.linkcode span{font:600 .78rem var(--f-mono);color:var(--muted)}
.btn.armed,.pill.armed{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}

/* Şehirler */
.citysel{width:100%;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 .92rem var(--f-body);padding:0 10px}
.cities{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.cities li{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;overflow:hidden;font-size:.86rem}
.cities li>i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 14%,transparent);z-index:0}
.cities li>*:not(i){position:relative;z-index:1}
.cities li.me{outline:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.cities .rk{font:700 .84rem var(--f-mono);color:var(--muted);text-align:right}
.cities li>span:last-child{font-size:.74rem;color:var(--muted)}

/* Gruplar */
.gcard{margin-top:14px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.ghead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ghead div{display:grid;gap:3px}
.ghead>div>b{font:800 1.15rem/1.1 var(--f-display)}
.ranks .pill.icon{width:28px;height:28px;padding:0;margin-left:6px}

/* Satır sayaçları: yeşil / sarı / kırmızı harf sayısı — harf kutularıyla aynı boyda, araları boşluklu */
.row.cnt{grid-template-columns:repeat(var(--len),var(--t)) auto}
.rc{display:flex;flex:none;align-items:center;gap:var(--g);margin-left:calc(var(--t)*.5);visibility:hidden}
.rc.on{visibility:visible}
.rc.on i{animation:pop .25s ease-out both}
.rc.on i:nth-child(2){animation-delay:.06s}.rc.on i:nth-child(3){animation-delay:.12s}
.rc i{flex:none;width:var(--t);height:var(--t);border-radius:calc(var(--t)*.14);display:grid;place-items:center;font:800 calc(var(--t)*.5)/1 var(--f-display);font-style:normal;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.rc i[data-s="c"]{background:var(--ok)}.rc i[data-s="p"]{background:var(--near)}.rc i[data-s="a"]{background:var(--miss)}

/* =====================================================================
   Yönetimden gelenler: bakım/ban ekranı, duyuru, rapor, kelime anlamı, resmi turnuva
   ===================================================================== */
#lock{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px)}
.lockcard{max-width:420px;text-align:center;display:grid;gap:10px;justify-items:center;padding:28px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.lockcard h2{margin:0;font:800 1.5rem/1.15 var(--f-display)}
.lockcard p{margin:0;color:var(--muted);line-height:1.5}
.lockicon{font-size:2.6rem}
.annimg{width:100%;max-height:240px;object-fit:cover;border-radius:12px;margin-bottom:10px}
.annbody{white-space:normal;line-height:1.55}
.linkbtn{display:block;margin:14px auto 0;border:0;background:none;color:var(--muted);font:600 .8rem var(--f-body);cursor:pointer;text-decoration:underline}
.linkbtn:hover{color:var(--danger)}
.reasons{display:grid;gap:6px;margin:10px 0}
.reasons label{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);cursor:pointer;font-weight:600}
.reasons label:has(input:checked){border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.meaning{margin:-2px 0 8px;padding:10px 12px;border-radius:12px;background:var(--key);font-size:.86rem}
.meaning p{margin:4px 0}
.meaning small{display:block;color:var(--muted)}
.mtag{font:700 .64rem var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--near);margin-left:6px}
.official{display:grid;gap:6px;margin-bottom:10px}
.ofc{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--near);background:color-mix(in srgb,var(--near) 9%,transparent)}
.ofc div{display:grid;gap:2px;min-width:0}
.ofc small{color:var(--muted);font-size:.74rem}

/* =====================================================================
   Profil (yeni) ve ayarlar (gruplu)
   ===================================================================== */
.av.xl{--s:96px;padding:4px}
.muted{color:var(--muted)}
.center{text-align:center}
.ptabs{position:sticky;top:-22px;z-index:3;margin:-4px 0 14px}
.ptabs button{position:relative}
.tdot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--miss)}
.hero{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;padding:22px 16px 18px;border-radius:20px;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 22%,var(--key)),var(--key) 70%);border:1px solid var(--line)}
.hero-edit{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:1rem}
.hero-edit:hover{border-color:var(--muted)}
.hero-name{font:800 1.45rem/1.1 var(--f-display);margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero .ptitle{font-size:.82rem}
.hero-lv{width:min(280px,100%);display:grid;gap:2px;margin-top:6px;font-size:.8rem}
.hero-lv>span b{font-size:1rem}
.hero-lv small{color:var(--muted);font-variant-numeric:tabular-nums}
.hero-row{display:flex;gap:8px;align-items:center;margin-top:4px}
.coinchip{font:800 .9rem var(--f-display);padding:6px 12px;border-radius:999px;background:color-mix(in srgb,#F2B523 18%,var(--surface));border:1px solid color-mix(in srgb,#F2B523 40%,var(--line))}
.qstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.qstats div{display:grid;justify-items:center;padding:10px 4px;border-radius:14px;background:var(--key)}
.qstats b{font:800 1.15rem/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.qstats b small{font-size:.7rem;color:var(--muted)}
.qstats span{font-size:.7rem;color:var(--muted)}
.qstats .fire{background:linear-gradient(160deg,color-mix(in srgb,#FF7A1A 22%,var(--key)),var(--key))}
.banner{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:10px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--near);background:color-mix(in srgb,var(--near) 12%,transparent);font-weight:700;cursor:pointer;animation:pulse 2s infinite}
.banner span{color:var(--near)}
.recgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.recgrid div{display:grid;justify-items:center;text-align:center;gap:1px;padding:10px 4px;border-radius:12px;border:1px solid var(--line)}
.recgrid span{font-size:1.1rem}
.recgrid b{font:800 .95rem var(--f-display)}
.recgrid small{font-size:.66rem;color:var(--muted)}
.linkbtn.more{margin-top:8px}
.pcardsec{padding:14px;border-radius:16px;background:var(--key);margin-bottom:10px}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.sechead b{font:800 1rem var(--f-display)}
.sechead small{font-size:.72rem;color:var(--muted);text-align:right}
.sechead .linkbtn{margin:0}
.pcardsec .missions li{background:var(--surface)}
.mchk{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:.75rem;font-weight:800;color:#fff}
.missions li.done .mchk{background:var(--ok);border-color:var(--ok)}
.pcardsec .rstrip{margin-bottom:10px}
.pcardsec .rday{background:var(--surface)}
.achtop{display:grid;gap:4px;margin-bottom:10px;font-size:.9rem}
.achtop b{font:800 1.2rem var(--f-display)}
.achseg{margin-bottom:12px}
.ach .pbar{margin-top:6px;height:5px}
.achp{font-size:.66rem;color:var(--muted)}
.backbtn{border:0;background:none;color:var(--accent);font:700 .9rem var(--f-body);cursor:pointer;padding:4px 0;margin-bottom:10px}
.editpreview{display:grid;place-items:center;padding:6px 0 14px}
.pcardsec .picks .pick{background:var(--surface)}

/* Ayarlar */
.sgroup{margin-bottom:14px}
.sgroup h4{margin:0 0 6px 4px;font:700 .72rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sbox{background:var(--key);border-radius:14px;overflow:hidden}
.srow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.sbox>:last-child{border-bottom:0}
.srow.link{border-left:0;border-right:0;border-top:0;background:transparent;cursor:pointer;color:inherit;font:inherit}
.srow.link:hover{background:color-mix(in srgb,var(--ink) 5%,var(--key))}
.sicon{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface);font-size:1rem}
.stext{flex:1;min-width:0}
.stext strong{display:block;font-weight:700;font-size:.92rem}
.stext p{margin:1px 0 0;font-size:.76rem;color:var(--muted)}
.chev{color:var(--muted);font-size:1.3rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.tcard{display:grid;justify-items:center;gap:6px;padding:8px 4px;border-radius:12px;border:2px solid transparent;background:var(--surface);cursor:pointer;font:600 .74rem var(--f-body);color:var(--ink)}
.tcard[aria-pressed="true"]{border-color:var(--accent)}
.tcard.more{border:2px dashed var(--line);background:transparent}
.tsw{width:100%;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.tsw i{width:12px;height:12px;border-radius:3px}
.tsw.sys{background:linear-gradient(135deg,#F4F4F5 50%,#121213 50%)}
.tsw.sys i:nth-child(1){background:#5BA35B}.tsw.sys i:nth-child(2){background:#D1B43F}.tsw.sys i:nth-child(3){background:#D9534F}
.tsw.plus{font-size:1.2rem;color:var(--muted);border-style:dashed}
@media (max-width:420px){ .qstats{grid-template-columns:repeat(2,1fr)} .recgrid{grid-template-columns:repeat(2,1fr)} }
.pcardsec .cal i{background:var(--surface)}
.pcardsec .cal i.e{background:transparent}
.pcardsec .cal i.w{background:var(--ok)}
.pcardsec .cal i.l{background:var(--miss)}
.pcardsec .legend i{background:var(--surface)}
.pcardsec .legend i.w{background:var(--ok)}
.pcardsec .legend i.l{background:var(--miss)}
@media (max-width:420px){ .ptabs button{padding:7px 6px;font-size:.78rem} .ptabs{gap:0} }

/* =====================================================================
   Hesap formları, oturum kilidi ve genel sohbet
   ===================================================================== */
.aform{display:grid;gap:8px;margin-top:4px}
.aform input{height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 1rem var(--f-body);padding:0 12px;min-width:0}
.aform input:focus{outline:2.5px solid var(--accent);outline-offset:1px}
.aform .btn{flex:none}
.acchead{display:flex;gap:12px;align-items:center}
.acchead b{font-size:1.1rem}
.warnline{padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--near) 18%,transparent);margin:0 0 10px}
.lockcard .aform{width:100%;max-width:300px;margin-top:6px}
.ib{position:relative}
.cdot{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font:800 .66rem/17px var(--f-body);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.chat{display:grid;gap:10px}
.chatlog{list-style:none;margin:0;padding:4px 2px;display:grid;gap:10px;align-content:start;height:min(52vh,460px);overflow-y:auto;overscroll-behavior:contain;border-radius:14px;background:color-mix(in srgb,var(--key) 45%,transparent)}
.chatlog .empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:.9rem}
.cmsg{display:flex;gap:8px;align-items:flex-start;padding:0 8px}
.cmsg .cb{min-width:0;max-width:85%;background:var(--surface);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:6px 10px 8px}
.cmsg.me{flex-direction:row-reverse}
.cmsg.me .cb{border-radius:14px 4px 14px 14px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.cmsg .ch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.78rem}
.cmsg .ch a{font-weight:800;color:var(--ink);text-decoration:none}
.cmsg .ch a:hover{text-decoration:underline}
.cmsg .ch small{color:var(--muted)}
.cmsg p{margin:2px 0 0;font-size:.95rem;line-height:1.4;overflow-wrap:anywhere;white-space:pre-wrap}
.crep{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px;margin-left:auto;font-size:.8rem;opacity:.55}
.crep:hover{opacity:1;color:var(--danger)}
.chatin{display:flex;gap:8px}
.chatin input{flex:1 1 auto;min-width:0;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 1rem var(--f-body);padding:0 12px}
.chatin input:focus{outline:2.5px solid var(--accent);outline-offset:1px}
.chatin .btn{flex:none;padding:0 16px;height:44px}
.chatgate{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;border-radius:12px;border:1px dashed var(--line);font-size:.9rem}
.chatgate .btn{flex:none;padding:10px 14px}
.chatrules{margin:0;text-align:center}

/* =====================================================================
   Kademe armaları ve ünvan madalyonları
   ===================================================================== */
.emb{display:inline-block;vertical-align:middle;flex:none;object-fit:contain;user-select:none}
.plist .emb,.ranks .emb,.cmsg .emb{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pn small .emb,.invite span .emb{margin:-2px 3px 0 0}
.ptitle{display:inline-flex;align-items:center;gap:5px}
.hero .ptitle .emb{width:22px;height:22px}
.tpick{display:inline-flex;align-items:center;gap:6px;padding-left:6px}
.prev.ttl .emb{width:56px;height:56px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.recgrid .emb{width:26px;height:26px}
.recs .emb{margin:-3px 2px 0 0}
.sbadge{display:inline-flex;align-items:center;gap:5px;padding-left:5px}
.sbadge .emb{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.league-card{justify-content:flex-start}
.league-card .lc-l{flex:1;min-width:0}
.league-card .lcimg{width:64px;height:64px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));margin:-6px 0}
.ladder span{padding:3px 8px}
.ladder .emb{width:26px;height:26px}
.nums .emb{display:block;margin:0 auto 4px;width:34px;height:34px}
.celebrate{position:fixed;inset:0;z-index:250;display:grid;place-items:center;pointer-events:auto;background:color-mix(in srgb,var(--bg) 55%,transparent);animation:celIn .25s ease-out}
.celebrate.out{opacity:0;transition:opacity .4s}
.celcard{display:grid;justify-items:center;gap:6px;padding:22px 34px 24px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.celcard b{font:800 1.5rem/1.1 var(--f-display)}
.celimg{position:relative;display:grid;place-items:center}
.celimg::before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--near) 45%,transparent),transparent);animation:celGlow 1.6s ease-in-out infinite alternate}
.celimg .emb{position:relative;width:128px;height:128px;animation:celPop .7s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
@keyframes celIn{from{opacity:0}}
@keyframes celPop{0%{transform:scale(.2) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes celGlow{from{transform:scale(.85);opacity:.6}to{transform:scale(1.1);opacity:1}}
@media (prefers-reduced-motion:reduce){.celimg .emb,.celimg::before{animation:none}}
/* Lig penceresindeki uzun sekme şeridi pencereyi taşırmasın; kendi içinde kaysın. */
.filters{max-width:100%;min-width:0}
.filters .seg{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.filters .seg::-webkit-scrollbar{display:none}
.filters .seg button{flex:none;white-space:nowrap}
.league-card .lcimg{border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.45),rgba(255,255,255,0))}

/* İpucu fiyatı */
#bHint .hprice{font:700 .7rem var(--f-body);padding:1px 6px;margin-left:2px;border-radius:999px;background:color-mix(in srgb,var(--near) 22%,transparent);color:var(--ink)}
#bHint.armed .hprice{background:rgba(255,255,255,.25);color:#fff}

/* =====================================================================
   KVKK: çerez bildirimi, yasal metinler, hesap verileri
   ===================================================================== */
#cookieBar{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:220;width:min(680px,calc(100% - 24px));display:grid;gap:10px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);animation:cbIn .3s ease-out}
#cookieBar p{margin:0;font-size:.86rem;line-height:1.5}
#cookieBar a,.lgdoc a,.terms a{color:var(--accent);font-weight:600}
#cookieBar .cbtns{display:flex;gap:8px;flex-wrap:wrap}
#cookieBar .btn{flex:1 1 120px;padding:10px 12px}
@keyframes cbIn{from{transform:translate(-50%,20px);opacity:0}}
.lgdoc{font-size:.88rem;line-height:1.55}
.lgdoc h4{margin:14px 0 4px;font-size:.95rem}
.lgdoc ul{padding-left:18px;margin:6px 0}
.lgdoc li{margin:3px 0}
.lgdoc .lgdate{color:var(--muted);font-size:.8rem}
.lgmiss{background:color-mix(in srgb,var(--near) 40%,transparent);color:inherit;padding:0 4px;border-radius:4px}
.lgtbl{width:100%;border-collapse:collapse;font-size:.8rem;display:block;overflow-x:auto}
.lgtbl th,.lgtbl td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
.terms{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--muted);line-height:1.4}
.terms input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--accent)}
.sw:disabled{opacity:.6;cursor:not-allowed}
.aform .terms input{height:16px;padding:0;border:0;background:none}
/* Açık pencere varken bildirim pencerenin altını örtmesin. */
body:has(#modal:not([hidden])) #cookieBar{display:none}
.acc-row > .danger,.acc-row > .pill{white-space:nowrap;flex:none}

/* =====================================================================
   Sıralama sayfası
   ===================================================================== */
.rktabs{margin-bottom:10px}
.rkhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:2px 0 10px}
.rkhead b{font:800 1.25rem var(--f-display)}
.rkhead small{color:var(--muted);font-size:.78rem;text-align:right}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin:6px 0 12px}
.pod{position:relative;display:grid;justify-items:center;gap:3px;padding:10px 6px 0;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit;min-width:0}
.pod b{font-size:.84rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod em{font:800 .95rem var(--f-mono);font-style:normal}
.pod .medal{font-size:1.4rem;line-height:1}
.pod i{display:block;width:100%;border-radius:12px 12px 4px 4px;margin-top:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.pod.p1{--c:#E8B020}.pod.p1 i{height:74px}
.pod.p2{--c:#AEB8C8}.pod.p2 i{height:52px}
.pod.p3{--c:#C47A3C}.pod.p3 i{height:38px}
.pod.me b{color:var(--accent)}
.rklist{counter-reset:none}
.rkme{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.rkme .ranks{margin-top:6px}
#rkMore{margin-top:12px;width:100%}
.rkprev{margin-top:16px}
@media (max-width:420px){ #bHelp{display:none} }

/* =====================================================================
   Düello: lobi kartı, hızlı eşleşme, bot kartları, VS tablosu, giriş, sonuç
   ===================================================================== */
body.in-lobby #kb,body.in-lobby #bSuggest{display:none!important}
/* Lobi oyuncu kartı */
.dhero{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 85%,#000) 0%,#1d1f2b 70%);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);position:relative;overflow:hidden}
.dhero::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent);pointer-events:none}
.dh-l{position:relative;flex:none}
.dh-l .dh-tier{position:absolute;right:-8px;bottom:-6px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.dh-m{min-width:0;flex:1;display:grid;gap:4px}
.dh-m .eyebrow{color:rgba(255,255,255,.75)}
.dh-m>b{font:800 1.35rem/1.1 var(--f-display);display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dh-edit{border:0;background:rgba(255,255,255,.14);border-radius:8px;padding:2px 6px;cursor:pointer;font-size:.8rem}
.dh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:4px}
.dh-stats span{display:grid;gap:1px;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border-radius:10px;padding:6px 6px 5px;text-align:center}
.dh-stats em{font:800 .92rem/1.1 var(--f-mono);font-style:normal;color:#fff;text-transform:none;letter-spacing:0;white-space:nowrap}
.dh-stats em i{font-style:normal;font-size:.6rem;opacity:.7;margin-left:1px}
.dlede{margin-top:-6px}
/* Hızlı eşleşme */
.qmatch{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:0;border-radius:16px;cursor:pointer;color:#fff;text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 92%,#fff),color-mix(in srgb,var(--accent) 70%,#000));box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 50%,#000),0 10px 24px -10px var(--accent);transition:transform .12s}
.qmatch:hover{transform:translateY(-1px)}
.qmatch:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 50%,#000)}
.qicon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.18)}
.qicon svg{width:26px;height:26px}
.qtxt{flex:1;min-width:0;display:grid;gap:2px}
.qtxt b{font:800 1.2rem/1 var(--f-display)}
.qtxt small{font-size:.74rem;opacity:.85}
.qgo{font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.2);white-space:nowrap}
.radar{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center}
.radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:radar 1.8s ease-out infinite}
.radar i:nth-child(2){animation-delay:.9s}
@keyframes radar{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.35);opacity:0}}
#qSec{font:600 .78rem var(--f-mono);color:var(--muted)}
/* Bot kartları */
.botb{padding:10px 4px 8px;gap:2px;transition:transform .12s,box-shadow .12s}
.botb:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px var(--bc)}
.bface{font-size:1.5rem;line-height:1.1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.bdiff{display:flex;gap:2px;margin:2px 0 1px}
.bdiff i{width:6px;height:6px;border-radius:2px;background:color-mix(in srgb,var(--bc) 25%,var(--line))}
.bdiff i.on{background:var(--bc);box-shadow:0 0 4px var(--bc)}
.botb em{font-style:normal;font-size:.62rem;font-weight:700;color:var(--bc)}
.botb>i{display:none}
/* VS skor tablosu */
#opp.opp{display:block;padding:8px 10px 0;overflow:visible}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:8px}
.vside{display:grid;gap:5px;min-width:0;padding:4px;border-radius:10px;transition:background .3s,box-shadow .3s}
.vside.lead{background:color-mix(in srgb,var(--ok) 12%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ok) 55%,transparent)}
.vtop{display:flex;align-items:center;gap:6px;min-width:0}
.vside.op .vtop{justify-content:flex-end;text-align:right}
.vside .who{display:grid;min-width:0;flex:0 1 auto}
.vside .who b{font:800 .88rem/1.15 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vside .vst{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vside.op .ogrid{justify-self:end}
.vside .ogrid{gap:1px}
.vside .orow{gap:1px}
.vside .orow i{width:8px;height:6px;border-radius:1.5px}
.vside.ping{animation:vping .6s ease-out}
@keyframes vping{0%{box-shadow:inset 0 0 0 2px var(--near)}100%{box-shadow:inset 0 0 0 2px transparent}}
.vmid{display:grid;justify-items:center;gap:1px;padding-top:2px}
.vmid .eyebrow{font-size:.58rem;white-space:nowrap}
.vclock{font:800 1.7rem/1 var(--f-mono);letter-spacing:-.02em}
.vclock.low{color:var(--danger);animation:pulse 1s infinite}
.vlen{font-size:.66rem;color:var(--muted)}
.vbar{height:4px;margin:8px -10px 0;background:color-mix(in srgb,var(--line) 70%,transparent);border-radius:0 0 12px 12px;overflow:hidden}
.vbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ok),var(--near));transition:width .25s linear}
.vbar.low i{background:var(--danger)}
.vside.op .emo{position:absolute;right:6px;top:-12px}
#opp{position:relative}
.vside.op{position:relative}
.vside.op .emo .emo-b{width:30px;height:30px;background:var(--surface);border:1px solid var(--line);border-radius:50%}
.vside.op .emo .emo-b svg{width:18px;height:18px}
.vside.op .bub{position:absolute;right:0;top:100%;z-index:8}
/* Başlangıç girişi */
#vsIntro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 80%,transparent),color-mix(in srgb,var(--bg) 35%,transparent));animation:celIn .2s ease-out}
#vsIntro.out{opacity:0;transition:opacity .35s}
.vsbox{display:grid;justify-items:center;gap:10px}
.vskind{font:700 .74rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vsrow{display:flex;align-items:center;gap:18px}
.vsp{display:grid;justify-items:center;gap:4px;max-width:130px}
.vsp b{font:800 1.05rem var(--f-display);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsp small{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--muted)}
.vsp.l{animation:vsL .45s cubic-bezier(.2,1.4,.4,1) both}
.vsp.r{animation:vsR .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes vsL{from{transform:translateX(-60px);opacity:0}}
@keyframes vsR{from{transform:translateX(60px);opacity:0}}
.vsx{font:900 2.4rem/1 var(--f-display);font-style:italic;background:linear-gradient(180deg,#FFD24A,#FF6A3D);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));animation:celPop .5s cubic-bezier(.2,1.6,.4,1) .15s both}
.vscount{font:900 3rem/1 var(--f-display);color:var(--ink)}
.vscount.pop{animation:celPop .35s cubic-bezier(.2,1.6,.4,1)}
.vscount.go{color:var(--ok);animation:celPop .35s cubic-bezier(.2,1.6,.4,1)}
@media (prefers-reduced-motion:reduce){.vsp.l,.vsp.r,.vsx,.vscount.pop,.vscount.go,.radar i{animation:none}}
/* Sonuç ekranı */
.dres{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;margin-bottom:12px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.dres.win{--c1:#3E8E41;--c2:#1F5F2A}.dres.loss{--c1:#B33A3A;--c2:#6E1F1F}.dres.draw{--c1:#8A7A2A;--c2:#4F4718}.dres.cancel{--c1:#55565E;--c2:#2E2F35}
.dicon{font-size:2.4rem;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));animation:celPop .6s cubic-bezier(.2,1.6,.4,1) both}
.dres b{font:800 1.5rem/1.1 var(--f-display)}
.dres p{margin:3px 0 0;font-size:.86rem;opacity:.92}
.answers .ans .eyebrow{display:block;margin-bottom:4px}
.drew{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.drew span{font-weight:800;font-size:.84rem;padding:6px 10px;border-radius:999px;background:var(--key)}
.drew .pos{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.drew .neg{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.dsum{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:start;margin-top:12px}
.dcol{display:grid;gap:3px;justify-items:center;padding:10px 6px;border-radius:14px;border:1px solid var(--line);min-width:0}
.dcol.won{border-color:color-mix(in srgb,var(--ok) 60%,var(--line));background:color-mix(in srgb,var(--ok) 8%,transparent)}
.dwho{display:grid;justify-items:center;gap:2px;margin-bottom:4px;min-width:0;max-width:100%}
.dwho b{font-size:.86rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwho small{font-size:.7rem;color:var(--muted)}
.dcol .mini.sm{gap:2px}.dcol .mini.sm span{width:17px;height:17px;font-size:.62rem}
.dvs{align-self:center;font:900 1.1rem var(--f-display);font-style:italic;color:var(--muted)}
/* Skor tablosu düzeltmeleri: arma adın satırında, tepki düğmesi ortada */
.vside .who b{display:flex;align-items:center;gap:4px;min-width:0}
.vside .who b .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vside.op .who{justify-items:end}
.vside .vtop .av{flex:none}
.vmid .emo{margin-top:2px}
.vmid .emo .emo-b{width:30px;height:30px;border-radius:50%;background:var(--key)}
.vmid .emo .emo-b svg{width:18px;height:18px}
.vmid .emo-pop{right:auto;left:50%;transform:translateX(-50%)}
@media (max-width:420px){
  .dhero{padding:12px;gap:10px}
  .dh-l .av.lg{--s:54px}
  .dh-m>b{font-size:1.15rem}
  .dh-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .dh-stats span{grid-template-columns:auto 1fr;align-items:baseline;text-align:left;gap:6px;padding:5px 7px}
  .dh-stats em{font-size:.84rem}
  .vclock{font-size:1.4rem}
  .vmid .eyebrow{font-size:.52rem}
}

/* ---------- Yan panel: sezon sıralaması (yalnızca geniş ekranlarda, oyun sütununun sağında) ---------- */
.sideboard{display:none}
@media (min-width:1480px){
  .sideboard{--gold:#E2B33C;--silver:#AEB6C2;--bronze:#C98A4B;
    display:flex;flex-direction:column;gap:8px;position:fixed;z-index:5;top:72px;left:calc(50% + 380px + 32px);width:min(390px,calc(50vw - 380px - 56px));max-height:calc(100vh - 96px);
    padding:14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
}
.sbhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:2px 2px 4px}
.sbhead>b{font:800 .95rem/1.2 var(--f-display)}
.sbhelp{flex:none;width:20px;height:20px;border-radius:50%;border:0;padding:0;background:#8B5CF6;color:#fff;font:800 .72rem/1 var(--f-body);cursor:pointer}
.sbend{margin-left:auto;font-size:.74rem;color:var(--muted);white-space:nowrap}.sbend b{color:var(--ink);font-variant-numeric:tabular-nums}
.sbinfo{margin:0;font-size:.78rem;color:var(--muted);background:var(--bg);border-radius:10px;padding:8px 10px}
.sblist{list-style:none;margin:0;padding:0;display:grid;gap:6px;overflow-y:auto;min-height:0}
.sbrow{width:100%;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--raise) 45%,var(--surface));cursor:pointer;text-align:left;transition:transform .12s,border-color .12s}
.sbrow:hover{transform:translateX(-2px);border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.sbrow.t1{--c:var(--gold)}.sbrow.t2{--c:var(--silver)}.sbrow.t3{--c:var(--bronze)}
.sbrow.t1,.sbrow.t2,.sbrow.t3{border-color:var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,var(--surface)),color-mix(in srgb,var(--c) 6%,var(--surface)));padding-block:9px}
.sbrow.me{box-shadow:inset 0 0 0 1.5px var(--accent)}
.sbrk{flex:none;width:22px;text-align:center;font:800 .82rem/1 var(--f-display);color:var(--muted)}
.t1 .sbrk,.t2 .sbrk,.t3 .sbrk{height:22px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#1a1a1a}
.sbav{position:relative;flex:none;display:grid}
.sbon{position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--surface)}
.sbtier{flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 7px 2px 3px;border-radius:99px;border:1px solid var(--line);background:var(--bg);font:800 .68rem/1 var(--f-body);color:var(--muted)}
.sbname{flex:1;min-width:0;font-weight:800;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbd{flex:none;font:800 .68rem/1 var(--f-body);padding:3px 6px;border-radius:7px}
.sbd.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.sbd.dn{color:var(--miss);background:color-mix(in srgb,var(--miss) 16%,transparent)}
.sbpts{flex:none;display:grid;justify-items:end;line-height:1.15}
.sbpts b{font:800 .9rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}.t1 .sbpts b{color:var(--gold)}
.sbpts small{font-size:.68rem;color:var(--muted)}
.sbsep{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:2px 4px 0}
.sbempty{margin:6px 0;font-size:.85rem;color:var(--muted);text-align:center}
.sbmore{width:100%;padding:10px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--raise) 45%,var(--surface));font-weight:800;font-size:.82rem;cursor:pointer}
.sbmore:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}

/* Sıralama: satırın tamamı tıklanır */
.ranks li.clk{cursor:pointer;border-radius:10px;transition:background .15s}
.ranks li.clk:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* Oyuncu kartı: ünvan vitrini */
.tvault{margin-top:16px;padding:14px;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--near) 12%,var(--key)),var(--key) 55%);border:1px solid color-mix(in srgb,var(--near) 28%,var(--line))}
.tvhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tvhead>b{font:800 1.02rem/1.2 var(--f-display)}
.tvcount{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tvcount b{font-size:1.05rem;color:var(--near)}
.tvault .pbar i{background:linear-gradient(90deg,var(--near),color-mix(in srgb,var(--near) 55%,#fff))}
.tvdet{display:flex;align-items:center;gap:14px;margin:12px 0;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);min-height:92px}
.tvdet.pop{animation:tvPop .32s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tvPop{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.tvmed{position:relative;flex:none;width:68px;height:68px;display:grid;place-items:center}
.tvmed::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--near) 45%,transparent),transparent 68%)}
.tvmed .emb{position:relative;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.tvmed.off::before{display:none}
.tvmed.off .emb{filter:grayscale(1) brightness(.75);opacity:.55}
.tvtxt{display:grid;gap:3px;min-width:0}
.tvtxt>b{font:800 1.1rem/1.15 var(--f-display)}
.tvtxt>span:not(.tvstate){font-size:.82rem;color:var(--muted)}
.tvwhen{font-size:.74rem;color:var(--muted)}
.tvstate{justify-self:start;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.tvstate.eq{background:var(--near);color:#1b1500}
.tvstate.own{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.tvstate.lock{background:var(--line);color:var(--muted)}
.tvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.tv{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 4px 7px;border-radius:12px;border:1.5px solid transparent;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;transition:transform .15s,border-color .15s}
.tv:hover{transform:translateY(-2px)}
.tv[aria-pressed="true"]{border-color:var(--near);box-shadow:0 0 0 3px color-mix(in srgb,var(--near) 22%,transparent)}
.tv small{font-size:.66rem;font-weight:700;line-height:1.15;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tvimg{position:relative;display:grid;place-items:center}
.tv.own .emb{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.tv.lock{background:transparent;border-style:dashed;border-color:var(--line)}
.tv.lock .emb{filter:grayscale(1) brightness(.7);opacity:.4}
.tv.lock small{color:var(--muted)}
.tv.lock[aria-pressed="true"]{border-style:solid}
.tvlock{position:absolute;right:-4px;bottom:-2px;font-size:.8rem;font-style:normal}
.tv.eq::after{content:"Takılı";position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-size:.56rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:var(--near);color:#1b1500}
@media (prefers-reduced-motion:reduce){.tvdet.pop{animation:none}.tv:hover{transform:none}}

/* Bilgi çubuğunda hızlı zor mod anahtarı */
.hardsw{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 6px;border-radius:10px;border:1.5px solid var(--line);background:var(--key);color:var(--muted);font:800 .78rem var(--f-body);letter-spacing:.02em;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.hardsw:hover{border-color:color-mix(in srgb,var(--miss) 55%,var(--line));color:var(--ink)}
.hardsw .hk{position:relative;width:28px;height:16px;border-radius:999px;background:var(--line);transition:background .2s}
.hardsw .hk i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.hardsw[aria-pressed="true"]{background:color-mix(in srgb,var(--miss) 16%,var(--key));border-color:var(--miss);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--miss) 18%,transparent)}
.hardsw[aria-pressed="true"] .hk{background:var(--miss)}
.hardsw[aria-pressed="true"] .hk i{transform:translateX(12px)}
.hardsw[aria-pressed="true"] b::before{content:"💪 "}
.badge.hard{background:var(--miss)}
/* Dar ekranda yalnızca 💪 simgesi: açıkken kırmızı dolgu */
@media (max-width:420px){
  .hardsw{width:34px;height:34px;padding:0;justify-content:center;gap:0}
  .hardsw .hk,.hardsw b{display:none}
  .hardsw::before{content:"💪";font-size:1rem;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
  .hardsw[aria-pressed="true"]::before{filter:none;opacity:1}
  .lens button{width:27px}
}

/* Ünvan vitrini: kademe ve nadirlik etiketleri, zor ünvanların parıltısı */
.tvchips{display:flex;flex-wrap:wrap;gap:4px}
.tvtier,.tvrare{font:800 .6rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;font-style:normal}
.tvtier.t0{background:linear-gradient(135deg,#F2B987,#A8642E);color:#2B1404}
.tvtier.t1{background:linear-gradient(135deg,#FFFFFF,#AEB8C8);color:#26303D}
.tvtier.t2{background:linear-gradient(135deg,#FFF3B0,#E8B020);color:#3D2800}
.tvrare.r-nadir{background:#2F7FD0;color:#fff}
.tvrare.r-destansi{background:linear-gradient(135deg,#B678FF,#6A2FC4);color:#fff}
.tvrare.r-efsanevi{background:linear-gradient(135deg,#FFE27A,#E39B00);color:#3D2800}
.tvrare.r-zor{background:color-mix(in srgb,var(--miss) 85%,#000);color:#fff}
.tv .tvtier{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:.5rem;padding:2px 5px;white-space:nowrap}
.tv.zor{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--near) 22%,var(--surface)),var(--surface) 70%);border-color:color-mix(in srgb,var(--near) 45%,transparent)}
.tv.zor[aria-pressed="true"]{border-color:var(--near)}
.tv.sp-nadir.own{box-shadow:inset 0 0 0 1px #2F7FD0}
.tv.sp-destansi.own{box-shadow:inset 0 0 0 1px #9A5CF0;background:radial-gradient(circle at 50% 35%,rgba(182,120,255,.22),var(--surface) 70%)}
.tv.sp-efsanevi.own{box-shadow:inset 0 0 0 1px #E3A400;background:radial-gradient(circle at 50% 35%,rgba(255,200,40,.25),var(--surface) 70%)}
.tvgrid{row-gap:12px}
.tpick small{margin-left:4px;font-size:.62rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* Dereceler: haftalık ve sezonluk madalyalar */
.medals{margin-top:12px;padding:14px;border-radius:18px;background:var(--key);border:1px solid var(--line)}
.medals .lede{margin:6px 0 0}
.mdgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.md{display:grid;justify-items:center;gap:2px;width:68px;padding:6px 2px;border-radius:12px;background:var(--surface)}
.md img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.md small{font-size:.6rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.15}

/* Hesap zorunlu: giriş ekranı (oyunun üstünde, çerez çubuğunun altında) */
#gate{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:20px 16px;overflow-y:auto;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px)}
.gatecard{width:min(400px,100%);display:grid;gap:12px;justify-items:center;text-align:center;padding:28px 22px 22px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);animation:celIn .3s ease-out}
.gatelogo{display:block;width:120px;height:120px;object-fit:cover;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.gatecard h2{margin:0;font:800 1.55rem/1.15 var(--f-display)}
.gatecard>p{margin:0;color:var(--muted);line-height:1.5;font-size:.9rem}
.gateseg{width:100%}
.gateseg button{flex:1}
.gatecard .aform{width:100%;text-align:left}
.gatecard .aform .btn{width:100%}
.gatenote{margin:0;font-size:.8rem;color:var(--ink);padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.gerr{margin:0;font-size:.82rem;font-weight:700;color:var(--miss)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid #DADCE0;background:#fff;color:#1F1F1F;font:600 .92rem var(--f-body);cursor:pointer}
.gbtn:hover{background:#F8F9FA;border-color:#C6C9CC}
.gbtn svg{flex:none}
.gor{display:flex;align-items:center;gap:10px;width:100%;color:var(--muted);font-size:.78rem}
.gor::before,.gor::after{content:"";flex:1;height:1px;background:var(--line)}
.lockcard .gbtn{margin-bottom:10px}

/* Profildeki avatar: dokununca fotoğraf seçilir */
.avedit{position:relative;display:inline-grid;cursor:pointer;border:0;padding:0;background:none;border-radius:50%;-webkit-tap-highlight-color:transparent}
.avedit input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.avedit .av{transition:transform .15s,box-shadow .15s}
.avedit:hover .av,.avedit:focus-within .av{transform:scale(1.04);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}
.avcam{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--accent);border:3px solid var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.editpreview .linkbtn{margin-top:8px}