/* ============ SKİN KARTLARI — CS2 esintili yatay tema ============ */
:root {
  --bg: #0f1115; --bg2: #14171d; --panel: #171a21; --panel2: #1e222b; --line: #2a2f3a; --line2: #ffffff10;
  --txt: #e6e8eb; --mut: #8b93a1; --acc: #f0b232; --acc2: #ffd46b; --teal: #3ad0c6; --ok: #4cd07d; --err: #ff5a5a; --ct: #5b9bff; --t: #f0a830;
  --r: 10px; --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: var(--body); font-size: 13px; overflow: hidden; overscroll-behavior: none; }
body { user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; color: var(--txt); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; outline: none; }
input:focus, select:focus { border-color: var(--acc); }
h1, h2, h3 { font-family: var(--head); margin: 0; letter-spacing: .6px; font-weight: 600; text-transform: uppercase; }
h2 { font-size: 21px; } h3 { font-size: 15px; color: #cfd4dc; }
h3 small { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 11px; }
img { -webkit-user-drag: none; }
.center { text-align: center; } .muted { color: var(--mut); } .small { font-size: 11px; } .ok { color: var(--ok); } .err { color: var(--err); }
.empty { text-align: center; color: var(--mut); padding: 30px 16px; }
[hidden] { display: none !important; }

/* ---------- sahne ve yatay zorlama ---------- */
#stage { position: fixed; top: 0; left: 0; width: var(--W, 100vw); height: var(--H, 100vh); overflow: hidden;
  background: linear-gradient(180deg, #161a22 0%, var(--bg) 220px), var(--bg); }
#stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(700px 300px at 85% -80px, #f0b23214, transparent 70%), radial-gradient(600px 300px at 10% -100px, #3ad0c610, transparent 70%); }
html.force-land #stage { transform: rotate(90deg) translateY(-100%); transform-origin: top left; }
/* üst bar ve menü: dosya sonundaki "DÜZEN v2" bölümünde */

/* ---------- görünüm ---------- */
#view > * { animation: fadeUp .2s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } }
#view::-webkit-scrollbar { width: 6px; } #view::-webkit-scrollbar-thumb { background: #ffffff1a; border-radius: 3px; }

/* ---------- butonlar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 4px; font: 600 14px var(--head); letter-spacing: 1px; background: #ffffff0c; border: 1px solid #ffffff1a; transition: transform .1s, opacity .2s, background .15s, filter .15s; text-transform: uppercase; white-space: nowrap; color: var(--txt); }
.btn:hover:not(:disabled) { background: #ffffff16; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; }
.btn.primary { background: linear-gradient(180deg, #f6c04d, #e39b1c); color: #1e1302; border-color: #ffd47a; box-shadow: 0 2px 12px #f0b23233; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(180deg, #f6c04d, #e39b1c); }
.btn.ghost { background: transparent; border-color: #ffffff22; }
.btn.sell { background: linear-gradient(180deg, #4cd07d, #2ea860); color: #04210f; border-color: #8ff0b6; }
.btn.danger { background: #ff5a5a1c; border-color: #ff5a5a66; color: #ff9a9a; }
.btn.big { padding: 11px 20px; font-size: 16px; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.rl-ct { background: linear-gradient(180deg, #5b9bff, #3570e0); border-color: #8fb8ff; color: #fff; }
.btn.rl-t { background: linear-gradient(180deg, #f6c04d, #e39b1c); border-color: #ffd98f; color: #2a1800; }
.btn.rl-b { background: linear-gradient(180deg, #4cd07d, #2ea860); border-color: #8ff0bb; color: #03210f; }
.btn-row { display: flex; gap: 8px; margin: 8px 0; } .btn-row .btn { flex: 1; }
.link { color: var(--acc); font: 600 13px var(--head); letter-spacing: .8px; text-transform: uppercase; }
.back { color: var(--mut); font: 600 13px var(--head); letter-spacing: 1px; text-transform: uppercase; padding: 0 0 6px; text-align: left; }
.toggle { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12px; }
.toggle input, input[type=checkbox] { accent-color: var(--acc); width: 16px; height: 16px; }

/* ---------- paneller ---------- */
.panel { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); padding: 12px; margin-top: 10px; }
.panel-h, .row-h { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; gap: 8px; }
.row-h:first-child, .panel > .panel-h:first-child { margin-top: 0; }
.sec-title { margin: 14px 0 7px; font-size: 15px; }
.pbar { height: 4px; background: #ffffff12; border-radius: 2px; overflow: hidden; }
.pbar.big { height: 7px; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); border-radius: 2px; transition: width .5s; }
.seg { display: inline-flex; gap: 2px; border-bottom: 1px solid var(--line2); margin-bottom: 12px; }
.seg button { padding: 8px 14px; font: 600 14px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--mut); position: relative; white-space: nowrap; }
.seg button:hover { color: var(--txt); }
.seg button.on { color: var(--txt); }
.seg button.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--acc); }
.seg.scroll { display: flex; overflow-x: auto; scrollbar-width: none; } .seg.scroll::-webkit-scrollbar { display: none; }
.seg .dot { top: 4px; right: 2px; width: 6px; height: 6px; }
.seg.small { border: 0; background: #ffffff08; border-radius: 4px; padding: 2px; margin: 0; } .seg.small button { padding: 5px 10px; font-size: 12px; border-radius: 3px; } .seg.small button.on { background: #ffffff14; } .seg.small button.on::after { display: none; }
.tab-body > .seg { margin-bottom: 10px; }
.chips { display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 4px 11px; border-radius: 3px; background: #ffffff08; border: 1px solid #ffffff14; font: 600 12px var(--head); letter-spacing: .6px; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.chip.on { background: #f0b2321c; border-color: var(--acc); color: var(--acc2); }
.hscroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.hscroll > * { flex: none; width: 128px; scroll-snap-align: start; }

/* ============ KART (CS2 envanter karosu) ============ */
.card { --rc: #4b69ff; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 1 / 1.12; perspective: 700px; cursor: pointer; container-type: inline-size; }
.card-in { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; padding: 6% 7% 0;
  background: linear-gradient(180deg, #1d212a 0%, #1a1e26 52%, color-mix(in srgb, var(--rc) 30%, #1a1e26) 100%);
  border: 1px solid #ffffff12; box-shadow: 0 4px 10px #0006; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out, border-color .15s; transform-style: preserve-3d; }
.card:hover .card-in { border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
.card-in::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rc); box-shadow: 0 0 10px var(--rc); }
.card-top { display: none; position: absolute; top: 4%; left: 6%; right: 6%; justify-content: space-between; z-index: 2; }
.show-pow .card-top, .deck-slots .card-top, .deck-row .card-top, .hand .card-top, .slot .card-top { display: flex; }
.card .cat { display: none; }
.card .pow { margin-left: auto; font: 700 max(8px, 10cqw) var(--head); color: var(--acc2); text-shadow: 0 0 6px #000; }
.card-img { flex: 1; display: grid; place-items: center; min-height: 0; position: relative; z-index: 1; }
.card-img img { width: 104%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px #000b); transition: transform .25s; }
.card:hover .card-img img { transform: scale(1.04); }
.card-name { display: flex; flex-direction: column; line-height: 1.12; position: relative; z-index: 1; min-width: 0; }
.card-name b { font: 600 max(8px, 9cqw) var(--body); color: #c4cad3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-name span { font: 600 max(8px, 9.5cqw) var(--body); color: #f1f3f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot { display: flex; justify-content: space-between; align-items: center; padding: 3% 0 8%; position: relative; z-index: 1; }
.card .wear { font: 600 max(7px, 8cqw) var(--head); color: var(--mut); letter-spacing: .5px; }
.card .val { font: 600 max(8px, 9.5cqw) var(--head); color: var(--acc2); white-space: nowrap; }
.st-badge { position: absolute; top: 5%; left: 6%; font: 700 max(6px, 7.5cqw) var(--head); color: #cf6a32; z-index: 2; letter-spacing: .4px; }
.st-badge.sv { color: #e6d38a; left: auto; right: 6%; }
.fav-badge { position: absolute; top: 4%; right: 6%; color: #ff5c8a; font-size: max(9px, 10cqw); z-index: 2; }
.shine { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx) var(--my), #ffffff22 0%, transparent 45%); mix-blend-mode: overlay; pointer-events: none; z-index: 3; }
.holo { display: none; }
.card.r6 .holo, .card.r7 .holo { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .22;
  background: linear-gradient(115deg, transparent 30%, #ffd24a 42%, #fff6c8 48%, #ffd24a 54%, transparent 66%); background-size: 300% 300%; animation: holo 5s linear infinite; }
@keyframes holo { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.card.r6 .card-in, .card.r7 .card-in { background: linear-gradient(180deg, #2a2412 0%, #1e1a10 50%, #5a4510 100%); border-color: #ffd24a55; }
.card:active .card-in { transform: scale(.97); }
.card.sel .card-in { outline: 2px solid var(--ok); outline-offset: -2px; }
.card.sel::after { content: '✓'; position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #03210f; display: grid; place-items: center; font-weight: 800; z-index: 5; font-size: 11px; }
.card.in-deck::before { content: '⚔'; position: absolute; top: 4%; right: 6%; z-index: 4; font-size: 11px; color: var(--teal); }
.card.rental .card-in { opacity: .7; } .card.rental::after { content: 'KİRALIK'; position: absolute; top: 40%; left: 0; right: 0; text-align: center; font: 700 10px var(--head); background: #000a; color: var(--mut); z-index: 5; }
.card.unseen .card-img img { filter: grayscale(.7) brightness(.75); }
.card.silhouette .card-img img { filter: brightness(0) drop-shadow(0 0 1px #ffffff40); opacity: .5; }
.card.silhouette .card-name span, .card.silhouette .wear { opacity: .5; }
.card.big { width: min(200px, calc(var(--H, 400px) * .42)); margin: 0 auto; }
.card[class*="tb"] .card-in { border-top: 2px solid transparent; }
.card.tb4 .card-in { border-top-color: #ffd24a; } .card.tb5 .card-in { border-top-color: #3bf0ff; box-shadow: 0 0 14px #3bf0ff44; }
.rare-mystery .card-in { align-items: center; justify-content: center; }
.rare-q, .gold-q { font: 700 50px var(--head); color: var(--acc2); text-shadow: 0 0 20px #ffd24a; animation: glowPulse 1.5s infinite; }
@keyframes glowPulse { 50% { text-shadow: 0 0 40px #ffd24a, 0 0 6px #fff; transform: scale(1.06); } }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.deck-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 560px; }
/* ============ MODAL ============ */
.modal-wrap { position: absolute; inset: 0; background: #000000b5; backdrop-filter: blur(4px); z-index: 50; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; padding: 10px; }
.modal-wrap.in { opacity: 1; } .modal-wrap.out { opacity: 0; }
.modal { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; background: linear-gradient(180deg, #19233a, #10161f); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; transform: scale(.94); transition: transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.modal-wrap.in .modal { transform: none; }
.modal-wrap.wide .modal { width: min(900px, 100%); }
.modal-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: #ffffff10; color: var(--mut); font-size: 14px; z-index: 2; }
.modal-title { text-align: center; margin: 0 30px 10px; font-size: 20px; }
.modal-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 28%; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 13px; }
.modal-actions:empty { display: none; }
.modal-wrap.reward .modal { text-align: center; background: radial-gradient(circle at 50% 20%, #3a2c0a, #131a26 70%); border-color: #ffd24a66; width: min(440px, 100%); }
.reward-pop { position: relative; padding: 8px 0; }
.rw-burst { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px; background: repeating-conic-gradient(#ffd24a22 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 10s linear infinite; pointer-events: none; mask: radial-gradient(circle, #000 30%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.rw-list { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; position: relative; }
.rw { background: #00000055; border: 1px solid #ffffff1a; border-radius: 9px; padding: 4px 9px; font: 700 13px var(--head); white-space: nowrap; }
.reward-pop .rw { font-size: 18px; padding: 8px 12px; animation: pop .4s backwards; }
.gift-card { margin-top: 10px; }
.lu { text-align: center; padding: 6px 0; }
.lu-ring { width: 90px; height: 90px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font: 700 44px var(--head); color: #241300; background: radial-gradient(circle, #ffe08a, #ff9a1f); box-shadow: 0 0 40px #ff9a1f, inset 0 -6px 0 #0003; animation: pop .5s; }
.lu h2 { font-size: 24px; color: var(--acc2); } .lu p { color: var(--mut); margin: 4px 0 8px; }
.welcome-body ul { padding-left: 4px; list-style: none; margin: 8px 0; } .welcome-body li { padding: 3px 0; } .welcome-body p { margin: 6px 0; }

/* eşya detay */
.item-detail { display: flex; gap: 16px; align-items: center; }
.detail-card { flex: none; width: min(190px, calc(var(--H, 400px) * .44)); } .detail-card .card.big { width: 100%; }
.detail-info { flex: 1; min-width: 0; }
.d-rar { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: 1px; }
.detail-info h3 { font-size: 18px; margin: 2px 0 8px; }
.st-txt { color: #cf6a32; }
.float-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--mut); } .float-row b { color: var(--txt); font-family: monospace; }
.float-bar { position: relative; height: 7px; border-radius: 4px; margin: 5px 0 10px; background: linear-gradient(90deg, #3ddc84 0 7%, #8bd34a 7% 15%, #e8c25a 15% 38%, #ff9a1f 38% 45%, #ff4d4d 45%); }
.float-bar i { position: absolute; top: -4px; width: 3px; height: 15px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px #000; transform: translateX(-50%); }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.d-stats div { background: #00000040; border-radius: 9px; padding: 6px; text-align: center; } .d-stats small { display: block; color: var(--mut); font-size: 10px; } .d-stats b { font: 700 15px var(--head); }
.d-adv { font-size: 12px; color: #c3cfdf; background: #ffffff08; padding: 6px 9px; border-radius: 9px; margin: 8px 0 4px; }

/* sonuç ekranı */
.results .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.results.single { display: flex; gap: 16px; align-items: center; }
.results.single .res-grid { display: block; flex: none; width: min(180px, calc(var(--H, 400px) * .42)); } .results.single .card.big { width: 100%; }
.results.single .res-side { flex: 1; }
.results .res-grid .card { animation: dealIn .45s backwards; }
.results .res-grid .card:nth-child(2) { animation-delay: .06s; } .results .res-grid .card:nth-child(3) { animation-delay: .12s; } .results .res-grid .card:nth-child(4) { animation-delay: .18s; } .results .res-grid .card:nth-child(5) { animation-delay: .24s; }
@keyframes dealIn { from { opacity: 0; transform: translateY(24px) rotate(-6deg) scale(.85); } }
.res-name { font: 700 17px var(--head); margin: 0; } .res-name small { color: var(--mut); font-size: 12px; }
.res-total { margin-top: 10px; color: var(--mut); } .res-total b { color: var(--acc2); font: 700 17px var(--head); }
.results:not(.single) .res-total { text-align: center; }
.results-modal.r6 .modal, .results-modal.r7 .modal { background: radial-gradient(circle at 50% 25%, #4a3600, #131a26 70%); border-color: #ffd24a; }
.results-modal.r6 .modal-title { color: var(--acc2); text-shadow: 0 0 20px #ffd24a; animation: glowPulse 1.5s infinite; }
.results-modal.r5 .modal { background: radial-gradient(circle at 50% 25%, #4a1414, #131a26 70%); }
.results-modal .modal { width: min(680px, 100%); }

/* bildirim / efekt */
#toasts { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 5px; width: min(90%, 400px); pointer-events: none; }
.toast { background: #1b2536f2; border: 1px solid var(--line); border-left: 4px solid var(--acc); padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 12px; box-shadow: 0 8px 24px #0008; animation: toastIn .3s cubic-bezier(.2, .9, .3, 1.3); transition: opacity .4s, transform .4s; }
.toast.ok { border-left-color: var(--ok); } .toast.err { border-left-color: var(--err); } .toast.gold { border-left-color: var(--acc2); background: #3a2c0af2; }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.92); } }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }
.float-text { position: absolute; z-index: 96; font: 700 20px var(--head); pointer-events: none; text-shadow: 0 2px 4px #000; animation: floatUp 1.2s forwards; }
@keyframes floatUp { to { transform: translateY(-50px); opacity: 0; } }
.flash { position: absolute; inset: 0; z-index: 94; pointer-events: none; animation: flash .7s forwards; mix-blend-mode: screen; }
@keyframes flash { from { opacity: .55; } to { opacity: 0; } }
#gift { position: absolute; right: calc(14px + var(--sr)); bottom: calc(14px + var(--sb)); z-index: 30; width: 50px; height: 50px; border-radius: 50%; font-size: 26px; background: radial-gradient(circle, #ff5c8a, #b3124a); box-shadow: 0 0 0 3px #fff3, 0 0 22px #ff5c8a; animation: giftBounce 1.2s infinite; }
@keyframes giftBounce { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }

/* açılış ekranı */
#splash { position: absolute; inset: 0; z-index: 100; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: 10px 30px; padding: 20px 40px; background: radial-gradient(700px 400px at 30% 40%, #23344f, #06080c 70%); transition: opacity .5s, transform .5s; }
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.splash-logo { grid-row: 1 / 3; display: flex; align-items: center; gap: 24px; }
.logo-cards { position: relative; width: 110px; height: 110px; flex: none; }
.logo-cards span { position: absolute; left: 28px; top: 4px; width: 60px; height: 86px; border-radius: 9px; border: 2px solid #fff4; }
.logo-cards span:nth-child(1) { background: linear-gradient(135deg, #4b69ff, #8847ff); transform: rotate(-18deg) translateX(-22px); animation: fan1 2s ease-in-out infinite; }
.logo-cards span:nth-child(2) { background: linear-gradient(135deg, #d32ce6, #eb4b4b); animation: fan2 2s ease-in-out infinite; }
.logo-cards span:nth-child(3) { background: linear-gradient(135deg, #ffd24a, #ff7a1a); transform: rotate(18deg) translateX(22px); animation: fan3 2s ease-in-out infinite; box-shadow: 0 0 30px #ffd24a88; }
@keyframes fan1 { 50% { transform: rotate(-24deg) translateX(-30px); } } @keyframes fan2 { 50% { transform: translateY(-7px); } } @keyframes fan3 { 50% { transform: rotate(24deg) translateX(30px); } }
.splash-logo h1 { font-size: 44px; line-height: .9; letter-spacing: 3px; } .splash-logo h1 b { display: block; color: var(--acc); font-size: 30px; letter-spacing: 6px; }
.splash-logo p { color: var(--mut); margin: 6px 0 0; }
.splash-load { width: min(260px, 90%); text-align: center; color: var(--mut); font-size: 11px; align-self: end; }
.splash-load .bar { height: 5px; border-radius: 5px; background: #ffffff14; overflow: hidden; margin-bottom: 6px; } .splash-load .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width .4s; }
#splash-start { align-self: start; animation: pulse 1.4s infinite; }
.splash-legal { position: absolute; bottom: 10px; left: 20px; right: 20px; text-align: center; color: #5a6b85; font-size: 9px; }

/* ============ KASALAR ============ */

.price { font: 700 14px var(--head); color: var(--acc2); }

.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }

/* premium kasa tasarımı (CSS) */
.crate { --c1: #222; --c2: #999; position: relative; width: 100%; aspect-ratio: 1 / .82; display: flex; align-items: flex-end; justify-content: center; }
.crate-glow { position: absolute; inset: 10% 5% 0; background: radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--c2) 55%, transparent), transparent 70%); filter: blur(6px); }
.crate-box { position: relative; width: 86%; height: 60%; border-radius: 8px 8px 10px 10px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c2) 70%, #fff) 0%, var(--c2) 18%, var(--c1) 70%, #050505 120%);
  box-shadow: inset 0 0 0 2px #ffffff30, inset 0 -8px 0 #00000055, 0 8px 14px #000b; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.crate-box::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18%, #00000026 18% 20%), linear-gradient(transparent 46%, #0000004d 46% 50%, transparent 50%); }
.crate-box::after { content: ''; position: absolute; inset: 4px; border-radius: 6px; border: 1px solid #ffffff20; pointer-events: none; }
.crate-lid { position: absolute; top: 0; left: 0; right: 0; height: 26%; background: linear-gradient(#ffffff38, #ffffff08); border-bottom: 2px solid #0006; }
.crate-emblem { position: relative; z-index: 1; width: 30%; max-width: 54px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(14px, 3.4vw, 26px); background: radial-gradient(circle, #0009, #0004); border: 2px solid color-mix(in srgb, var(--c2) 80%, #fff); box-shadow: 0 0 14px var(--c2); margin-top: 8%; }
.crate-name { position: relative; z-index: 1; font: 700 9px var(--head); text-transform: uppercase; letter-spacing: 1px; color: #fff; text-shadow: 0 1px 3px #000; margin-top: 3%; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.crate-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff40 48%, transparent 60%); background-size: 300% 100%; animation: foil 3.5s linear infinite; mix-blend-mode: overlay; }
.crate-skin { position: absolute; top: 0; left: 50%; width: 82%; transform: translateX(-50%) rotate(-12deg); z-index: 2; filter: drop-shadow(0 6px 8px #000c); transition: transform .3s; }
.crate.big .crate-skin { animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateX(-50%) rotate(-12deg) translateY(-6px); } }
.crate.big { width: min(240px, 100%); }
.crate.big .crate-emblem { font-size: 24px; } .crate.big .crate-name { font-size: 10px; }

/* kasa / paket sayfası */
.case-page { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; gap: 14px; align-items: start; }
.cp-side { position: sticky; top: 0; max-height: calc(var(--H, 400px) - 70px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.cp-side h2 { font-size: 16px; line-height: 1.1; text-align: center; }
.cp-side p { margin: 0; text-align: center; }
.cp-art { display: flex; justify-content: center; }
.cp-art > img { width: 100%; max-width: 200px; max-height: calc(var(--H, 400px) * .3); object-fit: contain; filter: drop-shadow(0 8px 12px #000); }
.cp-art .crate.big { width: min(180px, 100%); aspect-ratio: auto; height: calc(var(--H, 400px) * .3); }
.cp-art .pack.big { width: auto; height: calc(var(--H, 400px) * .36); }
.cp-opts { display: flex; justify-content: space-between; align-items: center; }
 

.free-note { text-align: center; font: 700 15px var(--head); color: var(--ok); }
.odds-table { width: 100%; border-collapse: collapse; font: 600 14px var(--head); }
.odds-table td { padding: 6px 8px; border-bottom: 1px solid #ffffff0d; } .odds-table td:nth-child(2) { text-align: right; color: var(--txt); } .odds-table td:nth-child(3) { text-align: right; font-size: 11px; }

/* açılış şeridi (tam ekran) */
.spin-overlay { position: absolute; inset: 0; z-index: 60; background: radial-gradient(ellipse at center, #182234ee, #05070bf6); display: flex; flex-direction: column; padding: 10px 0; animation: fadeUp .2s; }
.spin-overlay.out { opacity: 0; transition: opacity .25s; }
.so-title { text-align: center; font: 700 16px var(--head); color: var(--mut); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.so-strips { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 0; }
.strip { position: relative; height: 128px; overflow: hidden; background: linear-gradient(180deg, #080b11, #121a27, #080b11); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex: none; }
.strip::before, .strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.strip::before { left: 0; background: linear-gradient(90deg, #05070b, transparent); } .strip::after { right: 0; background: linear-gradient(-90deg, #05070b, transparent); }
.strip-track { display: flex; gap: 8px; height: 100%; padding: 6px 0; will-change: transform; }
.cell { flex: none; width: 110px; height: 100%; border-radius: 8px; background: linear-gradient(180deg, #1c2637, color-mix(in srgb, var(--rc) 28%, #131a26)); border-bottom: 4px solid var(--rc); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; transition: transform .3s, box-shadow .3s; }
.cell img { width: 94%; height: 64%; object-fit: contain; filter: drop-shadow(0 3px 4px #000); }
.cell span { font: 600 11px var(--head); color: #c3cfdf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cell .gold-q { font-size: 34px; }
.cell.t5, .cell.t6 { box-shadow: inset 0 0 18px var(--rc); }
.cell.win { transform: scale(1.06); box-shadow: 0 0 24px var(--rc), inset 0 0 20px color-mix(in srgb, var(--rc) 50%, transparent); }
.strip-marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--acc2); box-shadow: 0 0 12px var(--acc2); z-index: 3; }
.strip-marker::before, .strip-marker::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 7px solid transparent; }
.strip-marker::before { top: 0; border-top-color: var(--acc2); } .strip-marker::after { bottom: 0; border-bottom-color: var(--acc2); }

/* kart paketi */
.pack { --c1: #333; --c2: #999; position: relative; width: 100%; aspect-ratio: 3 / 4.2; border-radius: 6px; filter: drop-shadow(0 6px 10px #000a); }
.pack-face { position: absolute; inset: 7% 0; background: linear-gradient(160deg, var(--c2) 0%, var(--c1) 45%, #0a0a0a 120%); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10% 6%; overflow: hidden; border-left: 2px solid #ffffff30; border-right: 2px solid #00000060; container-type: inline-size; }
.pack-face::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #ffffff08 0 4px, transparent 4px 10px), radial-gradient(circle at 50% 45%, #ffffff30, transparent 55%); }
.pack-crimp { position: absolute; left: 0; right: 0; height: 8%; background: linear-gradient(var(--c2), var(--c1)); mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.pack-crimp.top { top: 0; transition: transform .6s cubic-bezier(.5, -0.5, .5, 1.5), opacity .6s; } .pack-crimp.bottom { bottom: 0; transform: scaleY(-1); }
.pack-brand { font: 700 7cqw var(--head); letter-spacing: 1px; white-space: nowrap; color: #fff; z-index: 1; opacity: .85; } .pack-brand b { color: var(--acc2); }
.pack-skin { position: absolute; top: 24%; width: 115%; opacity: .55; transform: rotate(-18deg); filter: drop-shadow(0 6px 8px #000); }
.pack-icon { font-size: 28cqw; z-index: 1; filter: drop-shadow(0 4px 10px #000); margin-top: 16%; }
.pack-name { font: 700 13cqw/1 var(--head); text-align: center; z-index: 1; text-transform: uppercase; text-shadow: 0 2px 4px #000; }
.pack-count { font: 700 8cqw var(--head); background: #0008; padding: 1px 7px; border-radius: 5px; z-index: 1; letter-spacing: 1px; }
.pack-foil { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff40 45%, transparent 60%); background-size: 300% 100%; animation: foil 3s linear infinite; pointer-events: none; mix-blend-mode: overlay; border-radius: 6px; }
@keyframes foil { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.pack.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: rotate(-5deg) scale(1.03); } 40% { transform: rotate(5deg) scale(1.05); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
.pack.ripped .pack-crimp.top { transform: translate(40px, -80px) rotate(30deg); opacity: 0; }
.pack.ripped { animation: ripGlow .6s forwards; }
@keyframes ripGlow { to { filter: drop-shadow(0 0 40px #fff) brightness(1.4); } }

.pack-open { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; animation: fadeUp .3s; }
.pack-open.out { opacity: 0; transition: opacity .3s; }
.po-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c2) 40%, #000) 0%, #05070b 70%); }
.po-bg::after { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 45%, #ffffff06 0 8deg, transparent 8deg 16deg); animation: spin 30s linear infinite; }
.po-stage { position: relative; z-index: 1; transition: transform .5s, opacity .5s; } .po-stage .pack { cursor: pointer; width: auto; height: calc(var(--H, 400px) * .62); }
.po-stage.gone { transform: translateY(80px) scale(.6); opacity: 0; position: absolute; }
.po-cards { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; width: 100%; }
.po-card { width: min(17%, calc(var(--H, 400px) * .44)); aspect-ratio: 5/7; perspective: 800px; cursor: pointer; animation: dealIn .5s backwards; animation-delay: calc(var(--i) * .1s); position: relative; }
.po-back, .po-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.po-back { border-radius: 9px; background: linear-gradient(135deg, #1d2a40, #0d1320); border: 2px solid #3a4b66; display: grid; place-items: center; box-shadow: 0 6px 14px #000; }
.po-back::before { content: ''; position: absolute; inset: 7px; border-radius: 6px; border: 1px solid #ffffff1a; background: repeating-linear-gradient(45deg, #ffffff06 0 5px, transparent 5px 10px); }
.po-back span { font: 700 26px var(--head); color: var(--acc); letter-spacing: 2px; }
.po-back.glow { box-shadow: 0 0 22px var(--rc), 0 0 6px var(--rc); border-color: var(--rc); animation: backGlow 1s infinite; }
@keyframes backGlow { 50% { box-shadow: 0 0 36px var(--rc), 0 0 12px #fff; } }
.po-front { transform: rotateY(180deg); visibility: hidden; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), visibility 0s .15s; } .po-front .card { width: 100%; }
.po-front .card-in, .fface .card-in { transform: none !important; transform-style: flat; }
.po-card.flipped .po-back { transform: rotateY(-180deg); visibility: hidden; transition: transform .6s, visibility 0s .15s; } .po-card.flipped .po-front { transform: rotateY(0); visibility: visible; }
.po-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.po-hint { font: 700 16px var(--head); color: #fff; text-shadow: 0 2px 6px #000; margin: 0; animation: pulse 1.6s infinite; }

/* ============ ENVANTER / ALBÜM ============ */
.inv-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.inv-stats { display: flex; gap: 10px; align-items: baseline; color: var(--mut); } .inv-stats b { font: 700 18px var(--head); color: var(--acc2); }
.inv-tools { display: flex; gap: 6px; flex: 1; justify-content: flex-end; min-width: 260px; } .inv-tools input { flex: 1; min-width: 0; max-width: 220px; } .inv-tools select { max-width: 130px; }
.inv-tools input, .inv-tools select { padding: 6px 8px; font-size: 12px; }
.sel-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; position: sticky; top: -10px; z-index: 4; background: var(--bg); padding: 5px 0; }
.sel-bar .deck-ind { flex: 1; font-size: 12px; color: var(--mut); text-align: right; }
.album-head { margin-bottom: 8px; display: flex; gap: 12px; align-items: center; } .album-head > div:first-child { color: var(--mut); white-space: nowrap; } .album-head .pbar { flex: 1; } .album-head b { color: var(--acc2); font: 700 20px var(--head); }
.album-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.album-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); text-align: left; }
.album-row img { width: 48px; height: 36px; object-fit: contain; }
.ar-txt { flex: 1; min-width: 0; } .ar-txt b { display: block; font: 700 13px var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.ar-n { font: 700 13px var(--head); color: var(--mut); min-width: 40px; text-align: right; }
.album-row.done { border-color: #3ddc8455; } .album-row.done .pbar i { background: var(--ok); }
.album-row.claim { border-color: var(--acc2); background: linear-gradient(90deg, #3a2c0a, var(--panel)); animation: claimGlow 1.5s infinite; } .album-row.claim .ar-n { font-size: 20px; }
@keyframes claimGlow { 50% { box-shadow: 0 0 14px #ffd24a55; } }
.album-detail .case-head { display: flex; align-items: center; gap: 12px; } .album-detail .case-head img { width: 100px; height: 75px; object-fit: contain; }
.album-reward { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; margin: 10px 0; border-radius: 10px; background: #ffffff08; border: 1px dashed var(--line); font-size: 12px; }
.album-reward.ready { border-color: var(--acc2); background: #3a2c0a88; } .album-reward .rw-list { font: 700 13px var(--head); }

/* ============ OYUNLAR ============ */
.games-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; } .games-head p { margin: 0; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.game-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 14px; text-align: left; border: 1px solid #ffffff16; min-height: 104px; overflow: hidden; transition: transform .1s; }
.game-tile:active { transform: scale(.96); }
.game-tile i { font-style: normal; font-size: 28px; filter: drop-shadow(0 4px 8px #0009); margin-bottom: 2px; }
.game-tile b { font: 700 15px var(--head); } .game-tile small { font-size: 10px; color: #ffffffb0; line-height: 1.3; }
.game-tile::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 100px; height: 100px; border-radius: 50%; background: #ffffff0b; }
.gt-tag { position: absolute; top: 9px; right: 9px; font: 700 8px var(--head); background: #0006; padding: 2px 6px; border-radius: 6px; letter-spacing: .5px; }
.g-duel { background: linear-gradient(140deg, #6b2a1d, #2a1510); } .g-battle { background: linear-gradient(140deg, #6b1d5c, #2a1026); } .g-up { background: linear-gradient(140deg, #1d4f6b, #10202a); } .g-trade { background: linear-gradient(140deg, #4a3b6b, #1a1428); }
.g-crash { background: linear-gradient(140deg, #6b4a1d, #2a1d10); } .g-roul { background: linear-gradient(140deg, #1d6b45, #10291c); } .g-coin { background: linear-gradient(140deg, #6b5c1d, #2a2410); }
.g-mines { background: linear-gradient(140deg, #6b1d3a, #2a1018); } .g-aim { background: linear-gradient(140deg, #1d3a6b, #10182a); } .g-mem { background: linear-gradient(140deg, #3a6b1d, #18290f); } .g-hilo { background: linear-gradient(140deg, #1d6b6b, #102a2a); }
.game-view[class*="g-"] { background: none; }
.game-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .game-top .back { padding: 0; } .game-top h2 { font-size: 17px; }
.bet-box label { font-size: 11px; color: var(--mut); }
.bet-row { display: flex; gap: 5px; margin-top: 3px; } .bet-row input { flex: 1; min-width: 0; font: 700 16px var(--head); }
.bet-row button { padding: 0 10px; border-radius: 9px; background: #ffffff10; border: 1px solid var(--line); font: 700 13px var(--head); }
.energy-gate { text-align: center; padding: 16px; } .energy-gate p { margin: 6px 0; } .eg-icon { font-size: 46px; animation: float2 2s infinite; }
@keyframes float2 { 50% { transform: translateY(-6px); } }
.game-over { text-align: center; padding: 10px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; } .game-over p { margin: 0; }
.big-num { font: 700 60px/1 var(--head) !important; color: var(--acc2); text-shadow: 0 0 30px #ff9a1f80; }
/* iki sütunlu oyun düzeni */
.crash, .coinflip, .mines, .upgrader { display: grid; grid-template-columns: 1fr minmax(220px, 34%); gap: 12px; align-items: start; }

/* düello */
.duel-lobby { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: 12px; align-items: start; }
.duel-lobby .dl-side { display: flex; flex-direction: column; gap: 8px; }
.rank-card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 25%, #141c2a), #141c2a); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.rank-card > div:last-child { flex: 1; } .rank-card b { font: 700 17px var(--head); color: var(--c); display: block; margin-bottom: 5px; } .rank-card small { color: var(--mut); font-size: 10px; }
.rank-emb { width: 54px; height: 42px; border-radius: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #222), #111); border: 2px solid var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
.emb-sym { font-size: 17px; color: #fff; line-height: 1; } .emb-stars { color: #fff; letter-spacing: 1px; font-size: 12px; line-height: 1; }
.duel-stats { display: flex; justify-content: space-around; font: 700 13px var(--head); color: var(--mut); }
.adv-chart { font-size: 11px; color: #c3cfdf; background: #ffffff08; padding: 8px; border-radius: 9px; line-height: 1.5; }
.duel-btns { display: flex; gap: 8px; } .duel-btns .btn.big { flex: 2; } .duel-btns .btn.ghost { flex: 1; }
.mm { text-align: center; padding: 20px 0; }
.mm-radar { width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid #3ddc8455; position: relative; overflow: hidden; background: radial-gradient(circle, #3ddc8415 0 30%, transparent 31% 60%, #3ddc8415 61%); }
.mm-radar i { position: absolute; inset: 0; background: conic-gradient(from 0deg, #3ddc8466, transparent 60deg); animation: spin 1.5s linear infinite; }
.mm-found { display: flex; align-items: center; justify-content: space-around; animation: pop .4s; }
.mm-p { display: flex; flex-direction: column; gap: 4px; } .mm-p b { font: 700 17px var(--head); } .mm-p small { font: 700 11px var(--head); }
.vs { font: 700 40px var(--head); color: var(--err); text-shadow: 0 0 20px var(--err); }
.arena { display: grid; grid-template-columns: 170px 1fr; grid-template-rows: 1fr auto; gap: 8px 12px; height: calc(var(--H, 400px) - 108px); min-height: 250px; }
.ar-info { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.side { display: flex; flex-direction: column; gap: 4px; }
.who { display: flex; flex-direction: column; } .who b { font: 700 14px var(--head); } .who small { font: 600 10px var(--head); color: var(--mut); }
.hp { position: relative; height: 16px; border-radius: 8px; background: #0007; border: 1px solid var(--line); overflow: hidden; }
.hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3ddc84, #9be84a); transition: width .5s; } .side.bot .hp i { background: linear-gradient(90deg, #ff4d4d, #ff9a1f); }
.hp span { position: relative; display: block; text-align: center; font: 700 11px/16px var(--head); }
.hp.hit { animation: shake .35s; }
.bot-hand { display: flex; gap: 3px; }
.cback { width: 22px; height: 31px; border-radius: 4px; background: linear-gradient(135deg, #3a2030, #1a0e16); border: 1px solid #ff4d4d55; }
.cback.big { width: 100%; height: 100%; border-radius: 9px; }
.round-ind { font: 700 13px var(--head); color: var(--mut); background: #0006; padding: 3px 10px; border-radius: 9px; align-self: flex-start; }
.field { display: flex; justify-content: center; align-items: center; gap: 20px; background: radial-gradient(ellipse at center, #ff9a1f10, transparent 70%); border-radius: 14px; min-height: 0; }
.slot { height: 100%; max-height: 190px; aspect-ratio: 5/7; border-radius: 9px; border: 2px dashed #ffffff18; position: relative; transition: transform .3s; }
.slot.in { border-color: transparent; animation: slotIn .4s; } .slot .card { width: 100%; }
.field .vsmark { font: 700 26px var(--head); color: var(--err); }
@keyframes slotIn { from { transform: scale(.5); opacity: 0; } }
.slot.winner { transform: scale(1.06); filter: drop-shadow(0 0 16px #3ddc84); } .slot.loser { animation: shake .4s; filter: grayscale(.7) brightness(.7); }
.flipper { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s; } .flipper.flip { transform: rotateY(180deg); }
.flipper > * { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .fface { transform: rotateY(180deg); visibility: hidden; transition: visibility 0s .3s; }
.flipper.flip .fface { visibility: visible; } .flipper.flip .cback { visibility: hidden; transition: visibility 0s .3s; }
.pow-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; background: #000c; border: 2px solid var(--acc2); color: var(--acc2); font: 700 19px var(--head); padding: 3px 9px; border-radius: 9px; white-space: nowrap; animation: pop .4s; text-align: center; }
.pow-pop em { display: block; font-style: normal; font-size: 10px; color: var(--ok); }
.hand { grid-column: 1 / 3; display: flex; justify-content: center; gap: 8px; }
.hand .card { width: min(92px, calc(var(--H, 400px) * .2)); animation: dealIn .4s backwards; } .hand .card:active { transform: translateY(-8px); }
.duel-result { text-align: center; padding: 14px 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.duel-result h1 { font-size: 50px; letter-spacing: 4px; animation: pop .5s; }
.duel-result.win h1 { color: var(--acc2); text-shadow: 0 0 30px #ff9a1f; } .duel-result.lose h1 { color: var(--err); } .duel-result.draw h1 { color: var(--mut); }
.duel-result .score { font: 700 18px var(--head); color: var(--mut); margin: 0; } .duel-result .elo { font: 700 16px var(--head); }
.rank-change { font: 700 18px var(--head); padding: 8px 18px; border-radius: 12px; background: #ffffff0a; animation: pop .6s; } .rank-change.up { box-shadow: 0 0 24px #ffd24a55; }
.duel-result .duel-btns { width: min(420px, 100%); }

/* kasa savaşı */
.battle-setup { display: flex; flex-direction: column; gap: 10px; }
.bs-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bs-cases { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.bs-case, .bs-add { flex: none; width: 110px; height: 118px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; padding: 6px; }
.bs-case img { width: 80px; height: 56px; object-fit: contain; } .bs-case small { font: 600 10px var(--head); text-align: center; line-height: 1.1; max-height: 2.2em; overflow: hidden; } .bs-case b { font: 700 12px var(--head); color: var(--acc2); }
.bs-case i { position: absolute; top: 4px; right: 6px; font-style: normal; color: var(--mut); font-size: 11px; }
.bs-add { border-style: dashed; font-size: 30px; color: var(--mut); } .bs-add small { font-size: 11px; }
.bs-ico { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 28px; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 50%, #000), #0a0a0a); box-shadow: 0 0 12px color-mix(in srgb, var(--c2) 50%, transparent); }
.bs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bs-foot div { display: flex; flex-direction: column; } .bs-foot b { font: 700 18px var(--head); color: var(--acc2); }
.case-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.case-pick button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.case-pick img { width: 72px; height: 52px; object-fit: contain; } .case-pick small { font: 600 10px/1.1 var(--head); text-align: center; height: 2.2em; overflow: hidden; } .case-pick b { font: 700 12px var(--head); color: var(--acc2); }
.seg.small button { padding: 5px 10px; font-size: 12px; }
.battle { display: flex; flex-direction: column; gap: 6px; }
.bt-head { display: flex; gap: 12px; align-items: center; font: 700 14px var(--head); color: var(--mut); } .bt-head #bt-case { color: var(--txt); } .crazy { font-style: normal; color: var(--err); font-size: 11px; border: 1px solid var(--err); padding: 0 6px; border-radius: 6px; }
.bt-cols { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; }
.bt-col { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: box-shadow .3s, opacity .3s; }
.bt-col.me { border-color: #ff9a1f66; } .bt-col.team1 { border-top: 3px solid #4b8bff; } .bt-col.team0 { border-top: 3px solid #ff9a1f; } .bt-col.team2 { border-top: 3px solid #3ddc84; }
.bt-col.won { box-shadow: 0 0 22px #3ddc8466; border-color: var(--ok); } .bt-col.lost { opacity: .5; }
.bt-ph { display: flex; align-items: center; gap: 5px; font-size: 12px; min-width: 0; } .bt-ph b { flex: 1; font: 700 12px var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bt-ph em { font-style: normal; font: 700 13px var(--head); color: var(--acc2); }
.reel { position: relative; height: 112px; overflow: hidden; border-radius: 9px; background: #080b11; }
.reel::before, .reel::after { content: ''; position: absolute; left: 0; right: 0; height: 28px; z-index: 2; pointer-events: none; } .reel::before { top: 0; background: linear-gradient(#080b11, transparent); } .reel::after { bottom: 0; background: linear-gradient(transparent, #080b11); }
.reel-track { display: flex; flex-direction: column; will-change: transform; }
.rcell { height: 74px; flex: none; display: grid; place-items: center; border-left: 4px solid var(--rc); background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 20%, transparent), transparent); }
.rcell img { height: 58px; max-width: 90%; object-fit: contain; } .rcell.win { box-shadow: inset 0 0 18px var(--rc); }
.reel-mark { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--acc2); box-shadow: 0 0 10px var(--acc2); z-index: 3; }
.bt-items { display: flex; flex-wrap: wrap; gap: 4px; max-height: calc(var(--H, 400px) - 290px); min-height: 40px; overflow-y: auto; }
.bt-item { width: calc(50% - 2px); display: flex; align-items: center; gap: 3px; background: #0005; border-radius: 6px; border-left: 3px solid var(--rc); padding: 2px 4px; animation: pop .3s; }
.bt-item img { width: 34px; height: 26px; object-fit: contain; } .bt-item span { font: 700 10px var(--head); white-space: nowrap; }

/* crash */
.crash-hist, .rl-hist { display: flex; gap: 4px; overflow: hidden; margin-bottom: 6px; min-height: 22px; }
.crash-hist span, .rl-hist span { flex: none; font: 700 11px var(--head); padding: 2px 7px; border-radius: 7px; background: #ffffff0a; }
.crash-hist .g { color: var(--ok); } .crash-hist .r { color: var(--err); }
.crash-screen { position: relative; height: calc(var(--H, 400px) - 150px); min-height: 180px; border-radius: 14px; background: radial-gradient(ellipse at bottom left, #2a1c0533, transparent), linear-gradient(180deg, #0f1622, #0a0e15); border: 1px solid var(--line); overflow: hidden; }
.crash-screen canvas { width: 100%; height: 100%; display: block; }
.crash-mult { position: absolute; top: 30%; left: 0; right: 0; text-align: center; font: 700 52px var(--head); color: #fff; text-shadow: 0 0 20px #ff9a1f80; pointer-events: none; }
.crash-mult.boom { color: var(--err); text-shadow: 0 0 30px var(--err); animation: shake .4s; }
.crash-rocket { position: absolute; left: 0; top: 0; font-size: 26px; pointer-events: none; }
.crash.cashed .crash-mult { color: var(--ok); }
.crash-ctrl, .mines-ctrl { display: flex; flex-direction: column; gap: 10px; }
.crash > .crash-hist { grid-column: 1 / 3; margin: 0; }
.auto { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--mut); } .auto input { width: 90px; font: 700 15px var(--head); }

/* yazı tura */
.coinflip > div:not(.coin-stage), .coinflip > p, .coinflip > button { grid-column: 2; }
.coin-stage { grid-row: 1 / 7; height: 100%; min-height: 200px; display: grid; place-items: center; perspective: 800px; }
.coin { width: 140px; height: 140px; position: relative; transform-style: preserve-3d; transition: transform 2.2s cubic-bezier(.2, .8, .3, 1); }
.coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font: 700 46px var(--head); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 8px #0003, inset 0 -10px 20px #0005, 0 10px 20px #0008; }
.coin .ct { background: radial-gradient(circle at 35% 30%, #8fb8ff, #2f5fc9); color: #fff; } .coin .t { background: radial-gradient(circle at 35% 30%, #ffe08a, #d98a0c); color: #3a2000; transform: rotateY(180deg); }
.side-pick { display: flex; gap: 6px; } .side-pick button { flex: 1; padding: 9px 4px; border-radius: 10px; border: 2px solid var(--line); font: 700 12px var(--head); background: #ffffff08; }
.side-pick .ct.on { border-color: var(--ct); background: #4b8bff22; } .side-pick .t.on { border-color: var(--t); background: #ffb02e22; }
.coinflip .btn.big { width: 100%; }
#cf-msg, #rl-msg { margin: 6px 0; min-height: 18px; }

/* rulet */
.rl-hist .ct { color: var(--ct); } .rl-hist .t { color: var(--t); } .rl-hist .b { color: var(--ok); }
.rl-strip { position: relative; height: 76px; overflow: hidden; border-radius: 12px; background: #0a0e15; border: 1px solid var(--line); margin-bottom: 10px; }
.rl-track { display: flex; height: 100%; padding: 8px 0; will-change: transform; }
.rl-c { flex: none; width: 60px; margin-right: 4px; border-radius: 8px; display: grid; place-items: center; font: 700 19px var(--head); }
.rl-c.ct { background: linear-gradient(180deg, #4b8bff, #2a56b8); } .rl-c.t { background: linear-gradient(180deg, #ffb02e, #c47a00); color: #2a1800; } .rl-c.b { background: linear-gradient(180deg, #3ddc84, #128a47); }
.roulette .bet-slot { max-width: 420px; }
.rl-btns { display: flex; gap: 6px; margin-top: 10px; max-width: 620px; } .rl-btns .btn { flex: 1; padding: 12px 4px; font-size: 14px; }

/* mayın */
.mines-info { grid-column: 2; display: flex; justify-content: space-between; font-size: 13px; } .mines-info b { color: var(--acc2); font: 700 17px var(--head); }
.mines-grid { grid-row: 1 / 4; grid-column: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(100%, calc(var(--H, 400px) - 120px)); margin: 0 auto; }
.mines-ctrl { grid-column: 2; }
.mc { aspect-ratio: 1; border-radius: 9px; background: linear-gradient(180deg, #26344a, #1a2436); border: 1px solid #ffffff14; font-size: 20px; box-shadow: 0 3px 0 #0d131d; transition: transform .1s; }
.mc:active { transform: scale(.92); } .mc.open { background: #3ddc8422; border-color: #3ddc8466; box-shadow: none; animation: pop .25s; }
.mc.bomb { background: #ff4d4d44; border-color: var(--err); animation: shake .4s; } .mc.ghost { opacity: .4; box-shadow: none; }
.mn-count label { font-size: 11px; color: var(--mut); } .mn-count > div { display: flex; gap: 5px; margin-top: 3px; }
.mn-count button { flex: 1; padding: 6px; border-radius: 9px; background: #ffffff0a; border: 1px solid var(--line); font: 700 14px var(--head); } .mn-count button.on { border-color: var(--err); color: #ff8a8a; }

/* yükseltici */
.up-row { grid-column: 1; grid-row: 1 / 4; display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; align-items: center; width: min(100%, calc((var(--H, 400px) - 120px) * 1.6)); margin: 0 auto; }
.upgrader > .mults, .upgrader > .btn, .upgrader > p { grid-column: 2; }
.up-slot { aspect-ratio: 5/7; border-radius: 11px; border: 2px dashed #ffffff22; display: grid; place-items: center; cursor: pointer; } .up-slot .card { width: 100%; }
.up-empty { text-align: center; font: 700 32px var(--head); color: var(--mut); } .up-empty small { display: block; font-size: 10px; }
.up-gauge { position: relative; aspect-ratio: 1; }
.up-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-bg { fill: none; stroke: #ff4d4d40; stroke-width: 12; } .g-win { fill: none; stroke: var(--ok); stroke-width: 12; stroke-dasharray: 0 999; transition: stroke-dasharray .4s; filter: drop-shadow(0 0 6px #3ddc84); }
.needle { position: absolute; left: 50%; top: 4%; width: 4px; height: 46%; margin-left: -2px; background: linear-gradient(#fff, #fff0); border-radius: 2px; transform-origin: 50% 100%; }
.g-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .g-txt b { font: 700 20px var(--head); } .g-txt small { color: var(--mut); font-size: 10px; }
.mults { display: flex; gap: 5px; } .mults button { flex: 1; padding: 8px 0; border-radius: 9px; background: #ffffff0a; border: 1px solid var(--line); font: 700 14px var(--head); } .mults button.on { border-color: var(--acc); color: var(--acc2); }
.upgrader .btn.big { width: 100%; } .upgrader.won .up-gauge { filter: drop-shadow(0 0 20px var(--ok)); } .upgrader.lost .up-row { animation: shake .4s; }

/* takas */
.tu-slots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 6px 0 8px; }
.tu-slot { aspect-ratio: 5/7; border-radius: 7px; border: 1px dashed #ffffff22; } .tu-slot .card { width: 100%; }
.tu-info { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--mut); margin-bottom: 8px; align-items: center; }
.tu-actions { display: flex; gap: 8px; align-items: center; } .tu-actions .btn.big { flex: 1; max-width: 340px; }
.tu-anim { position: absolute; inset: 0; z-index: 70; background: #000c; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 17px var(--head); }
.tu-paper { font-size: 70px; animation: spin 1s linear infinite; }

/* nişan */
.aim-hud { display: flex; justify-content: space-around; font-size: 13px; margin-bottom: 6px; } .aim-hud b { font: 700 18px var(--head); color: var(--acc2); }
.aim-field { position: relative; height: calc(var(--H, 400px) - 135px); min-height: 200px; border-radius: 14px; overflow: hidden; touch-action: none; border: 1px solid var(--line);
  background: linear-gradient(180deg, #2a3240 0%, #3d4452 55%, #5a4a38 56%, #6b5840 100%); }
.aim-field::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #ffffff05 0 40px, transparent 40px 80px); }
.crosshair { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; pointer-events: none; opacity: .4; background: linear-gradient(#3ddc84, #3ddc84) center/2px 100% no-repeat, linear-gradient(#3ddc84, #3ddc84) center/100% 2px no-repeat; }
.target { position: absolute; border-radius: 50%; background: radial-gradient(circle, #ff4d4d 0 18%, #fff 19% 34%, #ff4d4d 35% 52%, #fff 53% 68%, #ff4d4d 69%); box-shadow: 0 4px 10px #0008; animation: tIn .2s; cursor: crosshair; }
@keyframes tIn { from { transform: scale(0); } }
.target.hit { animation: tHit .15s forwards; } @keyframes tHit { to { transform: scale(1.4); opacity: 0; } }

/* hafıza */
.mem-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: min(100%, calc((var(--H, 400px) - 130px) * 3.1)); margin: 0 auto; }
.mem { aspect-ratio: 3/4; perspective: 600px; }
.mem-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .4s; }
.mem.up .mem-in { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mem-back { background: linear-gradient(135deg, #1d2a40, #0d1320); border: 2px solid #3a4b66; font: 700 17px var(--head); color: var(--acc); }
.mem-front { transform: rotateY(180deg); background: radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, #1a2232), #121926); border: 2px solid var(--rc); padding: 3px; }
.mem-front img { width: 100%; height: 60%; object-fit: contain; } .mem-front span { font: 700 9px var(--head); text-align: center; }
.mem.ok .mem-front { box-shadow: 0 0 14px var(--ok); border-color: var(--ok); }

/* pahalı/ucuz */
.hilo { max-width: 760px; margin: 0 auto; }
.hl-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; margin: 6px 0; }
.hl-vs { font: 700 22px var(--head); color: var(--err); }
.hl-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 6px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 30%, #1a2232), #121926); border: 2px solid var(--rc); transition: transform .3s; }
.hl-box img { width: 100%; height: calc(var(--H, 400px) * .2); object-fit: contain; filter: drop-shadow(0 4px 6px #000); }
.hl-box b { font: 700 14px var(--head); } .hl-box span { font: 600 11px var(--head); color: var(--rc); filter: brightness(1.4); } .hl-box small { font-size: 10px; color: var(--mut); }
.hl-price { font: 700 18px var(--head); color: var(--acc2); padding-top: 4px; } .hl-price:not(.show) { color: var(--mut); font-size: 24px; }
.hl-price.show { animation: pop .3s; }
.hl-box.good { border-color: var(--ok); box-shadow: 0 0 20px var(--ok); transform: scale(1.04); } .hl-box.bad { border-color: var(--err); box-shadow: 0 0 20px var(--err); animation: shake .4s; }
.hl-btns { display: flex; flex-direction: column; gap: 8px; } .hl-btns .btn { font-size: 13px; padding: 14px 10px; }
.hilo > p { margin: 4px 0; }

/* ============ ÖDÜLLER ============ */
.streak-box { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, #3a1c0a, var(--panel)); border: 1px solid #ff9a1f44; margin-bottom: 10px; }
.flame { font-size: 28px; } .streak-box b { font: 700 17px var(--head); display: block; } .streak-box small { color: var(--mut); font-size: 10px; }
.cal { display: grid; grid-template-columns: repeat(6, 1fr) 1.6fr; gap: 6px; }
.cal-day { position: relative; padding: 8px 4px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); text-align: center; min-height: 86px; display: flex; flex-direction: column; gap: 5px; }
.cal-day small { font: 700 11px var(--head); color: var(--mut); }
.cal-rw { display: flex; flex-direction: column; gap: 3px; align-items: center; } .cal-rw .rw { font-size: 11px; padding: 2px 5px; white-space: normal; }
.cal-day.big { background: linear-gradient(160deg, #4a3600, var(--panel)); border-color: #ffd24a66; }
.cal-day.today { border: 2px solid var(--acc); box-shadow: 0 0 16px #ff9a1f55; animation: claimGlow 1.5s infinite; }
.cal-day.got { opacity: .5; } .check { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; color: var(--ok); text-shadow: 0 0 10px #000; }
.daily .btn.wide { max-width: 360px; margin: 10px auto 0; display: flex; }
.wheel-wrap { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.wheel-side { display: flex; flex-direction: column; gap: 8px; }
.wheel-box { position: relative; width: min(300px, calc(var(--H, 400px) - 120px)); aspect-ratio: 1; margin: 10px; }
.wheel { position: absolute; inset: 0; border-radius: 50%; border: 5px solid #ffd24a; box-shadow: 0 0 0 4px #0008, 0 0 40px #ff9a1f55, inset 0 0 30px #0008; overflow: hidden; }
.wl { position: absolute; left: 50%; top: 0; width: 0; height: 50%; transform-origin: 50% 100%; }
.wl span { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); font-size: 17px; line-height: 1.1; text-align: center; width: 54px; } .wl b { font: 700 11px var(--head); }
.wheel-pin { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 28px; color: var(--err); text-shadow: 0 2px 4px #000; }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: radial-gradient(circle, #ffe08a, #d98a0c); display: grid; place-items: center; font: 700 16px var(--head); color: #3a2000; z-index: 2; box-shadow: 0 0 0 4px #0006; }
.missions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .missions .panel-h { grid-column: 1 / 3; }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 10px; } .achs .album-head { grid-column: 1 / -1; }
.mission, .ach { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 6px; }
.m-txt { flex: 1; min-width: 0; } .m-txt b { font: 700 13px var(--head); display: block; } .m-txt small { color: var(--mut); font-size: 10px; display: block; margin: 1px 0 3px; }
.m-txt .pbar { margin-top: 3px; }
.m-rw { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; } .m-rw .rw { font-size: 10px; padding: 1px 5px; }
.mission.done { border-color: #3ddc8466; } .mission.claimed { opacity: .5; }
.ach > i { font-style: normal; font-size: 24px; width: 34px; text-align: center; filter: grayscale(1); opacity: .5; }
.ach.ready { border-color: var(--acc2); background: linear-gradient(90deg, #3a2c0a, var(--panel)); } .ach.ready > i, .ach.got > i { filter: none; opacity: 1; }
.ach.got { opacity: .65; } .ach-r { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 10px; }
.lvl-head { grid-column: 1 / -1; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; }
.lvl-head b { font: 700 19px var(--head); } .lvl-head small { grid-column: 1 / 3; color: var(--mut); font-size: 10px; } .lvl-head .btn { grid-row: 1 / 3; grid-column: 3; }
.lvl-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 5px; opacity: .6; }
.lvl-row .m-rw { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
.lvl-n { width: 32px; height: 32px; border-radius: 50%; background: #ffffff10; display: grid; place-items: center; font: 700 15px var(--head); flex: none; }
.lvl-row.reached { opacity: 1; } .lvl-row.reached .lvl-n { background: var(--acc); color: #241300; } .lvl-row.got { opacity: .55; } .lvl-row.milestone { border-color: #ffd24a55; background: linear-gradient(90deg, #3a2c0a, var(--panel)); }

/* mağaza */
.shop-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.shop-item { position: relative; display: flex; flex-direction: column; gap: 5px; } .shop-item .btn { width: 100%; padding: 6px 2px; font-size: 12px; }
.shop-item .disc { position: absolute; top: -5px; left: -4px; background: var(--err); font: 700 10px var(--head); padding: 1px 5px; border-radius: 5px; z-index: 5; transform: rotate(-8deg); }
.shop-item.sold .card { filter: grayscale(1) brightness(.6); }
.gem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.gem-deal { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: linear-gradient(160deg, #2b2547, var(--panel)); border: 1px solid var(--line); }
.gem-deal:active { transform: scale(.96); } .gem-deal i { font-style: normal; font-size: 26px; } .gem-deal b { font: 700 13px var(--head); } .gem-deal span { font: 700 14px var(--head); color: #c9a6ff; }

/* profil */
.profile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .profile > .prof-head, .profile > .credits { grid-column: 1 / 3; }
.prof-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.prof-av { font-size: 36px; width: 62px; height: 62px; border-radius: 16px; background: var(--panel2); border: 2px solid var(--line); flex: none; }
.prof-head input { font: 700 18px var(--head); width: 100%; max-width: 260px; padding: 3px 8px; background: transparent; border-color: transparent; } .prof-head input:focus { border-color: var(--acc); }
.prof-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; align-content: start; }
.stat-grid div { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; } .stat-grid small { display: block; color: var(--mut); font-size: 9px; } .stat-grid b { font: 700 14px var(--head); }
.set { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #ffffff0a; } .set input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--acc); } .set input[type=range] { accent-color: var(--acc); width: 130px; padding: 0; }
.panel h3 { margin-bottom: 6px; }
.code { width: 100%; min-height: 100px; font: 11px monospace; word-break: break-all; user-select: text; -webkit-user-select: text; }
.credits { margin: 14px 0 6px; line-height: 1.6; }
.av-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; } .av-grid button { font-size: 26px; padding: 8px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); } .av-grid button.on { border-color: var(--acc); }

/* düşük efekt */
body.lowfx .holo, body.lowfx .pack-foil, body.lowfx .crate-shine, body.lowfx .po-bg::after, body.lowfx .rw-burst { animation: none; display: none; }
body.lowfx #view > * { animation: none; }
@media (prefers-reduced-motion: reduce) { .holo, .pack-foil, .crate-shine, .rw-burst, .po-bg::after { animation: none; } }
/* çok dar (zorlama yok, masaüstü dar pencere) */
@media (max-width: 640px) {
  html:not(.force-land) .case-page, html:not(.force-land) .duel-lobby, html:not(.force-land) .crash,
  html:not(.force-land) .coinflip, html:not(.force-land) .mines, html:not(.force-land) .upgrader, html:not(.force-land) .profile, html:not(.force-land) .missions { grid-template-columns: 1fr; }
  html:not(.force-land) .cp-side { position: static; }
}
.st-badge.sv { background: #b89a2a; color: #1a1405; left: auto; right: 5%; }
.sv-txt { color: #e6d38a; }
/* altın paketler */

/* savaş: adet ve kontrol */
.bs-case { height: 140px; }
.qty { display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.qty button { width: 22px; height: 22px; border-radius: 6px; background: #ffffff12; border: 1px solid var(--line); font: 700 13px var(--head); line-height: 1; }
.qty button[data-a="+5"] { width: auto; padding: 0 5px; font-size: 11px; }
.qty span { min-width: 26px; text-align: center; font: 700 13px var(--head); color: var(--txt); }
.bs-case i { cursor: pointer; }
.case-pick button { position: relative; }
.cp-n { position: absolute; top: 4px; right: 5px; font: 700 12px var(--head); font-style: normal; color: var(--ok); }
.bt-ctrl { margin-left: auto; display: flex; gap: 6px; } .bt-ctrl .btn.on { border-color: var(--acc); color: var(--acc2); }
.bt-prog { height: 4px; border-radius: 4px; background: #ffffff10; overflow: hidden; } .bt-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width .4s; }

/* ============ YENİ ARAYÜZ: LOBİ ============ */

.feat { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 190px; padding: 20px 24px; border-radius: var(--r); overflow: hidden; cursor: pointer;
  background: linear-gradient(110deg, #12151b 0%, #12151bee 40%, color-mix(in srgb, var(--c1) 70%, #12151b) 100%); border: 1px solid var(--line2); }
.feat::before { content: ''; position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c2) 35%, transparent), transparent 70%); }
.feat-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.feat-txt small { color: var(--acc); font: 600 12px var(--head); letter-spacing: 2px; text-transform: uppercase; }
.feat-txt h2 { font-size: 34px; line-height: 1; }
.feat-txt p { margin: 0 0 10px; color: var(--mut); }
.feat-art { position: relative; z-index: 1; width: min(230px, 42%); }
.feat-art .crate.big { width: 100%; }

.hcard { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line2); text-align: left; cursor: pointer; position: relative; transition: background .15s; }
.hcard:hover { background: var(--panel2); }
.hcard > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hcard b { font: 600 14px var(--head); letter-spacing: .8px; text-transform: uppercase; }
.hcard small { color: var(--mut); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard em { font-style: normal; font: 600 14px var(--head); color: var(--acc2); white-space: nowrap; }
.hcard img { width: 40px; height: 30px; object-fit: contain; }
.hc-ico { font-size: 20px; width: 30px; text-align: center; }
.hcard.hot { border-color: #f0b23266; background: linear-gradient(90deg, #f0b2321a, var(--panel)); }
.hcard.hot::after { content: ''; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: pulse 1.4s infinite; }

.key-tag { position: absolute; top: 5px; right: 6px; font: 600 11px var(--head); font-style: normal; color: var(--teal); }

/* ============ KASA KAROLARI (sade) ============ */

.price { font: 600 15px var(--head) !important; color: var(--acc2) !important; letter-spacing: .5px; }

.cp-side { background: var(--panel) !important; border: 1px solid var(--line2) !important; border-radius: 6px !important; }
.cp-side h2 { text-transform: uppercase; }

/* ============ HEDİYELER ============ */
.gifts { display: grid; grid-template-columns: minmax(250px, 32%) minmax(0, 1fr); gap: 14px; align-items: start; }
.g-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.g-side > section { background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; padding: 10px 12px; }
.g-batch { display: flex; align-items: center; gap: 10px; }
.g-batch.ready { border-color: #f0b23288 !important; background: linear-gradient(90deg, #f0b2321f, var(--panel)) !important; }
.gb-ico { font-size: 28px; } .g-batch.ready .gb-ico { animation: wobble 1.4s infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.08); } 75% { transform: rotate(9deg) scale(1.08); } }
.gb-txt { flex: 1; display: flex; flex-direction: column; } .gb-txt b { font: 600 16px var(--head); letter-spacing: 1px; text-transform: uppercase; } .gb-txt small { color: var(--mut); }
.gq-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .gq-h span { font: 600 13px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--acc); } .gq-h small { color: var(--mut); font-size: 10px; }
.gq-row { display: flex; align-items: center; gap: 10px; } .gq-row img { width: 56px; height: 42px; object-fit: contain; }
.gq-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .gq-row b { font: 600 14px var(--head); } .gq-row small { color: var(--mut); font-size: 10px; }
.gq-row em { font-style: normal; font: 600 15px var(--head); color: var(--acc2); }
.gq-rw { margin: 8px 0 6px; display: flex; flex-wrap: wrap; gap: 4px; } .gq-rw .rw { font-size: 11px; padding: 2px 6px; }
.gq-btns { display: flex; gap: 6px; justify-content: flex-end; }
.sell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sell-grid label { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; background: #ffffff06; border-left: 3px solid var(--c); font-size: 12px; cursor: pointer; }
.g-main { min-width: 0; }
.gk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 6px; background: linear-gradient(180deg, #1c2029, #161920); border: 1px solid var(--line2); text-align: center; }
.gk img { width: 100%; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 8px #000a); }
.gk b { font: 600 13px var(--head); letter-spacing: .5px; text-transform: uppercase; }
.gk-n { font: 700 18px var(--head); color: var(--teal); } .gk small { color: var(--mut); font-size: 10px; }
.gk-btns { display: flex; gap: 5px; margin-top: 4px; width: 100%; } .gk-btns .btn { flex: 1; }
.gift-batch { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.gift-batch div { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #00000040; border-radius: 6px; padding: 6px; }
.gift-batch img { width: 100%; height: 44px; object-fit: contain; } .gift-batch b { font: 700 16px var(--head); color: var(--teal); } .gift-batch small { font-size: 9px; color: var(--mut); text-align: center; }

/* otomatik açma */
.auto-ov { position: absolute; inset: 0; z-index: 65; background: #05070bdd; backdrop-filter: blur(4px); display: grid; place-items: center; padding: 12px; animation: fadeUp .2s; }
.ao-box { width: min(860px, 100%); max-height: 100%; background: linear-gradient(180deg, #191d26, #12151b); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ao-head { display: flex; align-items: center; gap: 10px; } .ao-head b { font: 600 17px var(--head); letter-spacing: 1px; text-transform: uppercase; } .ao-head span { flex: 1; color: var(--mut); }
.ao-body { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.ao-now { grid-row: 1 / 3; }
.ao-card { position: relative; } .ao-card .card { width: 100%; } .ao-card.t3, .ao-card.t4, .ao-card.t5, .ao-card.t6 { filter: drop-shadow(0 0 16px var(--rc)); animation: pop .4s; }
.ao-tag { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font: 700 10px var(--head); letter-spacing: 1px; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.ao-tag.sold { background: var(--ok); color: #04210f; } .ao-tag.kept { background: var(--teal); color: #032420; }
.ao-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ao-stats div { background: #ffffff08; border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; } .ao-stats small { color: var(--mut); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.ao-stats b { font: 700 20px var(--head); } .ao-stats em { font-style: normal; color: var(--acc2); font: 600 13px var(--head); }
.ao-log { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; align-content: start; max-height: calc(var(--H, 400px) - 200px); overflow-y: auto; }
.ao-li { position: relative; display: flex; flex-direction: column; align-items: center; background: #ffffff06; border-bottom: 2px solid var(--rc); border-radius: 4px; padding: 3px; animation: pop .25s; }
.ao-li img { width: 100%; height: 34px; object-fit: contain; } .ao-li span { font: 600 11px var(--head); color: var(--acc2); } .ao-li i { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: 9px; }

/* ============ DESTE ============ */
.deck { display: flex; flex-direction: column; gap: 12px; }
.deck-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-stat { flex: 1; min-width: 130px; background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; padding: 8px 12px; display: flex; flex-direction: column; }
.dk-stat small { color: var(--mut); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .dk-stat b { font: 700 20px var(--head); color: var(--acc2); } .dk-stat em { font-style: normal; font-size: 11px; color: var(--teal); }
.deck-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.dslot { position: relative; aspect-ratio: 1 / 1.12; } .dslot .card { width: 100%; }
.dslot.empty, .dslot.buy { border: 1px dashed #ffffff2a; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 26px; color: var(--mut); }
.dslot.empty small, .dslot.buy small { font-size: 11px; } .dslot.buy { border-color: #c5a8ff66; color: #c5a8ff; } .dslot.buy b { font: 600 13px var(--head); }
.deck-bottom { display: grid; grid-template-columns: 1fr minmax(220px, 30%); gap: 12px; }
.dk-bonus { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.dk-bonus div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 7px 10px; border-radius: 6px; background: #ffffff05; border: 1px solid var(--line2); opacity: .5; }
.dk-bonus div.on { opacity: 1; border-color: #3ad0c666; background: #3ad0c612; }
.dk-bonus b { font: 600 13px var(--head); } .dk-bonus small { grid-column: 1; color: var(--mut); font-size: 10px; } .dk-bonus em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font: 700 15px var(--head); color: var(--teal); }
.dk-acts { display: flex; flex-direction: column; gap: 6px; } .dk-acts p { margin: 4px 0 0; }

/* ============ GENEL İNCE AYAR ============ */
.modal { background: linear-gradient(180deg, #1a1e27, #12151b) !important; border-radius: 10px !important; }
.modal-title { text-transform: uppercase; letter-spacing: 1px; }
.rw { border-radius: 4px !important; font-family: var(--head) !important; }
.tile, .game-tile, .mission, .ach, .lvl-row, .album-row, .cal-day, .gem-deal, .stat-grid div, .bt-col, .bs-case, .bs-add, .case-pick button { border-radius: 6px !important; }
.mission, .ach, .lvl-row, .album-row, .cal-day, .stat-grid div, .bt-col, .bs-case, .bs-add, .case-pick button { background: var(--panel) !important; border-color: var(--line2) !important; }
.game-tile { border-color: var(--line2) !important; }
.game-tile b, .mission .m-txt b, .ach .m-txt b, .album-row b { font-family: var(--head) !important; letter-spacing: .5px; }
.mission.done, .ach.ready { border-color: #f0b23266 !important; }
.games-head h2, .game-top h2 { font-size: 20px; }
.toast { border-radius: 6px !important; background: #1a1e27f2 !important; }
#splash { background: radial-gradient(700px 400px at 30% 40%, #1e2533, #08090c 70%) !important; }
.splash-logo h1 { font-family: var(--head); }
.splash-logo h1 b { color: var(--acc) !important; }
.res .plus { display: none; }
@media (max-width: 760px) { .gifts { grid-template-columns: 1fr; } .feat-txt h2 { font-size: 26px; } }
/* kredili otomatik açma */
.auto-box { margin-top: 4px; padding: 8px; border-radius: 6px; background: #ffffff06; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 5px; }
.ab-h { display: flex; justify-content: space-between; align-items: center; } .ab-h b { font: 600 14px var(--head); letter-spacing: 1px; text-transform: uppercase; }
.ab-lbl { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: 1px; }
.ab-row { display: flex; gap: 3px; } .ab-row input { flex: 1; min-width: 0; text-align: center; font: 600 15px var(--head); padding: 5px 4px; }
.ab-row button { padding: 0 7px; border-radius: 4px; background: #ffffff10; border: 1px solid var(--line2); font: 600 13px var(--head); }
.ab-info { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--mut); } .ab-info b { color: var(--txt); } .ab-info em { font-style: normal; }
/* VIP ve oto tekrar */
.vip-tag { font: 700 11px var(--head); letter-spacing: 1px; color: #1e1302; background: linear-gradient(180deg, #ffd46b, #e39b1c); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.auto-box.locked { border-style: dashed; border-color: #f0b23255; } .auto-box.locked p { margin: 0; }
.gift-row { display: flex; gap: 4px; } .gift-row .btn:first-child { flex: 1; }

 .abar-s { color: var(--mut); font-size: 12px; }

.gk-tools { display: flex; align-items: center; gap: 8px; } .vip-hint { margin: -2px 0 8px; } .vip-hint .link { font-size: 12px; }
.vip-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; background: linear-gradient(100deg, #2a1f08, #171a21 60%); border: 1px solid #f0b23255; }
.vip-card.on { border-color: var(--acc); box-shadow: 0 0 18px #f0b23233; }
.vc-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; } .vc-crown { font-size: 30px; }
.vc-l b { font: 700 18px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--acc2); display: block; } .vc-l small { color: var(--mut); }
.vc-plans { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-avatar.vip::after { content: '👑'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 12px; }
/* toplu toplama */
.rw-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rw-top .seg { margin-bottom: 0; flex: 1; min-width: 0; }
.claim-bar { display: flex; gap: 6px; padding-bottom: 4px; }
.claim-keys { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.album-head .btn { flex: none; }
/* kasa savaşı: kasa şeridi */
.bt-queue { display: flex; gap: 6px; height: 74px; overflow: hidden; padding: 2px 0; }
.bq-it { position: relative; flex: none; width: calc((100% - 24px) / 5); max-width: 150px; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 6px 8px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line2); opacity: .55; transition: opacity .3s, border-color .3s, box-shadow .3s, transform .3s; }
.bq-it img, .bq-it .bs-ico { grid-row: 1 / 3; width: 46px; height: 38px; object-fit: contain; font-size: 20px; border-radius: 8px; }
.bq-it small { font: 600 11px/1.1 var(--head); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-it b { font: 600 12px var(--head); color: var(--acc2); }
.bq-it em { position: absolute; top: 3px; right: 6px; font: 600 10px var(--head); font-style: normal; color: var(--mut); }
.bq-it.cur { opacity: 1; border-color: var(--acc); box-shadow: 0 0 14px #f0b23244; transform: translateY(-1px); }
.bq-it.cur::after { content: 'AÇILIYOR'; position: absolute; bottom: 3px; right: 6px; font: 700 9px var(--head); letter-spacing: 1px; color: var(--acc); }
.bq-it.in { animation: bqIn .32s ease-out; }
.bq-it.out { animation: bqOut .32s ease-in forwards; }
@keyframes bqIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes bqOut { to { opacity: 0; transform: translateX(-40px); margin-left: calc(-1 * (100% - 24px) / 5 - 6px); } }

/* ============ DİKEY / DAR EKRAN (telefon dik tutulunca) ============ */
@media (orientation: portrait), (max-width: 700px) {
  .gifts, .case-page, .duel-lobby, .crash, .coinflip, .mines, .upgrader, .profile, .missions, .deck-bottom, .wheel-wrap { grid-template-columns: minmax(0, 1fr) !important; }
  .cp-side, .g-side { position: static !important; max-height: none !important; }
  .feat { min-height: 150px; padding: 16px; } .feat-txt h2 { font-size: 26px; } .feat-art { width: 42%; }
  .coinflip > * { grid-column: 1 !important; } .coin-stage { grid-row: auto !important; min-height: 180px; }
  .mines-grid, .up-row { grid-row: auto !important; grid-column: 1 !important; width: 100% !important; max-width: 420px; }
  .mines-info, .mines-ctrl, .upgrader > .mults, .upgrader > .btn, .upgrader > p, .crash > .crash-hist { grid-column: 1 !important; }
  .crash-screen { height: 230px; }
  .arena { grid-template-columns: 1fr; height: auto; }
  .field { min-height: 190px; } .slot { height: 170px; }
  .hand { grid-column: 1; } .hand .card { width: 18vw; max-width: 100px; }
  .bt-cols { grid-template-columns: repeat(min(var(--n), 2), 1fr); }
  .bt-items { max-height: 150px; }
  .bq-it { grid-template-columns: 1fr; justify-items: center; padding: 4px; } .bq-it small, .bq-it b { display: none; } .bq-it img, .bq-it .bs-ico { grid-row: auto; } .bt-queue { height: 58px; }
  .po-cards { flex-wrap: wrap; } .po-card { width: 30%; } .po-stage .pack { height: 46vh; }
  .wheel-wrap { justify-items: center; } .wheel-box { width: min(300px, 80vw); }
  .cal { grid-template-columns: repeat(3, 1fr); } .cal-day.big { grid-column: span 3; }
  .tu-slots { grid-template-columns: repeat(5, 1fr); }
  .mem-grid { grid-template-columns: repeat(4, 1fr); width: 100%; }
  .aim-field { height: 58vh; }
  .hl-row { grid-template-columns: 1fr auto 1fr; } .hl-btns { grid-column: 1 / -1; flex-direction: row; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .ao-body { grid-template-columns: 110px 1fr; }
  .rw-top { flex-direction: column; align-items: stretch; } .claim-bar { justify-content: flex-end; }
  .results.single, .item-detail { flex-direction: column; }
  .card.big, .detail-card, .results.single .res-grid { width: min(210px, 58vw); }
  .gk-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .vip-card { flex-direction: column; align-items: stretch; }
}
/* kilitler, çerçeveler */
.game-tile.locked { filter: grayscale(.85) brightness(.6); }
.game-tile.locked .gt-tag { background: #000a; color: var(--acc2); }
.locked-grid { filter: grayscale(.85) brightness(.6); pointer-events: none; }
.lock-note { padding: 8px 12px; border-radius: 6px; background: #ffffff08; border: 1px dashed #f0b23255; color: var(--mut); margin-bottom: 8px; font-size: 12px; } .lock-note b { color: var(--acc2); }
.lu-unlock { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .lu-unlock small { width: 100%; color: var(--teal); font: 600 11px var(--head); letter-spacing: 2px; }
.lu-unlock span { background: #3ad0c61a; border: 1px solid #3ad0c655; border-radius: 4px; padding: 3px 8px; font: 600 13px var(--head); }
.fr-bronze .av, .av.fr-bronze { box-shadow: 0 0 0 2px #c07a3a; } .fr-silver .av, .av.fr-silver { box-shadow: 0 0 0 2px #c9d3df; }
.fr-gold .av, .av.fr-gold { box-shadow: 0 0 0 2px #ffd24a, 0 0 10px #ffd24a88; } .fr-neon .av, .av.fr-neon { box-shadow: 0 0 0 2px #ff4fd8, 0 0 12px #3bf0ff; }
.fr-fire .av, .av.fr-fire { box-shadow: 0 0 0 2px #ff7a1a, 0 0 12px #ff3b3b; } .fr-ice .av, .av.fr-ice { box-shadow: 0 0 0 2px #7fe3ff, 0 0 12px #5cb6ff; }
.fr-royal .av, .av.fr-royal { box-shadow: 0 0 0 2px #c45cff, 0 0 0 4px #ffd24a; } .fr-legend .av, .av.fr-legend { box-shadow: 0 0 0 2px #ff3bd4, 0 0 16px #ff3bd4; animation: glowPulse 2s infinite; }
.fr-champion .av, .av.fr-champion { box-shadow: 0 0 0 3px #ffd24a, 0 0 18px #ffd24a; }
.prof-av .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); font-size: 30px; }
.prof-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.title-pill { font: 600 12px var(--head); letter-spacing: .5px; padding: 2px 8px; border-radius: 4px; background: #ffffff0c; border: 1px solid var(--line2); color: var(--txt); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.pick-list button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line2); }
.pick-list button.on { border-color: var(--acc); background: #f0b2321a; } .pick-list button.lock { opacity: .5; }
.pick-list b { font: 600 14px var(--head); } .pick-list small { color: var(--mut); font-size: 10px; text-align: center; }
.pick-list .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); font-size: 22px; }
/* piyasa */
.market { display: flex; flex-direction: column; gap: 6px; }
.mk-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.mk-search { flex: 2; min-width: 200px; display: flex; } .mk-search input { flex: 1; }
.mk-row > * { width: 120px; }
.mk-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 6px; background: linear-gradient(180deg, #1c2029, #161920); border: 1px solid var(--line2); text-align: center; }
.mk-tile img { width: 100%; height: 56px; object-fit: contain; } .mk-tile b { font: 600 12px var(--head); } .mk-tile small { font-size: 10px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mk-tile em { font-style: normal; font: 700 12px var(--head); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.buy-top { display: flex; gap: 12px; align-items: center; } .buy-top img { width: 150px; height: 112px; object-fit: contain; } .buy-top h3 { margin: 2px 0 4px; }
.buy-wear { display: flex; gap: 4px; margin: 10px 0 6px; } .buy-wear button { flex: 1; padding: 7px; border-radius: 4px; background: #ffffff0a; border: 1px solid var(--line2); font: 600 13px var(--head); } .buy-wear button.on { border-color: var(--acc); color: var(--acc2); } .buy-wear button:disabled { opacity: .3; }
.buy-price { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 8px 10px; background: #ffffff08; border-radius: 6px; } .buy-price b { font: 700 20px var(--head); color: var(--acc2); }
.spark { display: block; }
.d-pat { margin: 6px 0 0; font: 600 13px var(--head); color: var(--teal); }
.d-market { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: #ffffff06; } .d-market small { display: block; color: var(--mut); font-size: 10px; } .d-market b { font: 600 14px var(--head); }
.d-mast { margin: 6px 0 0; font-size: 12px; color: var(--acc2); }
.pat-badge { position: absolute; top: 15%; left: 6%; font: 700 max(6px, 7cqw) var(--head); color: var(--teal); z-index: 2; background: #000a; padding: 0 3px; border-radius: 2px; }
@media (orientation: portrait), (max-width: 700px) { .buy-top { flex-direction: column; } }

/* lig, etkinlik, sezon */
.league { display: flex; flex-direction: column; gap: 8px; }
.lg-result { padding: 8px 12px; border-radius: 6px; background: #f0b2321a; border: 1px solid #f0b23255; } .rw-inline { display: inline-flex; gap: 4px; margin-left: 6px; }
.lg-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 25%, #171a21), #171a21); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.lg-badge { font-size: 32px; } .lg-head b { font: 700 20px var(--head); letter-spacing: 1px; text-transform: uppercase; color: var(--c); display: block; } .lg-head small { color: var(--mut); }
.lg-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(var(--H, 600px) - 260px); overflow-y: auto; }
.lg-row { display: grid; grid-template-columns: 34px 30px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: var(--panel); border-left: 3px solid transparent; }
.lg-row.up { border-left-color: var(--ok); } .lg-row.down { border-left-color: var(--err); }
.lg-row.me { background: #f0b2321f; outline: 1px solid #f0b23277; }
.lg-r { font: 700 15px var(--head); color: var(--mut); text-align: center; } .lg-av { font-size: 18px; } .lg-row b { font: 600 14px var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lg-row em { font-style: normal; font: 600 14px var(--head); color: var(--acc2); }
.ev-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 8px; background: linear-gradient(110deg, var(--c1), #171a21 75%); border: 1px solid color-mix(in srgb, var(--c2) 50%, transparent); margin-bottom: 8px; }
.ev-ico { font-size: 40px; } .ev-head > div:nth-child(2) { flex: 1; } .ev-head small { color: var(--mut); font-size: 10px; letter-spacing: 1px; } .ev-head h2 { color: var(--c2); } .ev-head p { margin: 2px 0; }
.ev-tok { text-align: center; } .ev-tok b { display: block; font: 700 30px var(--head); color: var(--acc2); }
.ev-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.ev-it { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line2); text-align: left; } .ev-it b { font: 600 13px var(--head); } .ev-it span { font: 700 14px var(--head); color: var(--acc2); white-space: nowrap; } .ev-it:disabled { opacity: .45; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ss-it { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line2); opacity: .55; } .ss-it > span { font: 700 13px var(--head); color: var(--mut); }
.ss-it.reached { opacity: 1; } .ss-it.got { opacity: .5; } .ss-it.big { border-color: #ffd24a55; background: linear-gradient(180deg, #2a2412, var(--panel)); } .ss-it .m-rw { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
/* eşleşme ekranı */
.mm2 { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; text-align: center; }
.mm2 .mm-radar { width: 90px; height: 90px; margin: 0 auto 4px; }
.mm-slots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.mm-slot { width: 150px; min-height: 120px; padding: 10px 8px; border-radius: 8px; background: var(--panel); border: 1px dashed #ffffff22; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.mm-slot.filled { border-style: solid; border-color: #3ad0c655; animation: pop .35s; } .mm-slot.me { border-color: #f0b23277; }
.mm-slot b { font: 600 14px var(--head); } .mm-slot small { color: var(--mut); font-size: 10px; }
.mm-av .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); font-size: 24px; }
.mm-wait { font-size: 26px; animation: pulse 1.2s infinite; } .mm-on { font-style: normal; font-size: 10px; color: var(--ok); }
/* pro / reklam */
.vc-feat { margin: 6px 0 0; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--txt); }
.vc-plans { flex-direction: column; align-items: stretch; } .vc-plans .btn b { font-weight: 700; }
 .toggle.pro-off { opacity: .6; }
.fake-ad { text-align: center; } .fa-box { padding: 24px 10px; border-radius: 8px; background: repeating-linear-gradient(45deg, #ffffff06 0 10px, transparent 10px 20px), #10141b; border: 1px dashed #ffffff22; }
.fa-box small { color: var(--mut); letter-spacing: 2px; font-size: 10px; } .fa-box b { display: block; font: 700 26px var(--head); margin: 6px 0; color: var(--acc2); } .fa-t { font: 700 34px var(--head); margin-top: 8px; }
.gem-deal:disabled { opacity: .45; }
.acc-form { display: flex; flex-direction: column; gap: 6px; max-width: 360px; } .acc-form input { width: 100%; }
/* dar telefonlar: ızgara taşmasını engelle */
}

/* ---------- yeni oyuncu rehberi ---------- */
.onboard .ob { max-width: 380px; text-align: center; padding-top: 34px; position: relative; }
.ob-skip { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted, #9aa4b2); font: inherit; font-size: 13px; cursor: pointer; }
.ob-card { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: obIn .28s ease; }
.ob-ic { font-size: 56px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 4px 14px rgba(255,170,40,.35)); }
.ob-card h2 { margin: 4px 0 8px; font-size: 21px; }
.ob-card p { margin: 0; color: var(--muted, #b8c0cc); line-height: 1.45; font-size: 14.5px; }
.ob-dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0 4px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); transition: .2s; }
.ob-dots i.on { width: 20px; border-radius: 4px; background: var(--accent, #f5a524); }
@keyframes obIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ============ DÜZEN v2: sade üst bar + dikeyde alt menü, yatayda sol menü ============ */
:root { --st: env(safe-area-inset-top, 0px); --green: #5c9a3a; --green2: #76b84a; }
#app { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "view" "nav"; }
#topbar { grid-area: top; min-width: 0; display: flex; align-items: center; gap: 8px; height: calc(52px + var(--st)); padding: var(--st) calc(10px + var(--sr)) 0 calc(10px + var(--sl)); background: #0c0e12f0; border-bottom: 1px solid var(--line2); z-index: 5; }
#view { grid-area: view; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px calc(12px + var(--sr)) 16px calc(12px + var(--sl)); -webkit-overflow-scrolling: touch; position: relative; overscroll-behavior: contain; }
#nav { grid-area: nav; display: flex; justify-content: space-around; height: calc(58px + var(--sb)); padding: 0 var(--sr) var(--sb) var(--sl); background: #0c0e12f5; border-top: 1px solid var(--line2); z-index: 6; }
#nav button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mut); font: 600 11px var(--head); letter-spacing: .5px; text-transform: uppercase; transition: color .15s; }
#nav button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nav button.on { color: var(--txt); }
#nav button.on::before { content: ''; position: absolute; top: 0; left: 32%; right: 32%; height: 3px; border-radius: 0 0 3px 3px; background: var(--green2); box-shadow: 0 0 10px var(--green2); }
.badge { position: absolute; top: 6px; right: calc(50% - 22px); background: var(--err); color: #fff; font: 700 9px var(--body); min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; display: none; place-items: center; font-style: normal; }
.badge.show { display: grid; animation: pop .3s; }
.dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--err); box-shadow: 0 0 8px var(--err); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.3); opacity: .7; } }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.15); } }
.brand { font: 600 15px var(--head); letter-spacing: 2px; color: var(--mut); display: none; align-items: center; gap: 6px; white-space: nowrap; }
.brand b { color: var(--txt); font-weight: 700; }
.brand-mark { width: 12px; height: 16px; border-radius: 3px; background: linear-gradient(135deg, var(--acc), #e0731a); transform: skewX(-8deg); }
.tb-me { display: flex; align-items: center; flex: none; }
.tb-me .av { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; font-size: 20px; box-shadow: 0 0 0 2px #ffffff14; }
.tb-me.vip .av { box-shadow: 0 0 0 2px var(--acc); }
.lv-pill { display: flex; align-items: center; gap: 6px; height: 26px; margin-left: -10px; padding: 0 10px 0 16px; background: linear-gradient(90deg, #262b35, #1d2129); border-radius: 0 6px 6px 0; transform: skewX(-12deg); }
.lv-pill > * { transform: skewX(12deg); }
.lv-bar { width: 34px; height: 5px; border-radius: 3px; background: #ffffff1a; overflow: hidden; } .lv-bar b { display: block; height: 100%; width: 0; background: var(--acc); transition: width .5s; }
.lv-pill .lvl { font: 700 15px var(--head); color: var(--txt); min-width: 14px; }
.tb-res { margin-left: auto; display: flex; align-items: center; gap: 5px; min-width: 0; }
.res { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px 0 7px; border-radius: 6px; background: #ffffff08; border: 1px solid var(--line2); font: 700 15px var(--head); letter-spacing: .3px; position: relative; white-space: nowrap; }
.res i { font-style: normal; font-size: 12px; }
.res-coin { background: #5c9a3a1c; border-color: #76b84a44; } .res-coin i { color: var(--green2); font: 800 16px var(--head); } .res-coin b { color: #9be070; }
.res-gem b { color: #c5a8ff; }
.res small { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); font: 600 8px var(--body); color: var(--mut); white-space: nowrap; }
.tb-fs svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#gift { bottom: calc(70px + var(--sb)); right: calc(12px + var(--sr)); width: 46px; height: 46px; font-size: 22px; }
@media (max-width: 400px) { .res { padding: 0 6px; font-size: 13px; gap: 3px; } .lv-bar { width: 22px; } #tb-energy small { display: none; } }

/* yatay: menü solda dikey şerit, üst bar ince — yükseklik içeriğe kalır */
@media (orientation: landscape) {
  #app { grid-template-columns: calc(78px + var(--sl)) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav top" "nav view"; }
  #nav { flex-direction: column; justify-content: center; gap: 4px; height: auto; padding: var(--st) 0 var(--sb) var(--sl); border-top: 0; border-right: 1px solid var(--line2); }
  #nav button { flex: 0 0 auto; height: 62px; }
  #nav button.on::before { top: 18%; bottom: 18%; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  #topbar { height: calc(48px + var(--st)); padding-left: 12px; }
  .brand { display: flex; }
  #view { padding-left: 14px; padding-bottom: calc(14px + var(--sb)); }
  #gift { bottom: calc(14px + var(--sb)); }
}
@media (orientation: landscape) and (max-height: 420px) {
  #nav button { height: 54px; font-size: 10px; } #nav button svg { width: 21px; height: 21px; }
  #topbar { height: calc(44px + var(--st)); } .res { height: 28px; } .tb-me .av { width: 34px; height: 34px; }
  #view { padding-top: 8px; }
}
@media (orientation: landscape) and (max-width: 760px) { .brand { display: none; } }

/* açılış ekranı her yönde sığsın */
#splash { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; padding: 20px 16px; gap: 14px; }
.splash-logo { grid-row: 1; align-self: end; flex-wrap: wrap; justify-content: center; text-align: left; max-width: 100%; }
.splash-logo h1 { font-size: clamp(30px, 8vw, 46px); } .splash-logo h1 b { font-size: clamp(16px, 4.4vw, 24px); letter-spacing: 4px; }
.splash-load { grid-row: 2; align-self: center; } #splash-start { grid-row: 3; }
.logo-cards { transform: scale(.85); }
@media (orientation: landscape) and (max-height: 460px) { #splash { grid-template-rows: 1fr auto auto .4fr; gap: 8px; } .logo-cards { transform: scale(.65); } }

/* ---------- ana ekran v2 ---------- */
.home2 { display: flex; flex-direction: column; gap: 10px; }
.ap-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(100deg, #1d2a1a, #171a21 70%); border: 1px solid #76b84a33; }
.ap-l { position: relative; width: 54px; height: 44px; flex: none; } .ap-l img { width: 100%; height: 100%; object-fit: contain; }
.ap-lv { position: absolute; bottom: -4px; right: -4px; background: var(--green); color: #fff; font: 700 11px var(--head); padding: 0 5px; border-radius: 4px; }
.ap-m { flex: 1; min-width: 0; }
.ap-t { display: flex; align-items: baseline; gap: 8px; } .ap-t b { font: 700 15px var(--head); letter-spacing: 1.5px; color: #9be070; } .ap-t small { color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-bar { height: 8px; border-radius: 4px; background: #ffffff12; overflow: hidden; margin: 5px 0 3px; } .ap-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #b4f07a); border-radius: 4px; transition: width 1s linear; box-shadow: 0 0 10px #76b84a88; }
.ap-s { color: var(--mut); font-size: 11px; }
.btn.go { background: linear-gradient(180deg, var(--green2), var(--green)); color: #fff; border: 0; box-shadow: 0 3px 0 #3d6a24; animation: pulse 1.4s infinite; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line2); font: 600 13px var(--head); letter-spacing: .3px; white-space: nowrap; }
.chip.hot { border-color: #76b84a88; background: #5c9a3a22; color: #b4f07a; }
.sec-h { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; } .sec-h h3 { font-size: 15px; letter-spacing: 1.5px; color: #cfd4dc; } .sec-h small { color: var(--mut); font-size: 11px; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ctile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 6px 10px; border-radius: 10px; background: linear-gradient(180deg, #1c2029, #15181e); border: 1px solid var(--line2); text-align: center; transition: transform .12s, border-color .12s; min-width: 0; }
.ctile:active { transform: scale(.97); } .ctile:hover { border-color: #ffffff22; }
.ctile b { font: 600 13px var(--head); letter-spacing: .3px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-price { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 4px; background: #000a; font: 700 12px var(--head); color: #9be070; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.ctile.locked .ct-price { color: var(--acc2); }
.ct-key { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 4px; background: #f0b23230; color: var(--acc2); font: 700 12px var(--head); }
.ct-art { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; } .ct-art img { width: 100%; height: 100%; object-fit: contain; }
.ct-art .crate, .ct-art .pack { transform: scale(.82); }
.ctile.locked { filter: grayscale(.8) brightness(.65); }
.empty-gift { padding: 14px; border-radius: 10px; background: var(--panel); border: 1px dashed #ffffff22; color: var(--mut); text-align: center; } .empty-gift b { color: var(--acc2); }
@media (max-width: 400px) { .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ctile b { font-size: 12px; } .ct-price { font-size: 11px; } }

/* ---------- kasa ekranı v2 ---------- */
.case2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.c2-main { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.c2-head { width: 100%; display: flex; align-items: center; gap: 8px; }
.c2-head h2 { flex: 1; text-align: center; font-size: 20px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-back { width: 34px; height: 34px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line2); font: 600 24px/1 var(--head); color: var(--mut); }
.c2-art { width: min(300px, 70vw); aspect-ratio: 4 / 3; display: grid; place-items: center; } .c2-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 24px #0008); }
.c2-art .crate.big { transform: scale(.9); }
.btn-open { width: min(440px, 100%); height: 56px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 8px; background: linear-gradient(180deg, #6fa846, #4e8530); box-shadow: 0 4px 0 #2f5a1a, inset 0 1px 0 #ffffff33; color: #eaffd8; font: 700 22px var(--head); letter-spacing: 2px; transition: transform .08s, filter .15s; }
.btn-open svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-open:active { transform: translateY(3px); box-shadow: 0 1px 0 #2f5a1a; }
.btn-open:disabled { filter: grayscale(.8) brightness(.6); }
.c2-sub { min-height: 18px; color: var(--mut); font-size: 14px; text-align: center; } .c2-sub b.ok { color: #9be070; }
.c2-ctrl { width: min(440px, 100%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line2); }
.sw { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 600 13px var(--head); letter-spacing: 1px; color: var(--mut); }
.sw input { display: none; }
.sw i { position: relative; width: 42px; height: 24px; border-radius: 12px; background: #2a2f3a; transition: background .2s; flex: none; }
.sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8b93a1; transition: transform .2s, background .2s; }
.sw input:checked + i { background: var(--green); } .sw input:checked + i::after { transform: translateX(18px); background: #d6ffbe; }
.sw input:checked ~ span { color: var(--txt); }
.gear { width: 30px; height: 30px; display: grid; place-items: center; color: var(--mut); } .gear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sell-list { width: 100%; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line2); }
.sl-row { display: flex; align-items: center; gap: 10px; } .sl-dot { width: 14px; height: 14px; border-radius: 3px; } .sl-row b { flex: 1; font: 600 14px var(--head); }
.sl-btn { min-width: 64px; height: 28px; border-radius: 5px; font: 700 13px var(--head); letter-spacing: .5px; }
.sl-btn.sell { background: #6a1f24; color: #ff8a8a; } .sl-btn.keep { background: #1f4a2c; color: #9be070; }
.c2-count { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.c2-count span { font: 600 13px var(--head); letter-spacing: 1.5px; color: var(--mut); margin-right: 2px; }
.c2-count button[data-n] { width: 40px; height: 40px; border-radius: 6px; background: #252a34; font: 700 17px var(--head); color: var(--mut); }
.c2-count button[data-n].on { background: var(--green); color: #fff; } .c2-count button.pro-lock { opacity: .55; font-size: 14px; }
.boost { width: 44px; height: 40px; border-radius: 6px; background: #3a3220; color: #c9a54a; display: grid; place-items: center; margin-left: 6px; }
.boost svg { width: 22px; height: 22px; fill: currentColor; } .boost.on { background: linear-gradient(180deg, #ffd24a, #e8a91a); color: #1a1205; box-shadow: 0 0 14px #ffd24a66; }
.c2-more { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .c2-more .pro-off { opacity: .7; }
.c2-items .card-grid { margin-top: 6px; }
.sold-badge { position: absolute; inset: auto 0 40% 0; z-index: 4; text-align: center; font: 800 13px var(--head); letter-spacing: 2px; color: #ff8a8a; background: #000a; padding: 2px 0; transform: rotate(-8deg); }
.card.is-sold { opacity: .6; }
.card.seen { } .card.unseen img { filter: brightness(.55) saturate(.6); }
@media (orientation: landscape) {
  .case2 { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; height: 100%; }
  #view.split { overflow: hidden; }
  .c2-main, .c2-items { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; scrollbar-width: thin; }
  .c2-art { width: min(240px, 60%); }
  .btn-open { height: 50px; font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 460px) { .c2-art { width: 150px; } .c2-main { gap: 7px; } .btn-open { height: 44px; } }
/* içerik yükleme ekranı (1 sn) */
.loader { grid-area: view; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(500px 300px at 50% 40%, #1c2230, var(--bg) 70%); animation: ldIn .15s ease; }
.loader.out { opacity: 0; transition: opacity .25s; }
.loader img { width: min(200px, 50vw); max-height: 40%; object-fit: contain; animation: ldFloat 1s ease-in-out infinite; filter: drop-shadow(0 8px 20px #0009); }
.loader .ld-ico { font-size: 56px; animation: ldFloat 1s ease-in-out infinite; }
.loader b { font: 700 18px var(--head); letter-spacing: 1.5px; text-transform: uppercase; }
.ld-bar { width: min(240px, 60vw); height: 6px; border-radius: 3px; background: #ffffff12; overflow: hidden; } .ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), #b4f07a); animation: ldFill 1s ease-out forwards; }
.loader small { color: var(--mut); }
@keyframes ldFill { to { width: 100%; } } @keyframes ldFloat { 50% { transform: translateY(-6px); } } @keyframes ldIn { from { opacity: 0; } }
.loader .ld-art { animation: ldFloat 1s ease-in-out infinite; transform-origin: center; }
/* sekme çubukları ve başlık araçları dar ekranda taşmasın */
.rw-top { flex-direction: column; align-items: stretch; } .rw-top .seg { width: 100%; } .claim-bar { justify-content: flex-end; }
.seg.scroll { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
.row-h { flex-wrap: wrap; gap: 6px; } .gk-tools { flex-wrap: wrap; }
.g-side, .cp-side { position: static !important; max-height: none !important; }
.gem-deal.poor { opacity: .6; }
/* oto açma: köşede küçük durdur düğmesi */
.auto-stop { position: absolute; top: calc(8px + var(--st)); right: calc(10px + var(--sr)); z-index: 95; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 17px; background: #b3262ee6; color: #fff; font: 700 12px var(--head); letter-spacing: 1px; box-shadow: 0 4px 14px #0008; }
.auto-stop i { width: 10px; height: 10px; border-radius: 2px; background: #fff; }
.auto-stop em { font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 8px; background: #0005; text-align: center; }
.auto-stop.stopping { opacity: .55; }
/* kasa kontrolleri tek satır */
.c2-ctrl { flex-direction: column; gap: 8px; padding: 9px 10px; }
.c2-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: nowrap; }
.c2-row .sw { gap: 5px; font-size: 11.5px; letter-spacing: .5px; white-space: nowrap; }
.c2-row .sw i { width: 34px; height: 20px; } .c2-row .sw i::after { width: 14px; height: 14px; } .c2-row .sw input:checked + i::after { transform: translateX(14px); }
.c2-row .gear { width: 26px; height: 26px; flex: none; } .c2-row .gear svg { width: 19px; height: 19px; }
@media (max-width: 360px) { .c2-row .sw span { font-size: 10px; letter-spacing: 0; } }
/* çark: ödülü katla */
.w-mult { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 4px 0 8px; }
.w-mult span { width: 100%; text-align: center; font: 600 12px var(--head); letter-spacing: 1.5px; color: var(--mut); }
.w-mult button { min-width: 54px; padding: 5px 6px; border-radius: 6px; background: #252a34; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; }
.w-mult button b { font: 700 16px var(--head); } .w-mult button small { font-size: 10px; color: #c5a8ff; }
.w-mult button.on { border-color: var(--acc); background: #f0b2321f; } .w-mult button.on b { color: var(--acc2); }
/* açılışta fiyat ve oto satış etiketi */
.cell { position: relative; }
.cell-p { font-style: normal; font: 700 13px var(--head); color: #9be070; margin-top: 1px; text-shadow: 0 1px 2px #000; }
.cell-sold { position: absolute; top: 4px; left: 50%; transform: translateX(-50%) rotate(-6deg); padding: 0 6px; border-radius: 3px; background: #b3262ee6; color: #fff; font: 800 10px var(--head); letter-spacing: 1px; font-style: normal; }
.so-sum { text-align: center; margin-top: 6px; color: var(--mut); font: 600 14px var(--head); letter-spacing: .5px; animation: fadeUp .25s; } .so-sum b { color: #9be070; }
/* oto açma: son düşüşler (köşede, durdur düğmesinin altında) */
.auto-log { position: absolute; top: calc(48px + var(--st)); right: calc(10px + var(--sr)); z-index: 95; display: flex; flex-direction: column; gap: 3px; width: 168px; pointer-events: none; }
.al-it { display: grid; grid-template-columns: 30px 1fr auto 16px; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border-radius: 5px; background: #0d1016e6; border-left: 3px solid var(--rc); animation: fadeUp .25s; }
.al-it img { width: 30px; height: 22px; object-fit: contain; } .al-it span { font: 600 11px var(--head); color: #c3cfdf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-it b { font: 700 12px var(--head); color: #9be070; } .al-it i { font-style: normal; font-size: 11px; }
.al-it:nth-child(n+4) { opacity: .7; } .al-it:nth-child(n+6) { opacity: .45; }
/* adet satırı: 1-5, 10 (taç) ve boost tek satırda */
.c2-count { flex-wrap: nowrap; gap: 6px; width: min(440px, 100%); justify-content: center; }
.c2-count button[data-n], .c2-count .boost { flex: 1 1 0; min-width: 0; max-width: 50px; width: auto; height: 42px; margin-left: 0; }
.c2-count .boost { max-width: 54px; margin-left: 4px; }
/* ayar (dişli) simgesi */
.gear svg.cog, .c2-row .gear svg.cog { fill: currentColor; stroke: none; width: 21px; height: 21px; }
.gear:hover { color: var(--txt); }
/* düello güç açıklaması: kart gücü → kapışma gücü ve çarpanlar */
.pow-pop { white-space: nowrap; text-align: center; } .pow-pop small { font-size: 12px; color: var(--mut); font-weight: 600; }
.pow-pop em { font-size: 10.5px; line-height: 1.35; } .pow-pop em.neg { color: #ff8a8a; }
/* kullanıcı adı: belirgin ad + silik etiket */
.nm { display: inline-flex; align-items: baseline; max-width: 100%; min-width: 0; }
.nm-b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-t { margin-left: 1px; opacity: .38; font-weight: 400; font-size: .82em; letter-spacing: .3px; text-transform: lowercase; }
.name-edit { display: flex; gap: 6px; align-items: center; } .name-edit input { flex: 1; min-width: 0; font: 600 18px var(--head); }
.name-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 4px 0 6px; } .name-info #name-prev { font: 700 15px var(--head); } .name-info small { width: 100%; font-size: 10.5px; }
/* kart gücü: mermi simgesi */
.pw-ic { width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 1px; fill: #e8b04a; filter: drop-shadow(0 0 2px #000a); }
.pw-ic .pw-c { fill: #c98a2a; }
.card .pow { display: inline-flex; align-items: center; gap: 1px; color: #f2c46a; }
.pow-pop .pw-ic { width: .9em; height: .9em; }
/* profil: dikeyde tek sütun (başlık 1/3 sütun yayılması ikinci sütun yaratıyordu) */
@media (orientation: portrait), (max-width: 700px) { .profile > * { grid-column: 1 / -1 !important; } .best-card { max-width: 170px; } }
.name-edit input { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; max-width: none; }
/* Mitik / Efsane eşya etiketi (kasa içeriğinde) */
.odds-badge { position: absolute; right: 5px; top: 5px; z-index: 3; padding: 1px 5px; border-radius: 3px; background: #000c; font: 700 9.5px var(--head); letter-spacing: .5px; color: #3bf0ff; }
.card.tier-x { box-shadow: 0 0 0 1px #3bf0ff66, 0 0 14px #3bf0ff33; }
/* çoklu paket açılışı: kartlar küçülür ve sığar */
.po-cards.many { flex-wrap: wrap; align-content: center; gap: 6px; overflow-y: auto; max-height: 72%; }
.po-cards.many .po-card { width: min(10.5%, 92px); }
@media (orientation: portrait) { .po-cards.many .po-card { width: 18%; } }
/* ---------- ajan avatarları ---------- */
.av-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 50%; display: block; }
.tb-me .av { overflow: hidden; } .mm-av .av, .lg-av, .bt-av { overflow: hidden; }
.lg-av { width: 30px; height: 30px; border-radius: 50%; background: var(--panel2); display: grid; place-items: center; }
.bt-av { width: 26px; height: 26px; border-radius: 50%; background: var(--panel2); display: inline-grid; place-items: center; flex: none; }

/* ---------- profil v2 ---------- */
.prof2 { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin: 0 auto; width: 100%; }
.p2-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(420px 220px at 10% 0%, #2a3346, transparent 70%), linear-gradient(135deg, #1b2029, #12151b); border: 1px solid var(--line2); }
.p2-agent { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2f3a4e, #141821); box-shadow: 0 0 0 3px #ffffff1a, 0 8px 24px #0008; flex: none; }
.p2-agent img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transform: scale(1.15); transform-origin: 50% 20%; }
.p2-hero.fr-bronze .p2-agent { box-shadow: 0 0 0 3px #c07a3a; } .p2-hero.fr-silver .p2-agent { box-shadow: 0 0 0 3px #c9d3df; }
.p2-hero.fr-gold .p2-agent { box-shadow: 0 0 0 3px #ffd24a, 0 0 18px #ffd24a88; } .p2-hero.fr-neon .p2-agent { box-shadow: 0 0 0 3px #ff4fd8, 0 0 18px #3bf0ff; }
.p2-hero.fr-fire .p2-agent { box-shadow: 0 0 0 3px #ff7a1a, 0 0 18px #ff3b3b; } .p2-hero.fr-ice .p2-agent { box-shadow: 0 0 0 3px #7fe3ff, 0 0 18px #5cb6ff; }
.p2-hero.fr-royal .p2-agent { box-shadow: 0 0 0 3px #c45cff, 0 0 0 6px #ffd24a; } .p2-hero.fr-legend .p2-agent, .p2-hero.fr-champion .p2-agent { box-shadow: 0 0 0 3px #ffd24a, 0 0 22px #ff3bd4; }
.p2-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.p2-name { display: flex; align-items: center; gap: 6px; font: 700 24px var(--head); letter-spacing: .5px; min-width: 0; }
.p2-edit { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--mut); background: #ffffff0a; flex: none; }
.p2-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.p2-title { font: 600 13px var(--head); letter-spacing: 1px; color: var(--acc2); text-transform: uppercase; }
.p2-lv { display: flex; align-items: center; gap: 8px; } .p2-lv b { min-width: 30px; height: 22px; padding: 0 6px; border-radius: 5px; background: var(--acc); color: #1a1205; font: 700 14px var(--head); display: grid; place-items: center; }
.p2-bar { flex: 1; max-width: 220px; height: 6px; border-radius: 3px; background: #ffffff14; overflow: hidden; } .p2-bar i { display: block; height: 100%; background: var(--acc); }
.p2-lv small { color: var(--mut); font-size: 11px; white-space: nowrap; }
.p2-rank { font: 600 13px var(--head); color: var(--c); letter-spacing: .5px; }
.p2-worth { text-align: right; align-self: start; } .p2-worth small { display: block; color: var(--mut); font-size: 11px; } .p2-worth b { font: 700 20px var(--head); color: #9be070; }
.p2-tabs { width: 100%; margin-bottom: 0; }
.p2-body { min-width: 0; }
.p2-stats { display: flex; flex-direction: column; gap: 10px; }
.p2-best { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line2); }
.p2-best-card { width: 92px; flex: none; } .p2-best small { display: block; color: var(--mut); font-size: 11px; } .p2-best b { display: block; font: 700 16px var(--head); } .p2-best em { font-style: normal; font: 700 18px var(--head); color: #9be070; }
.p2-group h4, .p2-look h4, .p2-set h4 { margin: 0 0 6px; font: 600 12px var(--head); letter-spacing: 1.5px; color: var(--mut); text-transform: uppercase; }
.p2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.p2-grid div { padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line2); min-width: 0; }
.p2-grid small { display: block; color: var(--mut); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p2-grid b { font: 700 16px var(--head); white-space: nowrap; }
.p2-look { display: flex; flex-direction: column; gap: 14px; }
.p2-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.p2-ag { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line2); min-width: 0; }
.p2-ag img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: #1d222c; }
.p2-ag span { font: 600 11px var(--head); text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2-ag.on { border-color: var(--acc); background: #f0b2321a; } .p2-ag.lock { opacity: .5; } .p2-ag.lock img { filter: grayscale(1); }
.p2-ag em { position: absolute; top: 4px; right: 4px; font-style: normal; font: 700 9.5px var(--head); background: #000b; padding: 1px 4px; border-radius: 3px; color: var(--acc2); }
.p2-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.p2-pill { padding: 6px 11px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line2); font: 600 13px var(--head); letter-spacing: .3px; }
.p2-pill.on { border-color: var(--acc); color: var(--acc2); background: #f0b2321a; } .p2-pill.lock { opacity: .45; }
.p2-set { display: flex; flex-direction: column; gap: 10px; } .p2-set .panel { margin: 0; } .p2-owned { margin: 0 0 6px; font: 600 14px var(--head); color: var(--acc2); }
.p2-set .btn-row { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.p2-nameform input { width: 100%; font: 700 20px var(--head); padding: 8px 10px; }
@media (max-width: 520px) {
  .p2-hero { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px; }
  .p2-worth { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
  .p2-agent { width: 78px; height: 78px; } .p2-name { font-size: 21px; }
}
.energy-gate h2 { margin: 2px 0; } .eg-n { font: 700 20px var(--head); color: var(--acc2); margin: 4px 0 10px; }
/* envanter seçimi: destedeki kartlar korumalı */
.sel-bar .sel-n { font: 600 13px var(--head); color: var(--mut); margin-right: auto; }
.sel-bar.on ~ .card-grid .card.in-deck { opacity: .4; filter: grayscale(.6); }
.sel-bar.on ~ .card-grid .card.in-deck::after { content: '🔒'; position: absolute; top: 6px; left: 6px; z-index: 5; font-size: 14px; }
.side .def { font: 700 12px var(--head); color: #8fc7ff; margin-top: 3px; letter-spacing: .5px; }

/* ===== Eşya detayı (sade) + varyasyon tablosu ===== */
.d-stats.two { grid-template-columns: 1fr 1fr; }
.d-wear { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--mut); margin: 0 0 8px; }
.d-wear b { color: var(--txt); font-family: monospace; }
.d-wear .d-pat { margin: 0; padding: 1px 7px; border-radius: 4px; background: #3bf0ff1a; color: #3bf0ff; font-weight: 700; }
.var-h { font: 700 12px var(--head); letter-spacing: .5px; color: var(--acc2); margin: 2px 0 6px; text-transform: uppercase; }
.var-tbl { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 12px; }
.var-tbl th { font: 600 10.5px var(--head); color: var(--mut); text-align: right; padding: 0 8px 2px; letter-spacing: .5px; }
.var-tbl td { background: #00000040; padding: 5px 8px; text-align: right; white-space: nowrap; }
.var-tbl td:first-child { text-align: left; font: 700 12px var(--head); color: var(--txt); border-radius: 6px 0 0 6px; width: 34px; }
.var-tbl td:last-child { border-radius: 0 6px 6px 0; }
.var-tbl td b { font: 700 13px var(--head); } .var-tbl td small { display: block; color: var(--mut); font-size: 10px; }
.var-tbl td.st b { color: #ff8a3d; }
.var-pats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.var-pats span { padding: 3px 8px; border-radius: 5px; background: #3bf0ff14; border: 1px solid #3bf0ff33; font-size: 11.5px; color: #cfefff; }
.var-pats small { color: #3bf0ff; font-weight: 700; }
.var-badge { position: absolute; left: 5px; top: 24px; z-index: 3; padding: 0 5px; border-radius: 3px; background: #000a; font: 700 9px var(--head); color: #c9d4e3; letter-spacing: .3px; }
.item-detail.pv .detail-card .card .val { display: none; }

/* ===== Kasa savaşı: satır başına yatay makara + sürpriz açılışı ===== */
.bt-cols.rows { display: flex; flex-direction: column; gap: 6px; }
.bt-cols.rows .bt-col { display: grid; grid-template-columns: 140px 1fr minmax(0, 28%); grid-template-areas: "ph reel items"; gap: 5px 8px; align-items: center; padding: 6px; border-top-width: 1px; border-left: 3px solid var(--line2); }
.bt-cols.rows .bt-col.team0 { border-left-color: #ff9a1f; } .bt-cols.rows .bt-col.team1 { border-left-color: #4b8bff; } .bt-cols.rows .bt-col.team2 { border-left-color: #3ddc84; }
.bt-cols.rows .bt-ph { grid-area: ph; flex-wrap: wrap; } .bt-cols.rows .bt-ph em { width: 100%; padding-left: 31px; }
.bt-cols.rows .reel { grid-area: reel; height: 78px; }
.bt-cols.rows .reel::before, .bt-cols.rows .reel::after { top: 0; bottom: 0; height: auto; width: 34px; }
.bt-cols.rows .reel::before { left: 0; right: auto; background: linear-gradient(90deg, #080b11, transparent); }
.bt-cols.rows .reel::after { right: 0; left: auto; background: linear-gradient(270deg, #080b11, transparent); }
.bt-cols.rows .reel-track { flex-direction: row; height: 100%; }
.bt-cols.rows .reel-mark { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: translateX(-50%); }
.bt-cols.rows .rcell { width: 84px; height: 100%; border-left: 0; border-bottom: 3px solid var(--rc); margin-right: 0; box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--rc) 38%, transparent), transparent 70%), linear-gradient(180deg, #0d121b, color-mix(in srgb, var(--rc) 14%, #0d121b)); border-right: 1px solid #ffffff08; }
.bt-cols.rows .rcell img { height: 52px; max-width: 76px; filter: drop-shadow(0 3px 6px #000a); }
.bt-cols.rows .rcell.win { box-shadow: inset 0 0 22px var(--rc), 0 0 0 1px var(--rc); }
.rcell.myst { display: grid; place-items: center; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rc) 30%, #111) 0 8px, color-mix(in srgb, var(--rc) 18%, #0b0b0b) 8px 16px) !important; }
.rcell.myst span { font: 800 34px var(--head); color: #fff; text-shadow: 0 0 12px var(--rc), 0 0 2px #000; }
.rcell.myst.tease { animation: mystTease .25s ease-in-out 3; box-shadow: inset 0 0 26px var(--rc), 0 0 18px var(--rc) !important; }
@keyframes mystTease { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.12) rotate(-4deg); } 70% { transform: scale(1.12) rotate(4deg); } }
.bt-col.reveal .reel { box-shadow: 0 0 0 2px var(--acc), 0 0 22px #ffd24a66; }
.rcell.shine { animation: cellShine .9s ease-out; }
@keyframes cellShine { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.bt-cols.rows .bt-items { grid-area: items; align-content: flex-start; align-self: stretch; max-height: 78px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.bt-cols.rows .bt-item { width: auto; min-width: 76px; flex: none; }
.bt-lose { text-align: center; } .bt-lose p { margin: 6px 0; } .bt-lose .bt-av { vertical-align: middle; }
.bt-lose-won { font: 600 16px var(--head); } .bt-lose-won b { color: var(--acc2); }
@media (orientation: portrait), (max-width: 700px) {
  .bt-cols.rows .bt-col { grid-template-columns: 1fr; grid-template-areas: "ph" "reel" "items"; }
  .bt-cols.rows .bt-ph { flex-wrap: nowrap; } .bt-cols.rows .bt-ph em { width: auto; padding: 0; }
  .bt-cols.rows .bt-items { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; }
}
@media (orientation: landscape) and (max-height: 520px) { .bt-cols.rows .reel { height: 64px; } .bt-cols.rows .rcell img { height: 42px; } .bt-cols.rows .rcell.myst span { font-size: 28px; } }
/* iki satırlı düğme (etiket + tutar) — dar ekranda taşmaz */
.btn.two { flex-direction: column; gap: 1px; line-height: 1.1; padding-top: 6px; padding-bottom: 6px; }
.btn.two small { font: 600 12px var(--head); letter-spacing: .3px; opacity: .9; }
.modal-actions .btn { white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* ===== Düello: gelişim paneli, hasar hesabı, tur günlüğü ===== */
.dup-panel { display: flex; flex-direction: column; gap: 5px; }
.dup-row { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; }
.dup-ic { font-size: 18px; width: 24px; text-align: center; flex: none; }
.dup-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dup-txt b { font: 700 13px var(--head); letter-spacing: .4px; } .dup-txt small { font-size: 10.5px; color: var(--mut); line-height: 1.25; }
.dup-pips { display: flex; gap: 2px; margin-top: 2px; } .dup-pips i { flex: 1; max-width: 14px; height: 4px; border-radius: 2px; background: #ffffff14; } .dup-pips i.on { background: #8fc7ff; }
.dup-row .btn { flex: none; white-space: nowrap; }
.field { position: relative; }
.dcalc { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 12px; border-radius: 8px; background: #000d; border: 1px solid var(--line2); white-space: nowrap; animation: pop .25s; }
.dcalc b { font: 800 15px var(--head); letter-spacing: .5px; } .dcalc span { font: 600 12px var(--head); color: #c9d4e3; }
.dcalc.me { border-color: var(--ok); } .dcalc.me b { color: var(--ok); }
.dcalc.bot { border-color: var(--err); } .dcalc.bot b { color: #ff7a7a; }
.dcalc .pw-ic { width: .9em; height: .9em; vertical-align: -1px; }
.dlog { display: flex; gap: 5px; justify-content: center; min-height: 18px; flex-wrap: wrap; }
.dlog span { font: 700 11px var(--head); padding: 1px 7px; border-radius: 4px; background: #ffffff0c; color: var(--mut); }
.dlog span.me { color: var(--ok); background: #3ddc8414; } .dlog span.bot { color: #ff7a7a; background: #ff4d4d14; }

/* ===== Sezon: ücretsiz + bilet yolu, rütbe sezonu ===== */
.ss-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ss-tr { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; border-radius: 5px; background: #00000030; }
.ss-tr small { font: 700 9.5px var(--head); letter-spacing: .6px; color: var(--mut); text-transform: uppercase; }
.ss-tr.pass { background: linear-gradient(90deg, #ffd24a1a, #00000030); border: 1px solid #ffd24a33; } .ss-tr.pass small { color: #ffd24a; }
.ss-tr.lock { opacity: .55; filter: grayscale(.4); }
.ss-tr .m-rw.done { opacity: .45; text-decoration: line-through; }
.lvl-head .pass-on { display: inline-block; margin-top: 6px; font: 700 12px var(--head); color: #ffd24a; letter-spacing: .5px; }
.lvl-head #pass-buy { margin-top: 6px; }
.rs-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; margin: 8px 0; border-radius: 6px; background: var(--panel); border: 1px solid var(--line2); }
.rs-box b { font: 700 13px var(--head); } .rs-box small { color: var(--mut); font-size: 11px; } .rs-box .m-rw { flex-direction: row; flex-wrap: wrap; }
.rs-box.due { border-color: var(--acc); box-shadow: 0 0 14px #f0b23233; } .rs-box .btn { margin-left: auto; }
.pass-card .vc-crown { color: #ffd24a; }
.mast-gain { margin-top: 8px; font: 700 13px var(--head); color: var(--acc2); }
/* oran tablosu: kesin değerler, paketlerde son kart sütunu */
.odds-table th { font: 600 11px var(--head); color: var(--mut); text-align: right; padding: 2px 8px; letter-spacing: .4px; }
.odds-table td:nth-child(3) { font-size: 14px; color: var(--txt); }
.odds-note { margin: 10px 0 0; font-size: 12px; color: var(--mut); text-align: center; }