:root {
  --bg: #120c1e;
  --bg2: #1c1430;
  --card: #231a38;
  --line: #3a2d57;
  --text: #f3eefc;
  --dim: #a99cc4;
  --red: #e53935;
  --blue: #1e88e5;
  --gold: #ffc107;
  --green: #66bb6a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { min-height: 100vh; background: radial-gradient(ellipse at top, #2a1840, var(--bg) 60%); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.pos { color: var(--green); }
.neg { color: #ef9a9a; }
code { background: #000a; padding: 1px 5px; border-radius: 4px; }

/* Menü arka planı: canlı bot dövüşü */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; filter: brightness(.42) saturate(.9) blur(1.5px); transform: scale(1.03); }
#ui { position: relative; z-index: 1; min-height: 100vh; background: linear-gradient(180deg, #120c1e99, #120c1e55 40%, #120c1ecc); }

/* Animasyonlar */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 6px #ff8f0066); } 50% { filter: drop-shadow(0 0 22px #ff8f00cc); } }
@keyframes popIn { 0% { transform: scale(2.2) rotate(-6deg); opacity: 0; } 60% { transform: scale(.92) rotate(1deg); opacity: 1; } 100% { transform: none; } }
@keyframes shine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.screen > * { animation: fadeUp .35s ease-out both; }
.screen > *:nth-child(2) { animation-delay: .04s; }
.screen > *:nth-child(3) { animation-delay: .08s; }
.screen > *:nth-child(4) { animation-delay: .12s; }
.screen > *:nth-child(5) { animation-delay: .16s; }
.menu-grid > * { animation: fadeUp .4s ease-out both; }
.menu-grid > *:nth-child(2) { animation-delay: .05s; }
.menu-grid > *:nth-child(3) { animation-delay: .1s; }
.menu-grid > *:nth-child(4) { animation-delay: .15s; }
.menu-grid > *:nth-child(5) { animation-delay: .2s; }
.menu-grid > *:nth-child(6) { animation-delay: .25s; }
.menu-grid > *:nth-child(7) { animation-delay: .3s; }
.menu-grid > *:nth-child(8) { animation-delay: .35s; }
.logo { animation: glow 3s ease-in-out infinite, fadeUp .5s ease-out both !important; }
h1.win, h1.lose { animation: popIn .6s cubic-bezier(.2,1.4,.4,1) both !important; }
.btn.primary, .btn.gold { background-size: 200% 100%; position: relative; overflow: hidden; }
.btn.primary::after, .btn.gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff55 50%, transparent 70%); background-size: 200% 100%; animation: shine 3s linear infinite; pointer-events: none; }
.tile { backdrop-filter: blur(4px); box-shadow: 0 6px 18px #0006; }
.tile:hover:not(:disabled) { box-shadow: 0 10px 28px #0009, 0 0 0 1px var(--gold), 0 0 24px #ffc10733; }
.card { backdrop-filter: blur(6px); background: #231a38e6; }

/* Üst bilgi */
header.top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: #0d0916e8; backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
header .who, header .wallet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.league { border: 1px solid var(--c); color: var(--c); border-radius: 99px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.net.on { color: var(--green); font-size: 12px; }
.net.off { color: var(--dim); font-size: 12px; }

.screen { max-width: 980px; margin: 0 auto; padding: 16px; }
.screen.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6vh; }
h2 { margin: 8px 0; }
.logo { font-size: clamp(36px, 8vw, 64px); margin: 12px 0 0; letter-spacing: 2px; font-weight: 900; text-align: center;
  background: linear-gradient(#fff59d, #ff8f00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo span { background: linear-gradient(#ff8a80, #c62828); -webkit-background-clip: text; background-clip: text; }
.sub { text-align: center; color: var(--dim); margin: 0 0 16px; }

.btn { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; font-weight: 600; transition: transform .08s, background .15s; }
.btn:hover:not(:disabled) { background: #2e2348; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(#e53935, #b71c1c); border-color: #ff8a80; }
.btn.gold { background: linear-gradient(#ffca28, #ff8f00); border-color: #ffe082; color: #2a1800; }
.btn.ghost { background: transparent; }
.btn.wide { display: block; width: 100%; margin: 8px 0 14px; }
.btn.back { margin-bottom: 4px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; justify-content: inherit; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.tile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; min-height: 92px; transition: transform .1s, border-color .15s; }
.tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.tile b { font-size: 18px; }
.tile small { color: var(--dim); }
.tile.red { background: linear-gradient(135deg, #5b1515, var(--card)); }
.tile.blue { background: linear-gradient(135deg, #133a66, var(--card)); }
.tile.gold { background: linear-gradient(135deg, #5c4300, var(--card)); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 10px 0; }
.card.narrow { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: left; }
input { background: #0d0916; border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 11px; font: inherit; font-size: 17px; }
.list { display: flex; flex-direction: column; gap: 0; }
.card.item { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--r); margin: 6px 0; }
.grow { flex: 1; min-width: 0; }
.swatch { width: 46px; height: 46px; border-radius: 10px; flex: none; border: 2px solid #fff3; }
.swatch.big { width: 90px; height: 90px; margin: auto; }
.chest { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; flex: none; }
.stats { font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.stats.big { font-size: 15px; justify-content: center; }
.owned { color: var(--green); font-weight: 700; font-size: 13px; white-space: nowrap; }

.tabs, .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.tabs button, .chips button { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; }
.tabs button.on, .chips button.on { background: #fff; color: #111; }
.tabs button.on.red { background: var(--red); color: #fff; }
.tabs button.on.blue { background: var(--blue); color: #fff; }
.chips button i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--sw); margin-right: 6px; vertical-align: -1px; }

.card.coach { display: flex; gap: 14px; border-left: 4px solid var(--r); }
.card.coach.active { box-shadow: 0 0 0 2px var(--gold); }
.card.coach p { margin: 4px 0; }
.avatar { font-size: 42px; width: 60px; text-align: center; flex: none; }
.avatar img { width: 60px; height: 60px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 2px var(--r), 0 4px 12px #0008; }

.locker { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; }
.preview { background: radial-gradient(circle at 50% 70%, #3a2d57, #120c1e); border-radius: 14px; padding: 10px; }
#previewCv { width: 100%; height: 300px; display: block; }
.slot { margin-bottom: 8px; }
.slot .chips { margin: 4px 0; }

.bracket { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; }
.bcol { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 160px; }
.bcol h4 { margin: 0; color: var(--gold); font-size: 13px; text-transform: uppercase; }
.bm { background: #0d0916; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; position: relative; font-size: 13px; }
.bm.live { border-color: var(--red); }
.bp.me { color: var(--gold); font-weight: 700; }
.bp.w { font-weight: 800; }
.bp.l { opacity: .45; text-decoration: line-through; }
.bs { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--dim); }
.bm.live .bs { color: var(--red); }

table { border-collapse: collapse; width: 100%; }
.lb th, .lb td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.lb tr.me td { background: #ffc10722; }
.keys td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.keys td:first-child { font-weight: 700; white-space: nowrap; color: var(--gold); }
.cmp td, .cmp th { padding: 5px; text-align: center; }
.cmp th { color: var(--dim); font-weight: 500; }
.cmp td:first-child { color: #ff8a80; font-weight: 700; }
.cmp td:last-child { color: #82b1ff; font-weight: 700; }

.win { color: var(--gold); font-weight: 900; }
.lose { color: #ef5350; }
h1.win, h1.lose { font-size: 54px; margin: 0; }
.reward { font-size: 20px; font-weight: 800; color: var(--gold); }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--red); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dövüş ekranı */
#fight { position: fixed; inset: 0; display: flex; flex-direction: column; background: #07070c; z-index: 10; }
#stage { position: relative; flex: 1; min-height: 0; }
#cv { width: 100%; height: 100%; display: block; touch-action: none; }
.fight-btns { position: absolute; bottom: 10px; right: 12px; display: flex; gap: 6px; z-index: 2; }
@media (pointer: coarse) and (orientation: landscape) { .fight-btns { bottom: auto; top: 50%; } }
.fight-btns button { background: #000a; border: 1px solid #fff3; border-radius: 8px; padding: 4px 9px; }
#rest { position: absolute; inset: 0; display: grid; place-items: center; background: #000a; padding: 12px; }
.rest-card { background: var(--card); border: 2px solid var(--gold); border-radius: 16px; padding: 16px; width: min(560px, 100%); text-align: center; max-height: 100%; overflow: auto; }
.rest-card h3 { margin: 0 0 6px; color: var(--gold); }
.coachbox { background: #0d0916; border-radius: 10px; padding: 10px; margin: 8px 0; font-style: italic; }
.tactics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.tactics button { background: #0d0916; border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.tactics button small { color: var(--dim); font-size: 11px; }
.tactics button.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

#touch { display: none; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #0d0916; user-select: none; -webkit-user-select: none; touch-action: none; }
@media (pointer: coarse) { #touch { display: flex; } }
#touch button { border: 1px solid #fff3; background: #ffffff14; border-radius: 50%; font-weight: 800; touch-action: none; }
#touch button.on { background: #ffffff55; transform: scale(.94); }
.pad { display: flex; gap: 8px; }
.pad button { width: 62px; height: 62px; font-size: 22px; }
.pad .blk { background: #1e88e533 !important; }
.acts { display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; }
.acts button { width: 62px; height: 62px; font-size: 12px; }
.a-p { background: #e5393544 !important; }
.a-k { background: #ff980044 !important; }
.a-g { background: #66bb6a44 !important; }
.a-s { background: #00e5ff44 !important; }
.a-b { background: #ffd54f44 !important; }
@media (pointer: coarse) and (orientation: landscape) {
  #fight { flex-direction: row; flex-wrap: wrap; }
  #stage { flex: 1 1 100%; }
  #touch { position: absolute; inset: auto 0 0 0; background: transparent; pointer-events: none; }
  #touch .pad, #touch .acts { pointer-events: auto; opacity: .8; }
}

#modal { position: fixed; inset: 0; z-index: 30; background: #000b; display: grid; place-items: center; padding: 16px; }
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: center; width: min(380px, 100%); }
.reveal .burst { font-size: 64px; animation: pop .5s ease-out; filter: drop-shadow(0 0 22px var(--r)); }
@keyframes pop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: #000d; border: 1px solid var(--line); padding: 8px 16px; border-radius: 10px; transition: opacity .4s; }
.toast.ok { border-color: var(--green); }
.toast.err { border-color: var(--red); }
.toast.out { opacity: 0; }

@media (max-width: 640px) {
  .locker { grid-template-columns: 1fr; }
  #previewCv { height: 220px; }
  .tactics { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 80px; padding: 14px 12px; }
  .tile b { font-size: 16px; }
}

/* ═══════════════ ANA MENÜ (yeniden tasarım) ═══════════════ */
.home { max-width: 1120px; margin: 0 auto; padding: 18px 16px 110px; }
.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: stretch; }
.hero-left { display: flex; flex-direction: column; gap: 14px; }
.brand { position: relative; padding: 10px 0 4px; }
.brand .logo { text-align: left; font-size: clamp(42px, 7vw, 78px); margin: 0; line-height: 1; }
.kanji-bg { position: absolute; right: 0; top: -18px; font: 900 clamp(90px, 14vw, 160px)/1 serif; color: #ff525214; pointer-events: none; letter-spacing: -6px; animation: kanjiFloat 6s ease-in-out infinite; }
@keyframes kanjiFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.tag { margin: 8px 0 0; color: #e6d9ff; letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase; font-size: 13px; }
.daily { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid #ffe082; border-radius: 14px; padding: 10px 14px;
  background: linear-gradient(100deg, #5c4300, #3a2a00 60%, #231a38); box-shadow: 0 0 22px #ffc10744; animation: dailyPulse 2s ease-in-out infinite; }
.daily span { font-size: 26px; } .daily small { margin-left: auto; color: #ffe082; font-weight: 700; }
@keyframes dailyPulse { 50% { box-shadow: 0 0 34px #ffc10788; } }
.play-big { display: flex; align-items: center; gap: 16px; text-align: left; padding: 22px 24px; border-radius: 20px; border: 2px solid #ff8a80;
  background: linear-gradient(110deg, #ff5252, #c62828 45%, #7f0000); box-shadow: 0 14px 40px #b71c1c88, inset 0 2px 0 #ffffff55;
  position: relative; overflow: hidden; transition: transform .12s, box-shadow .2s; }
.play-big::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff66 50%, transparent 65%); background-size: 250% 100%; animation: shine 2.6s linear infinite; }
.play-big:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 20px 50px #ff525299, inset 0 2px 0 #ffffff66; }
.play-big:active { transform: scale(.98); }
.pb-ico { font-size: 44px; filter: drop-shadow(0 4px 6px #0008); animation: swordWiggle 2.4s ease-in-out infinite; }
@keyframes swordWiggle { 0%,100% { transform: rotate(0); } 10% { transform: rotate(-14deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(0); } }
.pb-txt b { display: block; font-size: 30px; letter-spacing: 2px; font-weight: 900; text-shadow: 0 3px 0 #0005; }
.pb-txt small { color: #ffe0e0; font-weight: 600; }
.pb-arrow { margin-left: auto; font-size: 26px; animation: arrowNudge 1.2s ease-in-out infinite; }
@keyframes arrowNudge { 50% { transform: translateX(6px); } }
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--line); backdrop-filter: blur(6px); box-shadow: 0 8px 22px #0007; transition: transform .12s, border-color .15s; }
.mode .m-ico { grid-row: span 2; font-size: 30px; align-self: center; }
.mode b { font-size: 18px; } .mode small { color: var(--dim); }
.mode.blue { background: linear-gradient(135deg, #1565c0cc, #231a38e6); }
.mode.gold { background: linear-gradient(135deg, #8d6e00cc, #231a38e6); }
.mode:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.season-card { background: #231a38d9; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; backdrop-filter: blur(6px); }
.sc-top, .sc-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-bottom { margin-top: 6px; color: var(--dim); font-size: 13px; }
.league.big { font-size: 14px; padding: 2px 12px; }
.prog { height: 10px; border-radius: 99px; background: #0d0916; margin-top: 10px; overflow: hidden; border: 1px solid #ffffff1a; }
.prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c), #fff); box-shadow: 0 0 12px var(--c); animation: progIn 1s ease-out both; }
@keyframes progIn { from { width: 0 !important; } }

.hero-right { display: flex; }
.showcase { position: relative; flex: 1; min-height: 430px; border-radius: 22px; overflow: hidden; border: 1px solid #ffffff22;
  background: radial-gradient(ellipse at 50% 85%, #e5393555, transparent 55%), radial-gradient(ellipse at 50% 30%, #3a2d57, #120c1e 75%);
  box-shadow: 0 18px 50px #000a, inset 0 0 60px #0008; }
.sc-glow { position: absolute; left: 50%; bottom: 70px; width: 260px; height: 46px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(#ffd54f66, transparent 70%); filter: blur(4px); animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 50% { opacity: .55; transform: translateX(-50%) scale(1.1); } }
#showcaseCv { position: absolute; inset: 40px 0 70px; width: 100%; height: calc(100% - 110px); }
.sc-name { position: absolute; top: 14px; left: 16px; font: 900 22px system-ui; letter-spacing: 1px; text-shadow: 0 2px 8px #000; }
.coach-chip { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 99px;
  background: #0d0916cc; border: 1px solid #ffd54f88; backdrop-filter: blur(6px); transition: transform .12s; }
.coach-chip:hover { transform: scale(1.04); }
.coach-chip .face { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #ffd54f; }
.coach-chip .face.empty { display: grid; place-items: center; background: #3a2d57; font-weight: 900; }
.cc-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.cc-txt small { font-size: 10px; color: #ffd54f; letter-spacing: 1px; }
.logo-mini { width: 30px; height: 30px; border-radius: 50%; background: #fff; object-fit: contain; }
.sc-stats { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  background: #0d0916cc; border-radius: 12px; padding: 8px 12px; backdrop-filter: blur(6px); }
.sbar { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; }
.sbar i { height: 7px; background: #ffffff14; border-radius: 99px; overflow: hidden; }
.sbar i b { display: block; height: 100%; border-radius: 99px; }
.sbar em { font-style: normal; color: var(--dim); text-align: right; }
.offline-note { text-align: center; margin-top: 14px; }

.dock { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; display: flex; gap: 4px; padding: 6px;
  background: #0d0916e6; border: 1px solid #ffffff22; border-radius: 20px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px #000a;
  animation: dockIn .5s cubic-bezier(.2,1.3,.4,1) both .2s; max-width: calc(100% - 24px); overflow-x: auto; }
@keyframes dockIn { from { transform: translate(-50%, 120%); } }
.dock button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 8px 10px; border: 0; border-radius: 14px;
  background: transparent; font-size: 12px; font-weight: 700; color: #d9cdf0; transition: background .15s, transform .12s; }
.dock button span { font-size: 22px; transition: transform .2s; }
.dock button:hover { background: #ffffff14; color: #fff; }
.dock button:hover span { transform: translateY(-3px) scale(1.15); }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .showcase { min-height: 340px; }
  .dock button { min-width: 56px; padding: 6px; font-size: 10px; }
}

/* ═══════════════ KOÇ YÜZLERİ ═══════════════ */
.avatar { position: relative; width: 72px; }
.avatar .face { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 3px var(--r), 0 6px 14px #0009; }
.avatar .badge { position: absolute; right: -6px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 2px #ffd54f; }
.coachbox { display: flex; align-items: center; gap: 12px; text-align: left; }
.coachbox .face { width: 64px; height: 64px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px #ffd54f; animation: coachTalk 1.6s ease-in-out infinite; }
@keyframes coachTalk { 50% { transform: rotate(-3deg) scale(1.03); } }

/* ═══════════════ DURAKLATMA MENÜSÜ ═══════════════ */
#pause { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 14px;
  background: radial-gradient(ellipse at center, #120c1e99, #000d); backdrop-filter: blur(7px) saturate(.8); animation: pauseFade .2s ease-out; }
@keyframes pauseFade { from { opacity: 0; } }
.pause-card { position: relative; width: min(460px, 100%); max-height: 100%; overflow: auto; text-align: center; padding: 22px 22px 18px; border-radius: 22px;
  background: linear-gradient(160deg, #2b2045f2, #160f28f2); border: 2px solid #ffd54f; box-shadow: 0 0 0 6px #ffd54f1a, 0 30px 80px #000;
  animation: pausePop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pausePop { from { transform: scale(.7) translateY(30px); opacity: 0; } }
.pause-kanji { position: absolute; right: 14px; top: -6px; font: 900 110px/1 serif; color: #ffd54f14; pointer-events: none; }
.pause-card h2 { margin: 0 0 10px; font-size: 32px; letter-spacing: 4px; font-weight: 900;
  background: linear-gradient(#fff59d, #ff8f00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pause-score { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #0d0916; border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.pause-score b { font-size: 22px; } .ps.red b { color: #ff8a80; } .ps.blue b { color: #82b1ff; } .ps-mid { color: var(--dim); font-weight: 700; }
.pause-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; font-size: 11px; text-align: left; }
.pause-bars i { display: block; height: 8px; background: #0d0916; border-radius: 99px; overflow: hidden; margin-top: 3px; }
.pause-bars b { display: block; height: 100%; background: linear-gradient(90deg, #66bb6a, #9ccc65); } .pause-bars b.op { background: linear-gradient(90deg, #ef5350, #ff8a80); }
.pause-coach { display: flex; gap: 12px; align-items: center; text-align: left; background: #0d091699; border-radius: 14px; padding: 10px; margin-bottom: 12px; font-size: 13px; }
.pause-coach img, .pause-coach .face { width: 54px; height: 54px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #ffd54f; display: grid; place-items: center; font-size: 26px; }
.pause-coach p { margin: 0; font-style: italic; }
.pause-btns { display: flex; flex-direction: column; gap: 8px; }
.pbtn { padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); background: #231a38; font-weight: 800; font-size: 16px; text-align: left;
  display: flex; align-items: center; gap: 8px; transition: transform .1s, background .15s, border-color .15s; animation: btnSlide .35s ease-out both; }
.pbtn:nth-child(2) { animation-delay: .04s; } .pbtn:nth-child(3) { animation-delay: .08s; } .pbtn:nth-child(4) { animation-delay: .12s; }
@keyframes btnSlide { from { transform: translateX(-24px); opacity: 0; } }
.pbtn:hover { transform: translateX(4px); border-color: var(--gold); background: #2e2348; }
.pbtn kbd { margin-left: auto; }
.pbtn.primary { background: linear-gradient(110deg, #ff5252, #b71c1c); border-color: #ff8a80; font-size: 18px; }
.pbtn.danger { color: #ff8a80; }
.pbtn.danger.armed { background: #b71c1c; color: #fff; animation: shakeX .35s; }
@keyframes shakeX { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
kbd { background: #0d0916; border: 1px solid #ffffff33; border-bottom-width: 3px; border-radius: 6px; padding: 1px 6px; font: 700 12px system-ui; color: #ffd54f; }
.pause-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 12px; text-align: left; font-size: 12.5px; background: #0d0916; padding: 10px; border-radius: 12px; animation: pauseFade .2s; }
.pause-note { margin: 10px 0 0; color: #ffcc80; font-size: 12.5px; }
.fight-btns button { font-size: 16px; }

/* ═══════════════ MENÜ v3 ═══════════════ */
header.top { padding: 8px 16px; }
.who { gap: 10px !important; }
.ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-weight: 900; font-size: 18px;
  background: radial-gradient(#3a2d57, #120c1e); box-shadow: 0 0 0 2px var(--c), 0 0 14px var(--c); }
.ava img { width: 100%; height: 100%; }
.who-txt { display: flex; flex-direction: column; line-height: 1.15; }
.who-txt small { color: var(--dim); font-size: 11.5px; display: flex; gap: 6px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; font-weight: 800; font-size: 14px;
  background: #0d0916; border: 1px solid #ffffff22; box-shadow: inset 0 1px 0 #ffffff14; }
.pill i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
.pill.coin i { background: radial-gradient(#ffe082, #ff8f00); box-shadow: 0 0 10px #ffb30088; }
.pill.gem i { background: radial-gradient(#b3e5fc, #7c4dff); box-shadow: 0 0 10px #7c4dff88; }
.net { display: inline-flex; align-items: center; gap: 6px; }
.net b { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.net.on b { animation: livePulse 1.6s infinite; }
@keyframes livePulse { 50% { transform: scale(1.6); opacity: .5; } }

.ticker { position: relative; z-index: 2; overflow: hidden; white-space: nowrap; background: linear-gradient(90deg, #b71c1c, #7f0000);
  border-bottom: 1px solid #ff8a8055; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px #0006; }
.ticker-track { display: inline-flex; gap: 60px; padding: 6px 0; animation: tick 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

.embers { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.embers i { position: absolute; bottom: -10px; border-radius: 50%; background: #ffb74d; box-shadow: 0 0 8px #ff6d00, 0 0 16px #ff6d0066; opacity: 0;
  animation: ember linear infinite; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(30px, -50vh); } 100% { transform: translate(-20px, -105vh); opacity: 0; } }
.home { position: relative; z-index: 1; }

.kanji-bg { font: 900 clamp(64px, 10vw, 120px)/1 system-ui, sans-serif !important; letter-spacing: 6px !important; color: transparent !important;
  -webkit-text-stroke: 2px #ff525230; top: -6px !important; }
.pause-kanji { font: 900 64px/1 system-ui, sans-serif !important; top: 4px !important; letter-spacing: 4px; }

.tilt { transition: transform .15s ease-out, box-shadow .2s !important; transform-style: preserve-3d; will-change: transform; }
.tilt::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #ffffff33, transparent 55%); }
.tilt:hover::before { opacity: 1; }
.mode { position: relative; overflow: hidden; }
.m-wm { position: absolute; right: -8px; bottom: -14px; font-size: 70px; opacity: .14; animation: wmFloat 4s ease-in-out infinite; pointer-events: none; }
@keyframes wmFloat { 50% { transform: translateY(-8px) rotate(8deg); } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #69f0ae; margin-right: 6px; box-shadow: 0 0 8px #69f0ae; animation: livePulse 1.4s infinite; }

.recent { background: #231a38d9; border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; backdrop-filter: blur(6px); }
.recent h4 { margin: 0 0 6px; font-size: 13px; color: #ffd54f; letter-spacing: 1px; text-transform: uppercase; }
.rm { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid #ffffff10; font-size: 13px; animation: fadeUp .4s both; }
.rm .chip { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.rm.w .chip { background: #2e7d32; } .rm.l .chip { background: #c62828; } .rm.d .chip { background: #616161; }
.rm-op { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rm-sc { color: var(--dim); } .rm-c { color: #ffd54f; font-weight: 700; }

.sc-spot { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 40deg, #fff3c41f 50deg, transparent 62deg 220deg, #ff525214 232deg, transparent 245deg);
  animation: spotSpin 9s linear infinite; pointer-events: none; }
@keyframes spotSpin { to { transform: rotate(360deg); } }
.sc-ring { position: absolute; left: 50%; bottom: 62px; width: 300px; height: 62px; transform: translateX(-50%); border-radius: 50%;
  border: 2px dashed #ffd54f66; box-shadow: 0 0 20px #ffd54f33, inset 0 0 20px #ffd54f22; animation: ringSpin 8s linear infinite; pointer-events: none; }
@keyframes ringSpin { to { transform: translateX(-50%) rotate(360deg); } }
.showcase { transition: box-shadow .3s; } .showcase:hover { box-shadow: 0 22px 60px #000c, 0 0 0 1px #ffd54f55, inset 0 0 60px #0008; }
.dock button.cur { background: #ffffff1f; }

/* Mobil: yeni vuruş butonları */
.acts { grid-template-columns: repeat(4, 58px) !important; }
.acts button { width: 58px !important; height: 58px !important; font-size: 11px !important; }
.a-n { background: #ab47bc44 !important; }
.a-w { background: #8d6e6344 !important; }

/* ═══════════════ ARKADAŞ LOBİSİ ═══════════════ */
.mode-row { grid-template-columns: 1fr 1fr; }
.mode.wide { grid-column: 1 / -1; }
.mode.green { background: linear-gradient(135deg, #2e7d32cc, #231a38e6); }
.lobby-start { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lobby-opt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px; }
.lobby-opt h3 { margin: 0; font-size: 22px; }
.lo-ico { font-size: 46px; filter: drop-shadow(0 4px 10px #0008); animation: wmFloat 3.5s ease-in-out infinite; }
.btn.big { font-size: 18px; padding: 13px 26px; border-radius: 14px; }
.code-input { text-align: center; font: 900 30px/1 system-ui; letter-spacing: 10px; text-transform: uppercase; width: 230px; padding: 12px; }
.lobby { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.code-card { grid-column: 1 / -1; text-align: center; background: linear-gradient(135deg, #3a2a00e6, #231a38e6); border-color: #ffd54f66; }
.code-card small { color: #ffd54f; letter-spacing: 2px; font-weight: 800; }
.code { display: flex; justify-content: center; gap: 8px; margin: 8px 0 12px; }
.code span { width: 56px; height: 68px; display: grid; place-items: center; font: 900 40px/1 system-ui; border-radius: 12px; color: #fff;
  background: linear-gradient(#ff5252, #b71c1c); box-shadow: 0 6px 0 #6d0f0f, 0 10px 20px #0008; animation: popIn .5s cubic-bezier(.2,1.4,.4,1) both; }
.code span:nth-child(2) { animation-delay: .06s; } .code span:nth-child(3) { animation-delay: .12s; } .code span:nth-child(4) { animation-delay: .18s; } .code span:nth-child(5) { animation-delay: .24s; }
.code-card .row { justify-content: center; }
.mem-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mem { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; margin: 6px 0;
  background: #0d0916; border: 1px solid #ffffff14; animation: fadeUp .3s both; transition: border-color .2s, box-shadow .2s; }
.mem.ready { border-color: #66bb6a; box-shadow: 0 0 14px #66bb6a33; }
.mem.me { background: #1d1530; }
.mem.off { opacity: .55; }
.mem.empty { border-style: dashed; }
.mem .face { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; background: #3a2d57; box-shadow: 0 0 0 2px #ffd54f88; }
.mem-name { display: flex; flex-direction: column; font-weight: 800; }
.mem-name small { color: var(--dim); font-weight: 500; font-size: 12px; }
.mem-st { font-weight: 800; font-size: 13px; }
.mem.ready .mem-st { color: #69f0ae; }
.lobby-status { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.countdown { font: 900 96px/1 system-ui; background: linear-gradient(#fff59d, #ff6f00); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: popIn .9s ease-out infinite; }
@media (max-width: 720px) { .lobby-start, .lobby { grid-template-columns: 1fr; } .code span { width: 46px; height: 58px; font-size: 32px; } }

/* ═══════════════ AÇILIŞ (logo) ═══════════════ */
#splash { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; cursor: pointer; transition: opacity .7s ease; }
#splash img { width: min(760px, 88vw); height: auto; opacity: 0; transform: scale(.94); filter: brightness(.8) drop-shadow(0 0 40px #ff6d0055);
  animation: splashIn 1.1s ease-out .15s forwards, splashGlow 2.6s ease-in-out 1.2s infinite; }
@keyframes splashIn { to { opacity: 1; transform: scale(1); } }
@keyframes splashGlow { 50% { filter: brightness(.88) drop-shadow(0 0 70px #ff6d0088); } }
#splash.out { opacity: 0; pointer-events: none; }
#splash.out img { transition: filter .7s, transform .7s; filter: brightness(0); transform: scale(1.05); }
.brand-logo { width: min(420px, 100%); height: auto; display: block; filter: drop-shadow(0 6px 24px #000a) drop-shadow(0 0 20px #ff6d0044); animation: fadeUp .5s ease-out both, logoBreath 4s ease-in-out infinite .5s; }
@keyframes logoBreath { 50% { transform: scale(1.02); filter: drop-shadow(0 6px 24px #000a) drop-shadow(0 0 34px #ff6d0077); } }
.name-logo { width: min(520px, 92vw); margin: 0 auto; }

/* Logonun koyu arka planı menüye kaynaşsın */
.brand-logo { mix-blend-mode: normal; }

/* Logo (şeffaf, kare) boyutları */
.brand-logo { width: min(300px, 70%); }
.name-logo { width: min(320px, 80vw); }

/* ═══════════════ KOÇLAR: salon arka planlı ekran ═══════════════ */
.gym-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; filter: brightness(.82) saturate(1.05); }
.gym-bg + header.top, .coach-screen { position: relative; z-index: 1; }
.coach-screen { max-width: 1100px; padding-bottom: 30px; }
.coach-hero { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; margin-top: 8px; padding: 22px; border-radius: 22px;
  background: linear-gradient(110deg, #0d0916ee 10%, #0d0916bb 60%, #0d091633); border: 1px solid #ffffff22; backdrop-filter: blur(3px);
  box-shadow: 0 20px 60px #000a; animation: fadeUp .4s both; }
.ch-portrait { position: relative; width: 280px; height: 280px; }
.ch-portrait .face { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 5px var(--r), 0 0 50px var(--r), 0 18px 40px #000c; animation: portraitIn .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes portraitIn { from { transform: scale(.7) rotate(-6deg); opacity: 0; } }
.ch-portrait .badge { position: absolute; right: 6px; bottom: 6px; width: 78px; height: 78px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 3px #ffd54f, 0 8px 18px #000a; }
.ch-info h2 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 44px); font-weight: 900; text-shadow: 0 3px 12px #000; }
.ch-rarity { display: inline-block; padding: 2px 12px; border-radius: 99px; background: var(--r); color: #111; font-weight: 900; font-size: 12px; letter-spacing: 2px; }
.ch-title { margin: 2px 0; color: #ffd54f; font-weight: 800; font-size: 17px; }
.ch-gym { margin: 0 0 8px; color: var(--dim); font-size: 13px; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ch-chips span { background: #ffffff14; border: 1px solid #ffffff26; border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.ch-quote { font-style: italic; color: #e6dcff; border-left: 3px solid var(--r); padding-left: 10px; }
.coach-strip { display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; padding-bottom: 6px; }
.cs-card { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px;
  background: #0d0916d9; border: 2px solid #ffffff1a; backdrop-filter: blur(4px); transition: transform .15s, border-color .15s; }
.cs-card img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 2px var(--r); }
.cs-card b { font-size: 14px; } .cs-card small { color: var(--dim); font-size: 11px; text-align: center; }
.cs-card:hover { transform: translateY(-3px); }
.cs-card.on { border-color: #ffd54f; box-shadow: 0 0 20px #ffd54f55; }
.cs-card.mine::after { content: '✓ Koçun'; font-size: 11px; color: #69f0ae; font-weight: 800; }
.cs-card.none span { font-size: 40px; height: 72px; display: grid; place-items: center; }
@media (max-width: 760px) { .coach-hero { grid-template-columns: 1fr; text-align: center; } .ch-portrait { width: 200px; height: 200px; margin: 0 auto; } .ch-chips, .coach-hero .row { justify-content: center; } }

/* ═══════════════ KARAKTER TASARIMI ═══════════════ */
.char-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
.char-preview { position: sticky; top: 70px; }
.cp-stage { position: relative; height: 420px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 85%, #e5393544, transparent 55%), radial-gradient(#3a2d57, #120c1e 75%); }
#charBody { position: absolute; inset: 0 30% 0 0; width: 70%; height: 100%; }
#charHead { position: absolute; right: 10px; top: 10px; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 3px #ffd54f, 0 10px 24px #000a; }
.char-opts h3 { margin: 6px 0 2px; color: #ffd54f; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.lk-group { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #ffffff10; }
.lk-group > b { font-size: 13px; color: var(--dim); }
.lk-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.lk { padding: 6px 12px; border-radius: 10px; background: #0d0916; border: 1px solid #ffffff22; font-size: 13px; font-weight: 700; transition: transform .1s; }
.lk:hover { transform: translateY(-1px); border-color: #ffd54f88; }
.lk.on { background: linear-gradient(#ff5252, #b71c1c); border-color: #ff8a80; }
.sw { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid #ffffff44; box-shadow: inset 0 -4px 6px #0004; transition: transform .1s; }
.sw:hover { transform: scale(1.12); }
.sw.on { border-color: #ffd54f; box-shadow: 0 0 0 3px #ffd54f88, inset 0 -4px 6px #0004; transform: scale(1.12); }
@media (max-width: 820px) { .char-grid { grid-template-columns: 1fr; } .char-preview { position: static; } .lk-group { grid-template-columns: 1fr; } }
body.in-fight #ui, body.in-fight #bg { display: none !important; }

/* ═══════════════ HESAP: giriş / kayıt / şifremi unuttum ═══════════════ */
.auth-screen { position: relative; z-index: 1; padding-bottom: 40px; }
.auth-card { padding: 18px 20px 20px; background: linear-gradient(160deg, #2a1f44f2, #1a1329f2); border-color: #ffffff22; box-shadow: 0 20px 60px #000a, inset 0 1px 0 #ffffff14; backdrop-filter: blur(6px); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #0d0916; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 4px; }
.auth-tab { padding: 10px; border-radius: 9px; font-weight: 800; color: var(--dim); transition: background .15s, color .15s; }
.auth-tab.on { background: linear-gradient(#e53935, #b71c1c); color: #fff; box-shadow: 0 4px 14px #e5393555; }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-form h3 { margin: 4px 0 0; }
.auth-form label { font-size: 13px; font-weight: 700; color: #d9cdee; margin-top: 4px; }
.auth-form input { width: 100%; }
.auth-form .btn.big { margin-top: 8px; width: 100%; }
.auth-form + .auth-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 8px; opacity: .7; }
.pw-eye:hover { opacity: 1; background: #ffffff14; }
.link { color: #ffd54f; font-weight: 700; padding: 6px; align-self: center; }
.link:hover { text-decoration: underline; }
.auth-msg { margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: #ffc10722; border: 1px solid #ffc10755; color: #ffe082; font-weight: 600; }
.auth-info { margin: 0; padding: 10px 12px; border-radius: 10px; background: #1e88e522; border: 1px solid #1e88e555; font-size: 14px; }
.auth-note { max-width: 420px; }
#auCode { text-align: center; font: 900 26px/1 ui-monospace, Consolas, monospace; letter-spacing: 10px; }
.ava[data-go] { cursor: pointer; }

/* Hesabım */
.acc-grid { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
.acc-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.acc-card h3 { margin: 4px 0 0; font-size: 22px; }
.acc-card p { margin: 0; }
.acc-ava { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #e53935, #6a1b9a); font: 900 52px/1 system-ui; box-shadow: 0 0 0 4px #ffffff22, 0 10px 30px #000a; }
.acc-ava img { width: 100%; height: 100%; object-fit: cover; }
.row.center { justify-content: center; }
.btn.danger { background: transparent; border-color: #e5393588; color: #ff8a80; margin-top: 10px; }
.btn.danger:hover:not(:disabled) { background: #e5393522; }
.account-screen .auth-form .btn { align-self: flex-start; }

/* 📸 Yüz tarama */
.face-banner { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin: 6px 0 12px; padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(120deg, #6a1b9a, #c62828 60%, #ff8f00); border: 1px solid #ffffff33; box-shadow: 0 10px 30px #0008; position: relative; overflow: hidden; }
.face-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffff33 50%, transparent 70%); transform: translateX(-100%); animation: fbShine 3.5s ease-in-out infinite; }
@keyframes fbShine { 60%, 100% { transform: translateX(100%); } }
.face-banner b { display: block; font-size: 18px; }
.face-banner small { color: #ffe9d6; }
.face-banner .fb-ico { font-size: 34px; filter: drop-shadow(0 4px 8px #0008); }
.face-banner .pb-arrow { margin-left: auto; }
.face-card { max-width: 620px; margin: 10px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; }
.face-card h3 { margin: 0; font-size: 22px; }
.face-card p { margin: 0; }
.face-hero { font-size: 64px; filter: drop-shadow(0 6px 16px #000a); animation: wmFloat 3.5s ease-in-out infinite; }
.face-privacy { text-align: left; margin: 4px 0; padding: 12px 14px 12px 30px; background: #0d091699; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.6; }
.file-btn { cursor: pointer; width: min(320px, 100%); text-align: center; }
.face-cv { width: min(420px, 100%); aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--line); cursor: grab; box-shadow: 0 10px 30px #000a; background: #0c0913; }
.face-cv:active { cursor: grabbing; }
.face-zoom input[type=range] { width: min(240px, 50vw); accent-color: var(--gold); }
.face-compare { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.face-compare figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.face-compare img, .face-compare canvas { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #ffffff22, 0 10px 30px #000a; }
.face-compare figcaption { color: var(--dim); font-size: 13px; font-weight: 700; }
.fc-arrow { font-size: 30px; color: var(--gold); }
.face-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.face-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: #ffffff12; font-size: 13px; font-weight: 600; }
.face-tags i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #ffffff44; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }
@media (max-width: 720px) {
  .acc-grid { grid-template-columns: 1fr; }
  .face-compare img, .face-compare canvas { width: 130px; height: 130px; }
}
.auth-tab, .pw-eye, .link { background: none; border: 0; }
.auth-tab.on { background: linear-gradient(#e53935, #b71c1c); }

/* ═══════════════ MAĞAZA: çizilmiş dükkân arka planı + ikonlu kartlar ═══════════════ */
.shop-bg { filter: brightness(.9) saturate(1.05); }
.shop-bg + header.top, .shop-screen { position: relative; z-index: 1; }
.shop-screen { max-width: 1100px; padding-bottom: 40px; }
.shop-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.shop-head h2 { font-size: 30px; text-shadow: 0 3px 12px #000; }
.shop-screen .chips button, .shop-screen .tabs button { backdrop-filter: blur(4px); background: #1a1226cc; }
.shop-screen .chips button.on, .shop-screen .tabs button.on { background: #fff; color: #111; }
.shop-feature { display: flex; align-items: center; gap: 18px; padding: 14px 20px; margin: 8px 0 6px; border-radius: 20px;
  background: linear-gradient(110deg, #120c1ee6, #2a1530e6 60%, #3a2200e6); border: 2px solid var(--r); box-shadow: 0 0 30px color-mix(in srgb, var(--r) 40%, transparent), 0 14px 40px #000a; }
.shop-feature img { width: 112px; height: 112px; flex: none; animation: wmFloat 3.6s ease-in-out infinite; filter: drop-shadow(0 8px 14px #000a); }
.shop-feature > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shop-feature small { color: #ffd54f; font-weight: 900; letter-spacing: 2px; }
.shop-feature b { font-size: 24px; }
.rar-txt { color: var(--r); font-weight: 700; font-size: 14px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 10px; }
.shop-grid.chests { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.shop-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 14px 12px 12px;
  border-radius: 18px; background: linear-gradient(180deg, #221833ee, #140e20f2); border: 1px solid #ffffff1c; border-top: 3px solid var(--r);
  box-shadow: 0 12px 30px #0009; transition: transform .15s, box-shadow .15s; overflow: hidden; }
.shop-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--r) 28%, transparent), transparent 62%); pointer-events: none; }
.shop-card:hover { box-shadow: 0 16px 40px #000b, 0 0 0 1px var(--r), 0 0 26px color-mix(in srgb, var(--r) 35%, transparent); }
.shop-card > * { position: relative; }
.shop-ico { width: 104px; height: 104px; transition: transform .2s; filter: drop-shadow(0 6px 10px #0009); }
.shop-card:hover .shop-ico { transform: scale(1.08) rotate(-3deg); }
.shop-name { font-size: 15.5px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; }
.shop-card .stats { justify-content: center; min-height: 20px; }
.shop-card .btn.buy { width: 100%; margin-top: auto; font-weight: 800; }
.shop-card .btn.poor { opacity: .6; }
.rar { position: absolute; top: 10px; left: 10px; z-index: 1; font-size: 10.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: var(--r); color: #fff; box-shadow: 0 2px 8px #0008; }
.r-legendary .rar { background: linear-gradient(90deg, #ffb300, #fff176, #ffb300); color: #3a2400; }
.r-legendary { border-top-color: #ffd54f; }
.owned-tag { margin-top: auto; width: 100%; padding: 9px; border-radius: 10px; background: #2e7d3233; color: var(--green); font-weight: 800; }
.shop-card.owned .shop-ico { filter: drop-shadow(0 6px 10px #0009) saturate(.8); }
.chest-card .shop-ico { width: 130px; height: 130px; }
.chest-card small { min-height: 2.6em; }
.shop-note { position: relative; text-shadow: 0 1px 4px #000; }
.chip-ico { width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; border-radius: 5px; }
.burst-ico { width: 150px; height: 150px; filter: drop-shadow(0 0 24px #ffd54f88); }
@media (max-width: 600px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-ico { width: 84px; height: 84px; }
  .shop-feature { flex-wrap: wrap; justify-content: center; text-align: center; }
  .shop-feature img { width: 90px; height: 90px; }
}

/* ═══════════════ Raund arası: karartma yok, köşe sahnesi görünür; kart yan tarafta ═══════════════ */
#rest { background: none !important; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; padding: 70px 14px 14px; }
#rest.hidden { display: none !important; }
#rest.side-left { justify-content: flex-start; }
#rest .rest-card { pointer-events: auto; width: min(400px, 48%); max-height: 100%; background: #160f24e6; backdrop-filter: blur(3px); box-shadow: 0 14px 40px #0009; padding: 12px 14px; }
#rest .rest-card p { margin: 6px 0; font-size: 13.5px; }
#rest .tactics button { padding: 8px; }
@media (max-width: 640px) { #rest .rest-card { width: min(320px, 62%); font-size: 13px; } }
/* Duraklatma: oyunu tamamen karartma, hafif loşlaştır */
#pause { background: radial-gradient(ellipse at center, #120c1e55, #000a) !important; backdrop-filter: none !important; }

/* ═══════════════ MAÇ SEÇ: özel rakip kartları ═══════════════ */
.play-screen { max-width: 1040px; }
.sec-title { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sec-title small { color: var(--dim); font-weight: 500; font-size: 13px; }
.rival-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rival-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 14px 12px; border-radius: 22px 22px 26px 26px;
  text-align: center; overflow: hidden; border: 2px solid var(--tc); background: linear-gradient(165deg, var(--t1), var(--t2) 55%, #120c1e);
  box-shadow: 0 14px 36px #000a, inset 0 1px 0 #ffffff33; transition: transform .15s, box-shadow .15s; color: #fff; }
.rival-card::before { content: ''; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(ellipse, #ffffff2a, transparent 65%); pointer-events: none; }
.rival-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff30 50%, transparent 65%); transform: translateX(-120%); transition: transform .6s; pointer-events: none; }
.rival-card:hover { box-shadow: 0 18px 44px #000c, 0 0 30px var(--glow); }
.rival-card:hover::after { transform: translateX(120%); }
.rival-card > * { position: relative; }
.tier-legend { --t1: #7a4a00; --t2: #3d2200; --tc: #ffd54f; --glow: #ffb30088; }
.tier-gold { --t1: #6b5310; --t2: #2e2208; --tc: #e6c35a; --glow: #ffd54f66; }
.tier-silver { --t1: #50586a; --t2: #23262e; --tc: #cfd8dc; --glow: #cfd8dc55; }
.rv-power { position: absolute; top: 12px; left: 14px; display: flex; flex-direction: column; align-items: center; line-height: 1; z-index: 2; }
.rv-power b { font: 900 38px/1 system-ui, sans-serif; color: var(--tc); text-shadow: 0 2px 8px #000; }
.rv-power small { font-weight: 900; font-size: 11px; letter-spacing: 2px; color: #fff; opacity: .85; }
.rv-tag { position: absolute; top: 14px; right: 14px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e91e63; font-weight: 900; box-shadow: 0 2px 8px #0008; }
.rv-face { width: 150px; height: 150px; border-radius: 50%; margin-top: 6px; box-shadow: 0 0 0 3px var(--tc), 0 10px 26px #000b; }
.rv-name { margin-top: 8px; font: 900 24px/1.1 system-ui, sans-serif; letter-spacing: 2px; }
.rv-title { color: var(--tc); font-weight: 700; }
.rv-quote { color: #e8e1f3; font-size: 13px; opacity: .85; min-height: 2.4em; }
.rv-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; padding-top: 8px; border-top: 1px solid #ffffff22; font-size: 13px; font-weight: 700; }
.rv-fight { padding: 6px 12px; border-radius: 10px; background: linear-gradient(#e53935, #b71c1c); box-shadow: 0 4px 12px #e5393566; }
.tier-legend .rv-power b { animation: legendGlow 2.4s ease-in-out infinite; }
@keyframes legendGlow { 50% { text-shadow: 0 0 18px #ffd54f, 0 2px 8px #000; } }



/* ═══════════════ 🎬 FRAGMAN ═══════════════ */
#trailer { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
#trailerCv { width: min(100vw, calc((100vh - 64px) * 16 / 9)); aspect-ratio: 16 / 9; display: block; background: #000; }
.tr-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 0 12px; }
.tr-info { color: #ffe082; font-weight: 700; font-size: 14px; min-width: 200px; text-align: center; }

/* ═══════════ Sosyal / kulüp / lig / turnuva sayfaları ═══════════ */
:root { --acc: #e53935; --ok: #66bb6a; }







.ico { flex: none; display: block; }
.tag { font-style: normal; font-weight: 700; color: #e8c76a; font-size: .9em; }

.shell { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 58px); }
.shell.home2 { grid-template-columns: 196px minmax(0, 1fr) 286px; }
.snav { position: sticky; top: 58px; align-self: start; height: calc(100vh - 58px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); background: #0f0f12d9; }
.snav button { position: relative; display: flex; align-items: center; gap: 11px; background: none; border: 0; border-radius: 8px; padding: 9px 11px; color: #c9c7d2; font-size: 14px; text-align: left; transition: background .12s, color .12s; }
.snav button:hover { background: #ffffff0d; color: #fff; }
.snav button.on { background: #ffffff14; color: #fff; box-shadow: inset 3px 0 0 var(--acc); }
.snav .snav-home { padding: 4px 6px 12px; justify-content: center; box-shadow: none !important; background: none !important; }
.snav .snav-home img { width: 132px; height: auto; display: block; }
.nb { position: absolute; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: #fff; font: 700 11px/18px system-ui; font-style: normal; text-align: center; }

.pg { padding: 18px 26px 40px; max-width: 1180px; width: 100%; }
.pg-head h2 { margin: 4px 0 2px; font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
.pg-head p { margin: 0 0 12px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.two > div > .card:first-child, .two > .card { margin-top: 10px; }
.ch { margin: 0 0 10px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ch-row { display: flex; justify-content: space-between; align-items: center; }
.cnt { font-style: normal; background: #ffffff14; border-radius: 99px; padding: 0 8px; font-size: 12px; color: var(--dim); }
.inline-form { display: flex; gap: 8px; margin: 6px 0 8px; }
.inline-form input { flex: 1; min-width: 0; font-size: 15px; padding: 9px 11px; }
.empty-card { text-align: center; padding: 30px 16px; color: var(--dim); }
.empty-card .ico { margin: 0 auto 6px; }
ul.plain { margin: 0; padding-left: 18px; color: #cfcdd8; } ul.plain li { margin: 5px 0; }

/* ana sahne */
.hub { padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stage { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; background: linear-gradient(120deg, #1d1a1fe8, #15151ae0); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
.stage-fig { position: relative; }
.stage-fig canvas, .stage-fig #showcaseCv { position: static; inset: auto; width: 100%; height: 330px; display: block; background: radial-gradient(ellipse at 50% 92%, #3a2a22 0, #1e1a1d 38%, transparent 70%); border-radius: 10px; }
.stage-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 8px; }
.stage-stats .sbar { display: grid; grid-template-columns: 78px 1fr 28px; gap: 6px; align-items: center; font-size: 12px; color: var(--dim); }
.stage-stats .sbar i { height: 4px; background: #ffffff12; border-radius: 2px; overflow: hidden; }
.stage-stats .sbar b { display: block; height: 100%; background: #cfcbd8; border-radius: 2px; }
.stage-stats .sbar em { font-style: normal; text-align: right; color: #cfcdd8; }
.hello { margin: 0; color: var(--dim); }
.pname { margin: 0 0 4px; font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -.5px; overflow-wrap: anywhere; }
.pmeta { margin: 0 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #cfcdd8; font-size: 14px; }
.coach-line { display: inline-flex; align-items: center; gap: 10px; background: #ffffff08; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px 6px 6px; margin-bottom: 14px; text-align: left; }
.coach-line img, .coach-line .noface { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: #ffffff0d; }
.coach-line small { display: block; color: var(--dim); font-size: 11px; } .coach-line b { font-size: 14px; }
.coach-line:hover { border-color: #4a4a56; }
.go-fight { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; background: var(--acc); border: 0; border-radius: 12px; padding: 16px 20px; color: #fff; box-shadow: 0 6px 20px #d8452f40; transition: transform .1s, background .15s; }
.go-fight:hover { background: #e4533c; transform: translateY(-1px); }
.go-fight b { display: block; font-size: 21px; font-weight: 800; } .go-fight small { opacity: .85; }
.go-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.go-row button { display: flex; align-items: center; gap: 10px; text-align: left; background: #ffffff0a; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.go-row button:hover:not(:disabled) { background: #ffffff12; border-color: #44444f; }
.go-row b { display: block; font-size: 14px; } .go-row small { display: block; color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go-row span { min-width: 0; }

.tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.t3 { display: flex; flex-direction: column; gap: 8px; text-align: left; background: #1b1b21e8; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, transform .1s; min-width: 0; }
.t3:hover { border-color: #4a4a56; transform: translateY(-1px); }
.t3-k { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); }
.t3-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.t3-main > span:last-child { min-width: 0; }
.t3-main b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t3-main small { color: var(--dim); }
.t3-f { font-size: 12px; color: var(--dim); }
.t3 .hot { color: #e8c76a; }
.daily-t { border-color: #6b5a2a; background: linear-gradient(135deg, #2a2418e8, #1b1b21e8); }
.lpbar { display: block; height: 6px; background: #ffffff12; border-radius: 3px; overflow: hidden; }
.lpbar i { display: block; height: 100%; background: var(--tc, #cfcbd8); border-radius: 3px; transition: width .4s; }
.lpbar.big { height: 10px; border-radius: 5px; margin: 8px 0 6px; max-width: 420px; }

.crest { flex: none; display: grid; place-items: center; font-weight: 800; letter-spacing: .5px; background: var(--cc, #444); border-radius: 10px 10px 50% 50% / 10px 10px 38% 38%; box-shadow: inset 0 0 0 2px #ffffff30, 0 2px 6px #0007; }
.crest.empty { width: 46px; height: 46px; background: #ffffff0d; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); }
.crest.gift { color: #e8c76a; }

/* arkadaş paneli */
.social { border-left: 1px solid var(--line); background: #0f0f12d9; padding: 16px 12px; position: sticky; top: 58px; align-self: start; height: calc(100vh - 58px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.so-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.so-add { display: flex; gap: 6px; }
.so-add input { flex: 1; min-width: 0; font-size: 14px; padding: 8px 10px; }
.so-add button { background: #ffffff10; border: 1px solid var(--line); border-radius: 10px; width: 38px; display: grid; place-items: center; }
.so-req { background: #d8452f22; border: 1px solid #d8452f66; color: #ffb3a6; border-radius: 8px; padding: 7px; font-size: 13px; }
.so-club { display: flex; align-items: center; gap: 8px; background: #ffffff08; border-radius: 8px; padding: 6px; font-size: 13px; }
.so-club > span { flex: 1; min-width: 0; } .so-club small { display: block; color: var(--dim); font-size: 11px; }
.so-list { display: flex; flex-direction: column; gap: 2px; }
.so-empty { padding: 6px 4px; }
.so-all { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px; color: var(--dim); font-size: 13px; margin-top: auto; }
.so-all:hover { color: #fff; }
.fr { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; }
.fr:hover { background: #ffffff08; }
.fr-ava { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #2a2a33; display: grid; place-items: center; font-weight: 700; }
.fr-ava i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #121216; background: #55545e; }
.fr.on .fr-ava i { background: var(--ok); } .fr.busy .fr-ava i { background: #e0a43a; }
.fr.off { opacity: .6; }
.fr-txt { flex: 1; min-width: 0; } .fr-txt b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-txt small { color: var(--dim); font-size: 12px; }
.fr-act { display: flex; gap: 4px; flex: none; }
.ib { display: inline-flex; align-items: center; gap: 5px; background: #ffffff0d; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; color: #dedce6; }
.ib:hover:not(:disabled) { background: #ffffff1a; color: #fff; }
.ib.ok { border-color: #4caf7a77; color: #9be0b8; }
.social .ib span { display: none; }

/* kulüp */
.club-form { display: flex; flex-direction: column; gap: 4px; }
.club-form label { font-size: 13px; color: var(--dim); margin-top: 6px; }
.club-form input, .club-form select { width: 100%; font-size: 15px; padding: 9px 11px; }
.club-form .btn.big { margin-top: 12px; }
select { background: #0d0d10; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; }
.cf-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.sw { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px #0006; }
.sw.on { border-color: #fff; }
.club-banner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(110deg, color-mix(in srgb, var(--cc) 30%, #16161b) 0, #16161b 60%); }
.cb-txt { flex: 1; min-width: 180px; } .cb-txt h3 { margin: 0; font-size: 22px; } .cb-txt h3 small { color: var(--dim); font-weight: 600; }
.motto { margin: 2px 0; font-style: italic; color: #d6d4de; }
.cb-nums { display: flex; gap: 22px; } .cb-nums div { text-align: center; } .cb-nums b { display: block; font-size: 22px; } .cb-nums small { color: var(--dim); font-size: 12px; }
.lb td small { color: var(--dim); }
.lb .badge-svg { display: inline-block; vertical-align: middle; }
.cl-n { display: flex; align-items: center; gap: 8px; } .cl-n small { display: block; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #55545e; } .dot.on { background: var(--ok); }
.own { color: #e8c76a; }
.btn.danger-t { margin-top: 10px; color: #ff9a8a; border-color: #d8452f55; }

/* lig */
.lg-hero { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 22px 26px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(110deg, color-mix(in srgb, var(--td) 70%, #141418) 0, #141418 70%); margin-top: 6px; }
.lg-badge { filter: drop-shadow(0 8px 18px #0009); }
.lg-info { flex: 1; min-width: 220px; } .lg-info small { color: var(--dim); } .lg-info h3 { margin: 2px 0 0; font-size: 34px; color: var(--tc); }
.lg-info p { margin: 4px 0; }
.ladder { display: flex; flex-direction: column; gap: 4px; }
.lad { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; opacity: .55; }
.lad.reached { opacity: .9; } .lad.here { opacity: 1; background: #ffffff0d; box-shadow: inset 3px 0 0 var(--tc); }
.lad-n { flex: 1; } .lad-n b { display: block; color: var(--tc); } .lad-n small { color: var(--dim); }
.lad-r { font-size: 13px; color: #d6d4de; }
.lad em { font-style: normal; font-size: 11px; background: var(--tc); color: #111; border-radius: 99px; padding: 1px 8px; font-weight: 700; }
.claim { display: flex; align-items: center; gap: 14px; border-color: #6b5a2a; background: linear-gradient(110deg, #2b2416, #1b1b21); }
.claim > div { flex: 1; } .claim p { margin: 2px 0 0; }

/* turnuvalar */
.cur-tour { border-color: #5a4a2a; }
.ct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ct-head h3 { margin: 2px 0 6px; font-size: 20px; }
.ct-pool { text-align: right; } .ct-pool b { display: block; font-size: 22px; color: #e8c76a; } .ct-pool small { color: var(--dim); font-size: 12px; }
.code-s { font-family: ui-monospace, Consolas, monospace; letter-spacing: 2px; background: #ffffff14; padding: 1px 6px; border-radius: 5px; }
.ent { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ent span { background: #ffffff0d; border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: 13px; } .ent span.me { border-color: #e8c76a88; }
.trows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.trow { display: grid; grid-template-columns: 48px minmax(0, 1fr) 120px 90px 86px; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff05; }
.trow.mine { border-color: #e8c76a66; }
.tr-size { text-align: center; font-weight: 800; font-size: 20px; line-height: 1; } .tr-size small { display: block; font-size: 10px; color: var(--dim); font-weight: 500; }
.tr-n b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-n small { color: var(--dim); font-size: 12px; }
.tr-fill { position: relative; height: 18px; background: #ffffff0d; border-radius: 9px; overflow: hidden; }
.tr-fill i { position: absolute; inset: 0 auto 0 0; background: #4caf7a55; } .tr-fill small { position: relative; display: block; text-align: center; font-size: 12px; line-height: 18px; }
.tr-fee { font-size: 13px; } .tr-fee small { display: block; color: var(--dim); font-size: 11px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.seg label { margin: 0 !important; cursor: pointer; } .seg label.off { opacity: .45; cursor: not-allowed; }
.seg input { display: none; }
.seg span { display: inline-block; border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; color: #dedce6; font-size: 14px; }
.seg input:checked + span { background: #fff; color: #111; border-color: #fff; }
.invite-card { text-align: center; } .invite-card .ico { margin: 0 auto; color: var(--ok); } .invite-card h3 { margin: 8px 0 4px; } .invite-card .row { justify-content: center; }

@media (max-width: 1180px) {
  .shell.home2 { grid-template-columns: 196px minmax(0, 1fr); }
  .shell.home2 .social { grid-column: 2; position: static; height: auto; border-left: 0; border-top: 1px solid var(--line); background: none; padding: 0 22px 30px; }
}
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .stage-fig canvas, .stage-fig #showcaseCv { height: 260px; }
  .two { grid-template-columns: 1fr; }
  .trow { grid-template-columns: 40px minmax(0, 1fr) 80px; } .tr-fill { display: none; } .trow .btn, .trow > .dim { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .shell, .shell.home2 { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .shell.home2 .social { grid-column: 1; padding: 0 16px 20px; }
  .snav { position: fixed; z-index: 20; top: auto; bottom: 0; left: 0; right: 0; height: 60px; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid var(--line); padding: 4px 6px; background: #0f0f12f5; }
  .snav button { flex-direction: column; gap: 2px; padding: 6px 9px; font-size: 10.5px; flex: none; }
  .snav button.on { box-shadow: inset 0 -2px 0 var(--acc); }
  .snav .snav-home { display: none; }
  .nb { right: 2px; top: 2px; }
  .hub, .pg { padding: 12px 16px 30px; }
  .pname { font-size: 30px; }
  .go-row, .tiles3 { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; }
  .cb-nums { gap: 14px; width: 100%; justify-content: space-between; }
  .lg-hero { padding: 16px; } .lg-badge svg { width: 96px; height: 96px; }
}

/* ═══════════ Antrenman ═══════════ */
.gym-bg ~ header.top, .gym-bg ~ .shell { position: relative; z-index: 1; }
.train-bg { filter: brightness(.55) saturate(.95) blur(1px); }
.gym-bg ~ .shell .snav { background: #0f0f12e6; }
.tr-gym { display: flex; align-items: center; gap: 14px; background: #15151bdd; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; backdrop-filter: blur(6px); }
.tr-gym img, .tr-gym .noface { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: #ffffff0d; }
.tr-gym > div { flex: 1; min-width: 0; } .tr-gym small { display: block; color: var(--dim); font-size: 12px; } .tr-gym b { display: block; font-size: 20px; }
.drills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 10px; }
.drill { display: flex; flex-direction: column; background: #15151be6; border: 1px solid var(--line); border-radius: 12px; padding: 14px; backdrop-filter: blur(6px); }
.drill p { margin: 6px 0; font-size: 14px; color: #d6d4de; }
.dr-top { display: flex; justify-content: space-between; align-items: baseline; } .dr-top b { font-size: 17px; }
.dr-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.drill.d-torba { box-shadow: inset 0 3px 0 #c23a32; } .drill.d-savunma { box-shadow: inset 0 3px 0 #3d7cc9; } .drill.d-sparring { box-shadow: inset 0 3px 0 #e8c76a; }
.tr-res { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-color: #5a4a2a; background: #1d1a16e6; }
.tr-res > div:first-child { flex: 1; min-width: 160px; } .tr-res h3 { margin: 2px 0 0; font-size: 26px; }
.rec { font-style: normal; font-size: 12px; background: #e8c76a; color: #2a1d00; border-radius: 99px; padding: 2px 9px; vertical-align: middle; }
.tr-stats { display: flex; gap: 18px; } .tr-stats span { text-align: center; font-size: 12px; color: var(--dim); } .tr-stats b { display: block; font-size: 20px; color: var(--text); }

#trainHud { position: absolute; inset: 0; pointer-events: none; z-index: 3; font-family: system-ui, sans-serif; color: #fff; }
.th-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; background: #0d0d10cc; border: 1px solid #ffffff22; border-radius: 12px; padding: 6px 16px; }
.th-top span { font-weight: 700; } .th-top small { display: block; font-weight: 500; font-size: 11px; color: #bcbac6; }
.th-time { font: 800 26px/1 ui-monospace, Consolas, monospace; } .th-time.low { color: #ff8a75; }
.th-score { position: absolute; top: 12px; left: 14px; background: #0d0d10cc; border: 1px solid #ffffff22; border-radius: 12px; padding: 8px 14px; min-width: 150px; }
.th-score b { font-size: 30px; line-height: 1; } .th-score small { margin-left: 6px; color: #bcbac6; }
.th-combo { display: block; font-size: 13px; color: #d6d4de; margin-top: 2px; } .th-combo.hot { color: #ffcf6e; font-weight: 700; }
.th-bars { position: absolute; top: 12px; right: 14px; display: grid; grid-template-columns: auto 140px; gap: 4px 8px; align-items: center; background: #0d0d10cc; border: 1px solid #ffffff22; border-radius: 12px; padding: 8px 12px; font-size: 12px; }
.th-hp { display: block; height: 8px; background: #ffffff1a; border-radius: 4px; overflow: hidden; } .th-hp b { display: block; height: 100%; background: #4caf7a; transition: width .15s; } .th-hp.op b { background: #e0a43a; }
.th-flash { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 800; text-shadow: 0 3px 12px #000; animation: fadeUp .3s both; }
.th-tip { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: min(620px, 90%); background: #0d0d10d9; border: 1px solid #ffffff22; border-radius: 10px; padding: 8px 14px; font-size: 14px; text-align: center; }
.th-tip b { color: #e8c76a; }
@media (pointer: coarse) { .th-tip { bottom: auto; top: 70px; } }
@media (max-width: 900px) { .drills { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .th-top { top: 8px; padding: 4px 10px; gap: 10px; } .th-top small { display: none; } .th-time { font-size: 20px; }
  .th-score { top: 56px; left: 8px; min-width: 0; padding: 6px 10px; } .th-score b { font-size: 22px; }
  .th-bars { top: 56px; right: 8px; grid-template-columns: auto 80px; }
}
.gym-bg ~ .shell .pg-head { text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.a-e { background: #26a69a44 !important; }

/* Ana menü: yeni modlar ve sosyal kartlar (eski tarzda) */
.mode-row { grid-template-columns: 1fr 1fr; }
.mode.orange { background: linear-gradient(135deg, #e65100cc, #231a38e6); }
.mode small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-card { cursor: pointer; transition: transform .15s, border-color .15s; }
.season-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.season-card .sc-top { align-items: center; }
.season-card .badge-svg { flex: none; filter: drop-shadow(0 2px 6px #0008); }
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.soc { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: linear-gradient(135deg, #6a1b9acc, #231a38e6); box-shadow: 0 6px 18px #0006; transition: transform .15s, border-color .15s; }
.soc:nth-child(2) { background: linear-gradient(135deg, #00838fcc, #231a38e6); }
.soc:hover { transform: translateY(-2px); border-color: var(--gold); }
.soc > span:not(.soc-ico):not(.crest) { min-width: 0; }
.soc b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc small { color: #e6dcf5; font-size: 12px; }
.soc-ico { font-size: 28px; flex: none; }
.soc .nb { position: absolute; top: 6px; right: 8px; }
.gym-bg ~ .screen.pg { position: relative; z-index: 1; }
.screen.pg .pg-head h2 { margin-top: 6px; }
@media (max-width: 520px) { .social-row { grid-template-columns: 1fr; } }
/* Vitrin: sol sütun uzasa da dövüşçü kadrajdan taşmasın */
.hero { align-items: start; }
.hero-right { position: sticky; top: 70px; }
.showcase { height: min(640px, calc(100vh - 160px)); min-height: 430px; }
@media (max-width: 820px) { .hero-right { position: static; } .showcase { height: 460px; } }
.a-u { background: #ff6d0055 !important; }

/* Mobil: çift dokunmayla / iki parmakla sayfa büyümesin, yazılar kendiliğinden büyümesin */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { touch-action: manipulation; overscroll-behavior: none; }
button, a, input, select, textarea, label, [data-go], [data-do] { touch-action: manipulation; }
canvas { touch-action: pan-x pan-y; } /* kaydırma serbest, yakınlaştırma yok */
#faceCv { touch-action: none; } /* yüz kırpma kendi sürükle/yakınlaştır hareketini yönetir */
button { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
#cv, #touch, #touch .tp { touch-action: none; }

/* ═══════════ Dokunmatik tuşlar (client/touchpad.ts) ═══════════ */
#touch { display: none; position: relative; flex: 0 0 44vh; padding: 0; background: linear-gradient(#0d0916, #07070c); gap: 0; }
@media (pointer: coarse) { #touch { display: block; } }
body.touch-on #touch { display: block; }
body.touch-off #touch { display: none !important; }
/* Yatay ekran: tuşlar oyunun üstünde, şeffaf katman */
@media (orientation: landscape) {
  #fight { flex-direction: column; flex-wrap: nowrap; }
  #touch { position: absolute; inset: 0; flex: none; background: transparent; pointer-events: none; z-index: 3; }
}
#touch .tp { pointer-events: auto; }
.tp { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 800; letter-spacing: .3px; user-select: none; -webkit-user-select: none; touch-action: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #ffffff22), color-mix(in srgb, var(--c) 30%, #00000088));
  border: 2px solid color-mix(in srgb, var(--c) 70%, #ffffff); box-shadow: 0 4px 14px #0008, inset 0 2px 0 #ffffff33;
  opacity: var(--tp-op, .85); transition: transform .06s, opacity .2s, filter .2s; }
.tp .tp-i { font-size: 2em; line-height: 1; filter: drop-shadow(0 1px 2px #0009); }
.tp .tp-t { font-size: 1em; margin-top: 2px; text-shadow: 0 1px 2px #000; }
.tp.on { transform: translate(-50%, -50%) scale(.9); filter: brightness(1.5); }
.tp.dim { filter: grayscale(.7) brightness(.7); }
.tp.ready { animation: tpReady 1s ease-in-out infinite; filter: none; }
.tp.gone { display: none; }
@keyframes tpReady { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 80%, transparent), 0 4px 14px #0008; } 50% { box-shadow: 0 0 0 10px transparent, 0 0 22px var(--c); } }
/* Hareket pedi: tek parça, parmak kaydırınca yön değişir */
.tp-pad { flex-direction: row; justify-content: space-between; border-radius: 999px; padding: 0 6%; background: linear-gradient(90deg, #ffffff22, #ffffff0a 45%, #ffffff0a 55%, #ffffff22); border-color: #ffffff66; }
.tp-pad span { font-size: 2.2em; width: 40%; text-align: center; opacity: .85; }
.tp-pad .tp-mid { width: 4px; height: 50%; background: #ffffff33; border-radius: 2px; }
.tp-pad.on-l .tp-l, .tp-pad.on-r .tp-r { opacity: 1; color: #ffd54f; text-shadow: 0 0 10px #ffd54f; }
/* Düzen editörü */
.tp-editor { position: fixed; inset: 0; z-index: 60; background: #07070c; display: flex; flex-direction: column; color: #fff; }
.tpe-stage { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #15121f 0 18px, #1a1626 18px 36px); }
.tpe-stage span { font: 800 22px system-ui; letter-spacing: 6px; color: #ffffff22; }
.tpe-layer { position: absolute; inset: 0; }
.tp-editor.portrait .tpe-stage { bottom: 44vh; }
.tp-editor.portrait .tpe-layer { top: auto; height: 44vh; background: #0d0916; }
.tpe-layer .tp { cursor: grab; }
.tpe-layer .tp.sel { outline: 3px dashed #ffd54f; outline-offset: 4px; z-index: 2; }
.tpe-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(560px, calc(100% - 20px)); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  background: #0d0916ee; border: 1px solid #ffffff22; border-radius: 14px; padding: 10px 14px; font-size: 13px; }
.tpe-title { width: 100%; font-size: 15px; }
.tpe-bar label { display: flex; align-items: center; gap: 6px; }
.tpe-bar em { font-style: normal; color: #ffd54f; font-weight: 700; }
.tpe-bar input[type=range] { width: 110px; accent-color: #ffd54f; }
.tpe-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tpe-btns button { background: #ffffff14; border: 1px solid #ffffff33; border-radius: 9px; padding: 6px 12px; color: #fff; font-weight: 700; }
.tpe-btns button.ok { background: #e53935; border-color: #ff8a80; }
.tpe-bar small { width: 100%; color: #b9b0cc; }
@media (orientation: landscape) and (max-height: 500px) { .tpe-bar { padding: 6px 10px; font-size: 12px; } .tpe-bar small { display: none; } }
.set-card .tabs { margin: 6px 0; }
.set-l { display: block; margin-top: 12px; font-weight: 700; }
/* Raund arası / maç sonu: tuşlar gizlenir (dinlenme kartı tıklanabilsin) */
#touch.tp-hide .tp { visibility: hidden; }
/* Duraklat / ses düğmeleri iki başparmağın arasında, alt ortada */
@media (orientation: landscape) and (pointer: coarse) { .fight-btns { top: auto; bottom: 8px; right: 50%; transform: translateX(50%); z-index: 4; } }
body.touch-on .fight-btns { top: auto; bottom: 8px; right: 50%; transform: translateX(50%); z-index: 4; }

/* Ses / duraklat: süre panelinin altında küçük yuvarlak düğmeler (konum JS ile) */
.fight-btns { gap: 8px; z-index: 6; }
.fight-btns button { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: #000b; }

/* ═══════════ Spor salonu: kas kartı + mini oyunlar ═══════════ */
.gym-card { display: flex; align-items: center; gap: 16px; background: linear-gradient(110deg, #3a1d14e6, #1b1424e6); border-color: #ff704366; }
.gc-lvl, .gc-pow { text-align: center; flex: none; }
.gc-lvl b { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 28px; background: radial-gradient(circle at 35% 30%, #ffab91, #d84315); box-shadow: 0 0 18px #ff704377; }
.gc-lvl small, .gc-pow small { display: block; font-size: 11px; color: #ffccbc; letter-spacing: 1px; margin-top: 2px; }
.gc-pow b { font-size: 26px; color: #ffab91; }
.gc-mid { flex: 1; min-width: 0; } .gc-mid .prog { margin: 6px 0 4px; }
.drills.minis .drill { box-shadow: inset 0 3px 0 #ffd54f; }

.mg { position: fixed; inset: 0; z-index: 55; background: #000c; display: grid; place-items: center; padding: 10px; }
.mg-card { position: relative; width: min(680px, 100%); max-height: 100%; overflow: auto; background: #1b1428; border: 1px solid #ffffff22; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mg-top { display: flex; align-items: center; gap: 12px; }
.mg-top b { flex: 1; font-size: 17px; }
.mg-time { font: 800 22px ui-monospace, Consolas, monospace; min-width: 36px; text-align: center; background: #000a; border-radius: 8px; padding: 2px 8px; }
.mg-score { font: 900 22px system-ui; color: #ffd54f; min-width: 50px; text-align: right; }
.mg-x { background: #ffffff14; border: 1px solid #ffffff33; border-radius: 50%; width: 32px; height: 32px; color: #fff; }
.mg-cv { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; background: #120c1e; touch-action: none; }
.mg-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mg-btns button { flex: 1; max-width: 150px; min-height: 64px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--c) 70%, #fff); color: #fff; font-size: 26px; font-weight: 800;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff3), color-mix(in srgb, var(--c) 35%, #0008)); touch-action: none; user-select: none; -webkit-user-select: none; }
.mg-btns button small { display: block; font-size: 12px; }
.mg-btns button.on { transform: scale(.94); filter: brightness(1.4); }
.mg-hint { margin: 0; text-align: center; font-size: 12px; color: #b9b0cc; }
.mg-end { position: absolute; inset: 0; background: #1b1428f2; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; animation: fadeUp .3s both; }
.mg-end h3 { margin: 0 0 4px; } .mg-big { font-size: 34px; font-weight: 900; margin: 4px 0; }
.mg-big em { font-style: normal; font-size: 13px; background: #ffd54f; color: #2a1d00; border-radius: 99px; padding: 2px 9px; vertical-align: middle; }
.mg-xp { color: #ffab91; font-weight: 700; min-height: 1.4em; }
@media (orientation: landscape) and (max-height: 500px) {
  .mg-card { flex-direction: row; flex-wrap: wrap; width: min(900px, 100%); }
  .mg-top { width: 100%; } .mg-cv { width: 64%; } .mg-btns { flex: 1; flex-direction: column; } .mg-btns button { max-width: none; } .mg-hint { display: none; }
}

/* ═══════════ Reklam alanları ═══════════ */
.ad-slot { position: relative; margin: 12px auto; width: 100%; max-width: 728px; min-height: 90px; border-radius: 10px; overflow: hidden; }
.ad-slot .ad-lbl { position: absolute; top: 2px; right: 6px; font-size: 10px; color: #8a7fa8; }
.ad-test { display: grid; place-items: center; align-content: center; gap: 2px; border: 2px dashed #ffffff33; background: repeating-linear-gradient(45deg, #ffffff06 0 12px, #ffffff0c 12px 24px); color: #a99cc4; }
.ad-test span { font-weight: 800; letter-spacing: 3px; font-size: 13px; }
.ad-test small { font-size: 11px; opacity: .8; }
.ad-inter { position: fixed; inset: 0; z-index: 70; background: #000d; display: grid; place-items: center; padding: 16px; }
.ad-inter-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ad-inter-card .ad-slot { min-height: 250px; max-width: 336px; }
.home { padding-bottom: 120px; }

/* --- İzleyici modu --- */
#spectBanner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: rgba(10,12,20,.82); color: #ffd54f; border: 1px solid rgba(255,213,79,.55); border-radius: 999px;
  padding: 5px 16px; font-weight: 800; letter-spacing: .5px; backdrop-filter: blur(4px); pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); display: flex; gap: 8px; align-items: baseline; }
#spectBanner small { color: #cfd6e6; font-weight: 600; letter-spacing: 0; }
#spectBanner.hidden { display: none; }
body.spectating #touch { display: none !important; }
.mem-head.watch { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.14); color: #ffd54f; }
.mem.spect { opacity: .92; }
.mem.spect .face.init { background: rgba(255,213,79,.18); color: #ffd54f; }
#spectBanner .spect-exit { pointer-events: auto; cursor: pointer; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 2px 12px; font-weight: 700; }
#spectBanner .spect-exit:hover { background: rgba(255,255,255,.22); }

/* ═══════════════ DOLAP: soyunma odası arka planı + kıyafet kartları ═══════════════ */
.locker-bg { filter: brightness(.95) saturate(1.05); }
.locker-bg + header.top, .locker-screen { position: relative; z-index: 1; }
.locker-screen { max-width: 1100px; padding-bottom: 40px; }
.lk-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lk-title h2 { font-size: 30px; text-shadow: 0 3px 12px #000; margin: 6px 0; }
.locker-screen .corner-tabs button { backdrop-filter: blur(4px); background: #141a22cc; }
.locker-screen .corner-tabs button.on { background: #fff; color: #111; }
.locker-screen .locker { grid-template-columns: minmax(240px, 320px) 1fr; align-items: start; }

/* sahne: spot ışığı altında dövüşçü, köşe renginde çerçeve */
.lk-stage { position: relative; overflow: hidden; padding: 12px; border-radius: 16px; border: 2px solid var(--c, #ffffff30);
  background: radial-gradient(ellipse at 50% 28%, #ffffff26 0, #ffffff0a 28%, transparent 55%), radial-gradient(ellipse at 50% 92%, var(--c, #ffffff30) 0, transparent 52%), linear-gradient(#10161de6, #0a0e14f2);
  box-shadow: 0 10px 34px #000a, 0 0 28px color-mix(in srgb, var(--c, #fff) 35%, transparent), inset 0 0 40px #0008; backdrop-filter: blur(3px); }
.lk-stage.red { --c: #e53935; }
.lk-stage.blue { --c: #1e88e5; }
.lk-stage #previewCv { height: 320px; }
.lk-plate { display: flex; flex-direction: column; align-items: center; margin: 0 auto 4px; padding: 4px 18px; width: max-content; max-width: 100%;
  background: linear-gradient(#ece4c4, #cdbf8a); color: #3a2a10; border-radius: 6px; border: 2px solid #8a7a45; box-shadow: 0 3px 8px #0009; }
.lk-plate b { font-size: 15px; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lk-plate small { font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: 1.5px; }
.lk-stage .stats.big { margin-top: 6px; }

/* ekipman rafları */
.lk-slot { margin-bottom: 12px; padding: 10px 12px 12px; border-radius: 14px; background: #10161dd9; border: 1px solid #ffffff1c; backdrop-filter: blur(4px); box-shadow: 0 4px 16px #0007; }
.lk-slot-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.lk-slot-head b { font-size: 15px; letter-spacing: .4px; }
.lk-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.lk-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 7px; border-radius: 12px; cursor: pointer; text-align: center; color: inherit;
  background: linear-gradient(#ffffff10, #ffffff04), #0d1218; border: 2px solid color-mix(in srgb, var(--r, #888) 45%, #ffffff10);
  transition: transform .12s, box-shadow .12s, border-color .12s; }
.lk-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px #0009, 0 0 14px color-mix(in srgb, var(--r, #888) 45%, transparent); border-color: var(--r, #888); }
.lk-item.on { border-color: #ffd54f; background: linear-gradient(#ffd54f26, #ffd54f0a), #0d1218; box-shadow: 0 0 0 1px #ffd54f, 0 0 18px #ffd54f55; }
.lk-ico { width: 56px; height: 56px; border-radius: 10px; background: radial-gradient(circle, color-mix(in srgb, var(--sw, #888) 35%, #1a2230), #0d1218); padding: 3px; }
.lk-name { font-size: 12px; font-weight: 700; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lk-item small { font-size: 10px; color: var(--r, #aaa); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.lk-on { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .6px; padding: 2px 7px; border-radius: 99px; background: #ffd54f; color: #3a2a00; box-shadow: 0 2px 6px #0008; }
.lk-item.r-legendary { animation: lkShine 2.8s ease-in-out infinite; }
@keyframes lkShine { 50% { box-shadow: 0 0 16px color-mix(in srgb, var(--r, #ffd54f) 55%, transparent); } }
.lk-note { text-shadow: 0 1px 6px #000; }
@media (max-width: 820px) {
  .locker-screen .locker { grid-template-columns: 1fr; }
  .lk-stage #previewCv { height: 240px; }
  .lk-items { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .lk-item.r-legendary { animation: none; } .lk-item { transition: none; } }

/* ═══════════════ KOÇLAR: kilit + öğrenci merdiveni ═══════════════ */
.ch-lock { position: absolute; left: 6px; bottom: 6px; width: 64px; height: 64px; display: grid; place-items: center; font-size: 32px; border-radius: 50%; background: #0d0a14e6; box-shadow: 0 0 0 3px #ffffff40, 0 8px 18px #000a; }
.coach-hero.is-locked .ch-portrait .face { filter: grayscale(.85) brightness(.75); }
.lockedtxt { color: #ffb74d; font-weight: 800; font-size: 13px; }
.cs-card.locked img { filter: grayscale(.9) brightness(.7); }
.cs-card.locked small { color: #ffb74d; }

.stu-ladder { margin-top: 14px; padding: 16px 16px 18px; border-radius: 20px; background: #0f141bd9; border: 1px solid #ffffff1c; backdrop-filter: blur(5px); box-shadow: 0 8px 28px #0009; }
.stu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stu-head h3 { margin: 0; font-size: 20px; text-shadow: 0 2px 8px #000; }
.stu-bar { height: 8px; border-radius: 99px; background: #ffffff18; margin: 10px 0 14px; overflow: hidden; }
.stu-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #43a047, #ffd54f); transition: width .5s; }
.stu-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stu-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 26px 10px 12px; border-radius: 16px; text-align: center;
  background: linear-gradient(var(--t1, #50586a), var(--t2, #23262e)); border: 2px solid color-mix(in srgb, var(--tc, #cfd8dc) 55%, transparent); }
.stu-card.cur { border-color: #ffd54f; box-shadow: 0 0 0 1px #ffd54f, 0 0 26px #ffd54f66; animation: stuPulse 2.2s ease-in-out infinite; }
.stu-card.done { opacity: .82; }
.stu-card.lock .stu-face { filter: grayscale(.9) brightness(.55); }
.stu-card.lock { opacity: .75; }
@keyframes stuPulse { 50% { box-shadow: 0 0 0 1px #ffd54f, 0 0 36px #ffd54faa; } }
.stu-stage { position: absolute; top: 7px; left: 10px; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--tc, #cfd8dc); }
.stu-pow { position: absolute; top: 4px; right: 8px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.stu-pow b { font-size: 19px; color: var(--tc, #cfd8dc); } .stu-pow small { font-size: 8px; letter-spacing: 1px; opacity: .8; }
.stu-face { width: 96px; height: 96px; border-radius: 14px; margin-top: 6px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc, #cfd8dc) 60%, transparent), 0 6px 14px #0009; }
.stu-name { font-size: 16px; margin-top: 4px; } .stu-title { color: var(--dim); font-size: 11px; }
.stu-quote { font-size: 11px; color: #ffffffb0; min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stu-ok { margin-top: auto; padding: 7px 10px; border-radius: 10px; background: #2e7d3233; color: var(--green); font-weight: 800; font-size: 12px; width: 100%; }
.stu-lock { margin-top: auto; padding: 7px 10px; border-radius: 10px; background: #ffffff10; color: var(--dim); font-size: 12px; width: 100%; }
.stu-go { margin-top: auto; width: 100%; padding: 9px 8px; font-size: 13px; } .stu-go small { display: block; font-size: 10px; opacity: .85; }
@media (max-width: 820px) { .stu-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stu-face { width: 76px; height: 76px; } }
@media (prefers-reduced-motion: reduce) { .stu-card.cur { animation: none; } }

/* ═══════════════ KOÇ SİNEMATİĞİ ═══════════════ */
.stu-replay { margin-top: 6px; width: 100%; padding: 6px 8px; border-radius: 10px; border: 1px solid #ffffff2a; background: #ffffff10; color: #ffd54f; font-size: 12px; cursor: pointer; }
.stu-replay:hover { background: #ffffff1c; }

#cine { position: fixed; inset: 0; z-index: 500; background: #000; overflow: hidden; user-select: none; cursor: pointer; animation: cineIn .5s ease both; }
#cine.out { animation: cineOut .35s ease both; }
@keyframes cineIn { from { opacity: 0; } }
@keyframes cineOut { to { opacity: 0; } }
.cine-bg { position: absolute; inset: 0; width: 100%; height: 100%; animation: cineZoom 30s ease-out both; }
@keyframes cineZoom { from { transform: scale(1.0); } to { transform: scale(1.08); } }
.cine-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 3; }
.cine-bar.top { top: 0; animation: barTop .8s cubic-bezier(.2, .8, .2, 1) both; }
.cine-bar.bottom { bottom: 0; animation: barBottom .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes barTop { from { transform: translateY(-100%); } }
@keyframes barBottom { from { transform: translateY(100%); } }
.cine-place { position: absolute; z-index: 4; top: calc(9vh + 12px); left: 18px; padding: 6px 14px; border-radius: 999px; background: #0009; color: #ffd54f; font-weight: 700; font-size: 14px; letter-spacing: .4px; backdrop-filter: blur(4px); border: 1px solid #ffffff22; }
.cine-skip { position: absolute; z-index: 5; top: calc(9vh + 10px); right: 18px; padding: 7px 16px; border-radius: 999px; border: 1px solid #ffffff44; background: #000a; color: #fff; font-weight: 700; cursor: pointer; }
.cine-skip:hover { background: #000d; }
.cine-actors { position: absolute; z-index: 2; left: 0; right: 0; top: calc(9vh + 56px); display: flex; justify-content: space-between; align-items: flex-end; padding: 0 clamp(14px, 6vw, 110px); pointer-events: none; }
.cine-actor { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .25s, opacity .25s, filter .25s; }
.cine-actor img { width: clamp(120px, 22vw, 280px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px #ffffff30, 0 18px 44px #000c; background: #1a1424; }
.cine-actor.coach img { box-shadow: 0 0 0 5px #ffd54f88, 0 18px 44px #000c; }
.cine-actor.me img { border-radius: 22px; box-shadow: 0 0 0 5px #64b5f688, 0 18px 44px #000c; }
.cine-actor figcaption { padding: 4px 14px; border-radius: 999px; background: #000b; font-weight: 800; font-size: 14px; }
.cine-actors[data-speaker="coach"] .cine-actor.me, .cine-actors[data-speaker="me"] .cine-actor.coach { opacity: .5; filter: brightness(.6); transform: scale(.94); }
.cine-actors[data-speaker="coach"] .cine-actor.coach, .cine-actors[data-speaker="me"] .cine-actor.me { transform: scale(1.05); }
.cine-box { position: absolute; z-index: 4; left: 50%; bottom: calc(9vh + 14px); transform: translateX(-50%); width: min(920px, 94vw); padding: 14px 20px 16px; border-radius: 18px; background: linear-gradient(#0b0f17ee, #05070cf5); border: 1px solid #ffffff2a; box-shadow: 0 12px 40px #000c; backdrop-filter: blur(6px); }
.cine-name { display: inline-block; margin: -30px 0 6px; padding: 3px 14px; border-radius: 8px; font-weight: 800; font-size: 14px; letter-spacing: .5px; background: #ffd54f; color: #3a2a00; box-shadow: 0 3px 8px #0008; }
.cine-name.me { background: #64b5f6; color: #07203a; }
.cine-text { margin: 4px 0 2px; font-size: clamp(16px, 2.3vw, 21px); line-height: 1.45; min-height: 2.9em; text-shadow: 0 1px 4px #000; }
.cine-next { text-align: right; font-size: 13px; color: #ffd54f; animation: cineBlink 1.1s ease-in-out infinite; }
@keyframes cineBlink { 50% { opacity: .35; } }
.cine-choices { display: none; flex-direction: column; gap: 8px; margin-top: 6px; }
.cine-choices.on { display: flex; }
.cine-choice { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid #ffffff30; background: #ffffff0e; color: #fff; font-size: clamp(15px, 2vw, 18px); cursor: pointer; }
.cine-choice:hover, .cine-choice:focus-visible { background: #64b5f633; border-color: #64b5f6; outline: none; }
.cine-choice kbd { min-width: 26px; text-align: center; padding: 2px 0; border-radius: 6px; background: #ffffff1c; font-size: 13px; }
@media (max-width: 640px) { .cine-actors { top: calc(9vh + 50px); } .cine-actor img { width: clamp(90px, 30vw, 150px); } .cine-box { padding: 12px 14px 14px; } }
@media (max-height: 560px) { .cine-actor img { width: 90px; } .cine-text { min-height: 2.4em; } }
@media (prefers-reduced-motion: reduce) { #cine, .cine-bg, .cine-bar, .cine-next { animation: none !important; } }

/* ---- Yetenekler (Qi yeteneği / ulti seçimi) ---- */
.ult-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ult-card { display: flex; flex-direction: column; gap: 8px; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s; }
.ult-card.on { border-color: #00e5ff; box-shadow: 0 0 0 1px #00e5ff55, 0 8px 28px #00e5ff22; }
.ult-cv { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; background: #0b0d14; display: block; }
.ult-steps { margin: 0 0 4px; padding-left: 20px; color: #c5b8e0; font-size: 13px; line-height: 1.6; }
.ult-card .btn { margin-top: auto; }