/* Numeroloji Arenası · ortak oyun stilleri (site.css değişkenlerini kullanır) */
.arena{--mor:#5B3FA8;--mor-2:#7C5CD6;--parilti:rgba(221,180,90,.35)}
.arena .page{max-width:var(--wide)}
.ar-hero{position:relative;text-align:center;padding:2.2rem 1rem 1.4rem;overflow:hidden}
.ar-hero::before{content:"";position:absolute;inset:-40% -10% auto;height:120%;background:radial-gradient(closest-side,rgba(124,92,214,.35),transparent 70%);pointer-events:none}
.ar-hero::after{content:"";position:absolute;left:50%;top:10%;width:18rem;height:18rem;transform:translateX(-50%);background:radial-gradient(closest-side,var(--parilti),transparent 70%);pointer-events:none;opacity:.6}
.ar-hero>*{position:relative}
.ar-kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2);margin:0 0 .5rem}
.ar-hero h1{font-family:"Fraunces",var(--display);font-weight:600;font-size:clamp(2rem,6.5vw,3.4rem);line-height:1.05;margin:0 0 .6rem;background:linear-gradient(180deg,#FFF3D2,#F1CF7E 55%,#C99A3E);-webkit-background-clip:text;background-clip:text;color:transparent}
.ar-hero p{color:var(--mist);max-width:36rem;margin:0 auto;font-size:1.05rem}

/* Oyuncu paneli */
.ar-panel{display:grid;gap:1rem;grid-template-columns:1fr;background:linear-gradient(135deg,rgba(91,63,168,.28),rgba(32,27,68,.9));border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.25rem;margin:1rem 0 1.6rem;box-shadow:0 10px 40px rgba(0,0,0,.25)}
@media(min-width:48rem){.ar-panel{grid-template-columns:1.2fr 1fr}}
.ar-oyuncu{display:flex;gap:1rem;align-items:center}
.ar-avatar{flex:none;width:4.2rem;height:4.2rem;border-radius:50%;display:grid;place-items:center;font-family:"Fraunces",var(--display);font-size:1.9rem;color:var(--night);background:radial-gradient(circle at 35% 30%,#FFF1C8,var(--brass) 60%,#A7782B);box-shadow:0 0 0 3px rgba(241,207,126,.25),0 0 24px var(--parilti)}
.ar-oyuncu h2{margin:0;font-size:1.25rem}
.ar-oyuncu p{margin:.15rem 0 .5rem;color:var(--mist);font-size:.92rem}
.oy-ray{height:.7rem;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.oy-ray i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mor-2,#7C5CD6),var(--brass) 70%,var(--brass-2));box-shadow:0 0 12px var(--parilti);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.ar-xp{display:flex;justify-content:space-between;font-size:.85rem;color:var(--mist);margin-top:.35rem}
.ar-xp b{color:var(--brass-2);font-variant-numeric:tabular-nums}
.ar-gorevler h3,.ar-rozetler h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2);margin:0 0 .55rem;font-family:var(--sans)}
.ar-gorevler ul{list-style:none;margin:0;padding:0}
.ar-gorevler li{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;font-size:.95rem;color:var(--paper)}
.ar-gorevler li::before{content:"";flex:none;width:1.05rem;height:1.05rem;margin-top:.18rem;border-radius:5px;border:1.5px solid var(--brass)}
.ar-gorevler li.bitti{color:var(--mist);text-decoration:line-through}
.ar-gorevler li.bitti::before{background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231B1738' stroke-width='2.4'/%3E%3C/svg%3E") center/80% no-repeat}
.ar-gorevler small{margin-left:auto;color:var(--brass-2);white-space:nowrap}
.ar-seri{font-size:.88rem;color:var(--mist);margin:.5rem 0 0}
.ar-rozetler{grid-column:1/-1}
.ar-rozet-liste{display:flex;flex-wrap:wrap;gap:.5rem}
.ar-rozet{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem .35rem .4rem;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.85rem;color:var(--dim)}
.ar-rozet i{font-style:normal;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;background:var(--night-3);color:var(--dim)}
.ar-rozet.var{color:var(--paper);border-color:rgba(221,180,90,.55)}
.ar-rozet.var i{background:radial-gradient(circle at 35% 30%,#FFF1C8,var(--brass));color:var(--night);font-weight:700}

/* Kategori kartları */
.ar-izgara{display:grid;gap:1rem;grid-template-columns:1fr;margin:1rem 0 2rem}
@media(min-width:40rem){.ar-izgara{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.ar-izgara{grid-template-columns:1fr 1fr 1fr}}
.ar-kart{--c:var(--brass);position:relative;display:flex;flex-direction:column;gap:.55rem;min-height:15rem;padding:1.35rem 1.3rem 1.2rem;border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),var(--night-2);color:var(--paper);text-decoration:none;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.ar-kart::before{content:"";position:absolute;right:-3rem;top:-3rem;width:11rem;height:11rem;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 45%,transparent),transparent);opacity:.55;pointer-events:none}
.ar-kart.aktif{border-color:color-mix(in srgb,var(--c) 70%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent),0 14px 40px rgba(0,0,0,.35)}
a.ar-kart:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--c),0 18px 44px rgba(0,0,0,.4)}
.ar-ikon{width:3.4rem;height:3.4rem;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--c) 35%,transparent)}
.ar-ikon svg{width:1.9rem;height:1.9rem;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ar-kart h3{margin:.2rem 0 0;font-family:"Fraunces",var(--display);font-size:1.45rem;font-weight:600}
.ar-kart p{margin:0;color:var(--mist);font-size:.97rem}
.ar-etiket{position:absolute;top:1.1rem;right:1.1rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:99px;border:1px solid var(--line);color:var(--mist);background:rgba(0,0,0,.2)}
.ar-kart.aktif .ar-etiket{color:var(--night);background:var(--brass-2);border-color:var(--brass-2)}
.ar-kart .ar-alt{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.9rem}
.ar-kart .ar-alt .btn{min-height:2.6rem}
.ar-kart.yakinda{opacity:.88}
.ar-kart.yakinda .ar-alt a{color:var(--brass-2)}
.ar-en-iyi{color:var(--mist);font-size:.85rem}

/* Bildirim balonları (XP / rozet) */
.oy-bildirim{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:.4rem;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.in-app .oy-bildirim{bottom:calc(4.4rem + env(safe-area-inset-bottom))}
.oy-balon{padding:.55rem 1rem;border-radius:99px;font-weight:600;font-size:.95rem;color:var(--night);background:linear-gradient(90deg,var(--brass-2),var(--brass));box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 18px var(--parilti,rgba(221,180,90,.35));animation:oyBalon .35s cubic-bezier(.2,.9,.3,1.3)}
.oy-balon.rozet{background:linear-gradient(90deg,#B9A3FF,#7C5CD6);color:#fff}
.oy-balon.seviye{background:linear-gradient(90deg,#FFF3D2,#F1CF7E);font-size:1.05rem}
.oy-balon.cik{opacity:0;transform:translateY(8px);transition:.45s}
@keyframes oyBalon{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.oy-balon{animation:none}.ar-kart,.oy-ray i{transition:none}}
.ar-sifirla{background:none;border:0;color:var(--dim);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;padding:.3rem 0}
