:root {
  --bg: #060914; --panel: rgba(13, 19, 38, 0.86); --panel2: rgba(22, 31, 60, 0.94); --glass: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.10); --line2: rgba(255, 255, 255, 0.18);
  --text: #f3f6ff; --muted: #94a3c4; --gold: #ffd23f; --gold2: #ff9f1a; --blue: #2f7bff; --cyan: #5fd8ff; --red: #ff4d6d; --green: #3ddc84; --brown: #c98a5a;
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top); --safe-b: env(safe-area-inset-bottom);
  --r: 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
#game, #swipe { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#swipe { pointer-events: none; z-index: 5; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; transition: opacity 0.35s ease-out; }
#letterbox div { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 30; transition: height 0.4s ease; pointer-events: none; }
#letterbox div:first-child { top: 0; } #letterbox div:last-child { bottom: 0; }
#letterbox.on div { height: 9vh; }
button { font-family: var(--font); color: var(--text); cursor: pointer; border: 0; }
img { -webkit-user-drag: none; }

/* --- İkonlar (SVG maske: renk currentColor'dan) --- */
.ic { display: inline-block; width: 1.1em; height: 1.1em; flex: 0 0 auto; vertical-align: -0.2em; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-time { --i: url(icons/time.svg); } .ic-aim { --i: url(icons/aim.svg); } .ic-super { --i: url(icons/super.svg); } .ic-bug { --i: url(icons/bug.svg); }
.ic-coin { --i: url(icons/coin.svg); } .ic-gem { --i: url(icons/gem.svg); } .ic-shop { --i: url(icons/shop.svg); } .ic-locker { --i: url(icons/locker.svg); }
.ic-settings { --i: url(icons/settings.svg); } .ic-daily { --i: url(icons/daily.svg); } .ic-practice { --i: url(icons/practice.svg); } .ic-career { --i: url(icons/career.svg); }
.ic-pause { --i: url(icons/pause.svg); } .ic-play { --i: url(icons/play.svg); } .ic-first { --i: url(icons/first.svg); } .ic-corner { --i: url(icons/corner.svg); }
.ic-top90 { --i: url(icons/top90.svg); } .ic-low { --i: url(icons/low.svg); } .ic-ground { --i: url(icons/ground.svg); } .ic-curve { --i: url(icons/curve.svg); }
.ic-chip { --i: url(icons/chip.svg); } .ic-power { --i: url(icons/power.svg); } .ic-far { --i: url(icons/far.svg); } .ic-header { --i: url(icons/header.svg); }
.ic-volley { --i: url(icons/volley.svg); } .ic-cross { --i: url(icons/cross.svg); } .ic-after { --i: url(icons/after.svg); } .ic-post { --i: url(icons/post.svg); }
.ic-kick { --i: url(icons/kick.svg); } .ic-passes { --i: url(icons/passes.svg); } .ic-noboost { --i: url(icons/noboost.svg); } .ic-starter { --i: url(icons/starter.svg); }
.ic-vip { --i: url(icons/vip.svg); } .ic-noads { --i: url(icons/noads.svg); } .ic-pass { --i: url(icons/pass.svg); } .ic-chest { --i: url(icons/chest.svg); }
.ic-trophy { --i: url(icons/trophy.svg); } .ic-medal { --i: url(icons/medal.svg); } .ic-lock { --i: url(icons/lock.svg); } .ic-sound { --i: url(icons/sound.svg); }
.ic-mute { --i: url(icons/mute.svg); } .ic-vibrate { --i: url(icons/vibrate.svg); } .ic-film { --i: url(icons/film.svg); } .ic-share { --i: url(icons/share.svg); }
.ic-replay { --i: url(icons/replay.svg); } .ic-keeper { --i: url(icons/keeper.svg); } .ic-whistle { --i: url(icons/whistle.svg); } .ic-sparkles { --i: url(icons/sparkles.svg); }
.ic-star { --i: url(icons/star.svg); } .ic-m-domates { --i: url(icons/m-domates.svg); } .ic-m-simit { --i: url(icons/m-simit.svg); } .ic-m-cay { --i: url(icons/m-cay.svg); } .ic-m-top { --i: url(icons/m-top.svg); } .ic-m-file { --i: url(icons/m-file.svg); } .ic-m-forma { --i: url(icons/m-forma.svg); } .ic-m-bandaj { --i: url(icons/m-bandaj.svg); } .ic-m-civi { --i: url(icons/m-civi.svg); } .ic-eye { --i: url(icons/eye.svg); }
.ic-star.on { color: var(--gold); filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.6)); } .ic-star.off { color: rgba(255, 255, 255, 0.18); }
.ic-coin { color: var(--gold); } .ic-gem { color: var(--cyan); }

.screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 16px); overflow-y: auto; touch-action: pan-y; }

/* --- Logo --- */
.logo { text-align: center; }
.logo-pre { font-weight: 700; letter-spacing: 5px; font-size: 11px; color: var(--muted); margin-bottom: 8px; opacity: 0; animation: up 0.6s 0.2s forwards; }
.logo-main { display: flex; flex-direction: column; align-items: center; line-height: 0.84; font-weight: 900; font-style: italic; }
.logo-main span { font-size: clamp(56px, 17vw, 112px); background: linear-gradient(180deg, #fff 8%, #ffe27a 52%, #ff9f1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #1a0d00) drop-shadow(0 0 28px rgba(255, 170, 40, 0.35)); transform: translateX(-120vw); animation: slam 0.55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.logo-main span:last-child { animation-delay: 0.18s; transform: translateX(120vw); }
.logo-sub { margin-top: 14px; font-weight: 700; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; opacity: 0; animation: up 0.6s 0.7s forwards; }
.logo.small .logo-main span { font-size: clamp(42px, 12.5vw, 72px); animation: none; transform: skewX(-8deg); }
@keyframes slam { 100% { transform: translateX(0) skewX(-8deg); } }
@keyframes up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#splash { justify-content: center; align-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(6, 9, 20, 0.1), rgba(6, 9, 20, 0.8)); }
.tap { position: absolute; bottom: calc(var(--safe-b) + 60px); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 13px; animation: pulse 1.4s 1.2s infinite both; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* --- Cüzdan --- */
#wallet { position: fixed; top: calc(var(--safe-t) + 10px); right: 12px; display: flex; gap: 8px; z-index: 26; }
.cur { display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg, rgba(30, 42, 78, 0.95), rgba(14, 20, 40, 0.95)); border: 1px solid var(--line2);
  border-radius: 999px; padding: 5px 12px 5px 7px; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.cur .ic { width: 20px; height: 20px; }
.cur .plus { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #6df5a8, #22b866); color: #032; font-weight: 900; padding: 0; margin-left: 2px; line-height: 22px; }
.cur.bump { animation: bump 0.4s; }
@keyframes bump { 50% { transform: scale(1.18); } }

/* --- Butonlar --- */
.big { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 16px; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, rgba(40, 54, 98, 0.95), rgba(20, 28, 56, 0.95)); border: 1px solid var(--line2); text-align: left;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 0.08s, box-shadow 0.08s; }
.big::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent); pointer-events: none; }
.big span { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; letter-spacing: 0.4px; }
.big span .ic { width: 22px; height: 22px; color: var(--gold); }
.big small { color: var(--muted); font-size: 12px; font-weight: 500; display: flex; gap: 4px; align-items: center; }
.big:active, .mid:active, .node:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.big.primary { background: linear-gradient(180deg, #ffe979 0%, #ffc021 55%, #ff9f1a 100%); color: #2a1600; border: 0; box-shadow: 0 6px 0 #a35a00, 0 10px 24px rgba(255, 160, 30, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6); padding: 18px; }
.big.primary span { font-size: 24px; font-style: italic; } .big.primary span .ic { color: #2a1600; width: 26px; height: 26px; }
.big.primary small { color: #5a3500; }
.big.green { background: linear-gradient(180deg, #7af5b0, #22b866); color: #032; box-shadow: 0 6px 0 #127a42, inset 0 2px 0 rgba(255, 255, 255, 0.5); border: 0; }
.big.green span .ic, .big.green small { color: #064a26; }
.big.purple { background: linear-gradient(180deg, #b48bff, #6d3df0); box-shadow: 0 6px 0 #3d1f99, inset 0 2px 0 rgba(255, 255, 255, 0.35); border: 0; }

/* --- Ana menü --- */
#title { justify-content: space-between; background: linear-gradient(180deg, rgba(6, 9, 20, 0.05) 25%, rgba(6, 9, 20, 0.92) 70%); padding-top: calc(var(--safe-t) + 58px); }
.menu { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 440px; margin: 0 auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 .big span { font-size: 13.5px; } .row2 .big span .ic { width: 20px; height: 20px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 16px; position: relative;
  background: linear-gradient(180deg, rgba(36, 48, 88, 0.95), rgba(18, 25, 50, 0.95)); border: 1px solid var(--line2); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 0.08s; }
.mid .ic { width: 28px; height: 28px; color: var(--gold); }
.mid span { font-size: 12px; font-weight: 700; }
.reis-tip { margin: 14px auto 0; max-width: 440px; width: 100%; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(110, 60, 30, 0.92), rgba(55, 28, 12, 0.92));
  border: 1px solid rgba(201, 138, 90, 0.6); border-radius: 16px; padding: 8px 12px 8px 8px; font-size: 13px; line-height: 1.35; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
.reis-tip img { width: 52px; height: 52px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); flex: 0 0 auto; }
.reis-tip span::before { content: "Hamam Reis"; display: block; font-weight: 900; color: #ffd9a8; font-size: 12px; margin-bottom: 2px; }

/* --- Başlık barı --- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bar h2 { margin: 0; font-size: 24px; font-weight: 900; font-style: italic; flex: 1; }
.back { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(180deg, rgba(40, 54, 98, 0.95), rgba(20, 28, 56, 0.95)); border: 1px solid var(--line2); font-size: 28px; line-height: 36px; padding: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.starsum { display: flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 900; font-size: 18px; }
#map, #shop, #settings { background: radial-gradient(ellipse at 50% 0%, rgba(30, 45, 90, 0.95), rgba(6, 9, 20, 0.98) 70%); padding-top: calc(var(--safe-t) + 58px); }

/* --- Kariyer haritası --- */
.chapter { position: relative; border-radius: 22px; padding: 16px 14px 18px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.chapter::before { content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 28px, transparent 28px 56px); }
.chapter h3 { position: relative; margin: 0; font-size: 21px; font-weight: 900; font-style: italic; }
.chapter .csub { position: relative; color: rgba(255, 255, 255, 0.75); font-size: 12px; margin: 3px 0 14px; display: flex; align-items: center; gap: 4px; }
.chapter.c-mahalle { background: linear-gradient(160deg, #23306a, #121a3a 60%, #0c1228); }
.chapter.c-amator { background: linear-gradient(160deg, #1d7a52, #12452f 60%, #0b2a1d); }
.chapter.c-stadyum { background: linear-gradient(160deg, #6a2350, #351233 60%, #1a0a1d); }
.chapter.c-yagmur { background: linear-gradient(160deg, #3a0f4a, #1a0b2a 55%, #08060f); box-shadow: 0 0 26px rgba(255, 45, 154, 0.25), 0 8px 24px rgba(0,0,0,0.35); }
.chapter.locked { filter: grayscale(0.7) brightness(0.7); }
/* kilit notu: başlığın altında kendi satırında, dar ekranda başlıkla çakışmaz */
.chapter .cneed { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 12px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 5px 11px; border-radius: 999px; }
.chapter .cneed .ic { width: 13px; height: 13px; }
.nodes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; }
.node { position: relative; aspect-ratio: 1; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); border: 2px solid rgba(255, 255, 255, 0.22);
  font-weight: 900; font-size: 22px; font-style: italic; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45); transition: transform 0.08s; }
.node small { display: flex; gap: 1px; } .node small .ic { width: 12px; height: 12px; }
.node .ic-lock { width: 22px; height: 22px; color: rgba(255, 255, 255, 0.6); }
.node.done { border-color: rgba(255, 210, 63, 0.7); background: linear-gradient(180deg, rgba(255, 210, 63, 0.28), rgba(255, 160, 30, 0.08)); }
.node.cur { border-color: var(--gold); background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; animation: glow 1.6s infinite; }
.node.cur small .ic-star.off { color: rgba(42, 22, 0, 0.25); }
.node.lock { opacity: 0.55; }
.node.boss { grid-column: span 2; aspect-ratio: auto; flex-direction: row; gap: 10px; padding: 8px 12px 8px 8px; font-size: 14px; justify-content: flex-start; text-align: left;
  background: linear-gradient(135deg, #8a4b2a, #3a1d0c); border-color: #e0a477; color: #fff; }
.node.boss span { flex: 1; line-height: 1.1; }
.node.boss small { position: absolute; bottom: 6px; right: 10px; }
.boss-face { width: 52px; height: 52px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(255, 210, 63, 0.28), 0 5px 0 rgba(0, 0, 0, 0.45); } }

/* --- Diyalog --- */
#dialog { position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 12px calc(var(--safe-b) + 18px); background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.8)); }
.ep { position: absolute; top: calc(var(--safe-t) + 70px); left: 0; right: 0; text-align: center; font-weight: 900; font-style: italic; font-size: 13px; letter-spacing: 4px; color: var(--gold); text-shadow: 0 2px 0 #000; }
.dlg { position: relative; display: flex; gap: 12px; align-items: flex-end; max-width: 560px; margin: 0 auto; width: 100%; animation: up 0.25s; }
.ava { --c: #fff; flex: 0 0 96px; height: 96px; border-radius: 22px; overflow: hidden; border: 3px solid var(--c); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle at 50% 35%, #ffffff55, #0b102288), var(--c); }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlg-body { flex: 1; background: linear-gradient(180deg, rgba(30, 42, 80, 0.97), rgba(16, 22, 46, 0.97)); border: 1px solid var(--line2); border-radius: 18px 18px 18px 6px; padding: 12px 14px 14px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); }
.who { font-weight: 900; font-size: 15px; margin-bottom: 4px; font-style: italic; }
.txt { font-size: 16px; line-height: 1.38; min-height: 44px; }
.skip { position: absolute; top: calc(var(--safe-t) + 14px); right: 14px; display: flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 14px; font-weight: 700; }

/* --- HUD --- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud-top { position: absolute; top: calc(var(--safe-t) + 10px); left: 10px; right: 10px; display: flex; align-items: center; gap: 10px; }
.round { pointer-events: auto; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(180deg, rgba(40, 54, 98, 0.92), rgba(18, 25, 50, 0.92)); border: 1px solid var(--line2); padding: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); display: grid; place-items: center; }
.round .ic { width: 18px; height: 18px; }
.hud-title { flex: 1; display: flex; flex-direction: column; text-shadow: 0 2px 6px #000; }
.hud-title b { font-weight: 900; font-style: italic; font-size: 19px; }
.hud-title small { color: var(--gold); font-weight: 700; font-size: 12px; }
.shots { display: flex; gap: 5px; filter: drop-shadow(0 2px 3px #000); }
.shots .ic { width: 22px; height: 22px; color: #fff; }
.shots .used .ic { color: rgba(255, 255, 255, 0.2); }
.objectives { position: absolute; top: calc(var(--safe-t) + 64px); left: 10px; display: flex; flex-direction: column; gap: 5px; max-width: 60%; }
.objectives div { display: flex; align-items: center; gap: 7px; background: rgba(8, 12, 28, 0.66); border: 1px solid var(--line); border-radius: 12px; padding: 4px 9px 4px 4px;
  font-size: 11.5px; font-weight: 700; color: #e4eaff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.objectives div > .ic:first-child { width: 22px; height: 22px; border-radius: 8px; color: #fff; -webkit-mask-size: 62%; mask-size: 62%; background-color: #fff; box-shadow: inset 0 0 0 99px rgba(0,0,0,0); }
.objectives div .ic-star { width: 14px; height: 14px; }
.objectives div.done { color: var(--gold); border-color: rgba(255, 210, 63, 0.45); }
.objectives div.done > .ic:first-child { background-color: var(--gold); }
.keeper-read { position: absolute; top: calc(var(--safe-t) + 64px); right: 10px; display: flex; gap: 6px; align-items: center; background: linear-gradient(180deg, #ffc35a, #f08a1a); color: #2a1600; border-radius: 12px; padding: 6px 10px; font-size: 12px; font-weight: 900; max-width: 44%; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.keeper-read .ic { width: 18px; height: 18px; }
.slowbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 100px); display: flex; align-items: center; gap: 8px; background: rgba(8, 12, 28, 0.6); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 8px; }
.slowbar .ic { width: 20px; height: 20px; color: var(--cyan); }
.slowbar .track { width: 130px; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); overflow: hidden; }
.slowbar .fill { height: 100%; width: 50%; background: linear-gradient(90deg, #4fd1ff, #a77bff); box-shadow: 0 0 10px rgba(120, 160, 255, 0.8); transition: width 0.15s; }
.slowbar small { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.slowbar.active { border-color: var(--gold); } .slowbar.active .fill { background: linear-gradient(90deg, #ffd23f, #ff7a1a); } .slowbar.active .ic { color: var(--gold); }
.boosts { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 22px); display: flex; justify-content: center; gap: 12px; }
.boost { pointer-events: auto; position: relative; width: 62px; height: 62px; border-radius: 18px; padding: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(48, 64, 116, 0.95), rgba(22, 30, 60, 0.95)); border: 1px solid var(--line2); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.boost .bi { width: 30px; height: 30px; }
.boost:nth-child(1) .bi { color: var(--cyan); } .boost:nth-child(2) .bi { color: #ff6b8a; } .boost:nth-child(3) .bi { color: var(--brown); } .boost:nth-child(4) .bi { color: #ff8a1a; }
.boost small { position: absolute; bottom: -17px; left: -6px; right: -6px; font-size: 10px; font-weight: 700; color: #cfd8f5; text-shadow: 0 1px 3px #000; }
.boost em { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--red); font-style: normal; font-weight: 900; font-size: 12px; line-height: 22px; padding: 0 6px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); display: grid; place-items: center; }
.boost em.ad { background: var(--green); color: #032; } .boost em .ic { width: 11px; height: 11px; }
.boost.armed { border-color: var(--gold); background: linear-gradient(180deg, #6a5212, #2a2008); box-shadow: 0 0 20px rgba(255, 210, 63, 0.65), 0 5px 0 rgba(0, 0, 0, 0.5); }
.hint { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 142px); transform: translateX(-50%); width: max-content; max-width: 86%; text-align: center; background: rgba(8, 12, 28, 0.72); border: 1px solid var(--line); border-radius: 14px; padding: 8px 13px; font-size: 13px; font-weight: 700; }
.hint:empty { display: none; }
.hint .boost { width: auto; height: auto; padding: 9px 13px; font-size: 13px; font-weight: 900; display: inline-flex; gap: 6px; align-items: center; }

/* --- Bant (GOOOL vb.) --- */
#banner { position: fixed; left: 0; right: 0; top: 26%; z-index: 32; text-align: center; pointer-events: none; }
.b-main { font-weight: 900; font-style: italic; font-size: clamp(56px, 18vw, 140px); line-height: 0.9; padding: 0 12px; background: linear-gradient(180deg, #fff 15%, #ffe066 55%, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 30px rgba(255, 170, 0, 0.6)); animation: boom 0.5s cubic-bezier(.2, 1.6, .4, 1); }
.b-main.red { background: linear-gradient(180deg, #fff, #ff8aa0 60%, #ff2d55); -webkit-background-clip: text; background-clip: text; font-size: clamp(42px, 13vw, 90px); }
.b-main.blue { background: linear-gradient(180deg, #fff, #9be7ff 60%, #3aa0ff); -webkit-background-clip: text; background-clip: text; font-size: clamp(40px, 12vw, 84px); }
.b-sub { margin-top: 8px; font-weight: 900; font-size: clamp(18px, 5vw, 28px); letter-spacing: 2px; color: #fff; text-shadow: 0 3px 0 #000; animation: up 0.4s 0.15s both; }
@keyframes boom { 0% { transform: scale(2.4) rotate(-6deg); opacity: 0; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }
#replayTag { position: fixed; top: calc(var(--safe-t) + 12vh); left: 16px; z-index: 33; font-weight: 900; color: #fff; letter-spacing: 2px; font-size: 14px; }
#replayTag::first-letter { color: var(--red); }
#replayTag small { color: var(--muted); font-weight: 700; letter-spacing: 1px; }

/* --- Modal kartlar --- */
.modal { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 14, 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.card { position: relative; width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; background: linear-gradient(180deg, rgba(34, 46, 88, 0.98), rgba(14, 20, 42, 0.98)); border: 1px solid var(--line2); border-radius: 26px; padding: 22px 18px 18px;
  text-align: center; display: flex; flex-direction: column; gap: 10px; animation: pop 0.3s cubic-bezier(.2, 1.4, .4, 1); touch-action: pan-y; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.card h2 { margin: 0 0 6px; font-weight: 900; font-style: italic; }
.card .big { align-items: center; text-align: center; } .card .big span { justify-content: center; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.r-title { font-weight: 900; font-style: italic; font-size: 36px; background: linear-gradient(180deg, #fff, #ffd23f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r-stars { display: flex; justify-content: center; gap: 6px; min-height: 66px; }
.r-stars span { display: grid; place-items: center; color: rgba(255, 255, 255, 0.14); transform: scale(0.75); }
.r-stars span .ic { width: 58px; height: 58px; }
.r-stars span:nth-child(2) .ic { width: 66px; height: 66px; margin-top: -8px; }
.r-stars span.on { color: var(--gold); filter: drop-shadow(0 0 14px rgba(255, 210, 63, 0.75)); animation: star 0.55s cubic-bezier(.2, 1.8, .4, 1) both; }
.r-stars span.new { color: #fff3a8; }
@keyframes star { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.r-list { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.r-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.r-list li span { display: flex; align-items: center; gap: 8px; } .r-list li span .ic { width: 18px; height: 18px; }
.r-list li b { color: var(--text); display: flex; align-items: center; gap: 4px; font-size: 12px; }
.r-list li.ok { color: #e8ffe9; background: rgba(61, 220, 132, 0.12); } .r-list li.ok b { color: var(--gold); }
.r-reward { display: flex; justify-content: center; align-items: center; gap: 4px; font-weight: 900; font-size: 22px; color: var(--gold); min-height: 26px; }
.r-reward .ic { width: 22px; height: 22px; }
.r-bubble { display: flex; gap: 10px; align-items: center; text-align: left; background: linear-gradient(135deg, rgba(110, 60, 30, 0.85), rgba(55, 28, 12, 0.85)); border: 1px solid rgba(201, 138, 90, 0.6); border-radius: 16px; padding: 7px 12px 7px 7px; font-size: 13px; font-weight: 700; }
.r-bubble img { width: 46px; height: 46px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); }
#rActions { display: flex; flex-direction: column; gap: 9px; }
#rActions .row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.offer { background: linear-gradient(135deg, #4a2378, #1d0f38); border: 1px solid #a77bff; border-radius: 18px; padding: 12px; text-align: left; box-shadow: 0 0 24px rgba(167, 123, 255, 0.35); }
.offer b { color: #e5d6ff; display: flex; gap: 6px; align-items: center; } .offer small { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: #cbb9f2; }

/* --- Mağaza --- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.tabs button { flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line2); font-weight: 700; font-size: 13px; }
.tabs button.on { background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; border-color: transparent; box-shadow: 0 3px 0 #a35a00; }
.shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.item { position: relative; display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center; padding: 16px 10px 12px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(36, 48, 90, 0.95), rgba(16, 22, 46, 0.95)); border: 1px solid var(--line2); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4); }
.item.wide { grid-column: span 2; flex-direction: row; text-align: left; gap: 12px; }
.item .ico { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; color: var(--gold); background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)); flex: 0 0 auto; }
.item .ico .ic { width: 36px; height: 36px; }
.item h4 { margin: 0; font-size: 15px; font-weight: 900; }
.item p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.item .buy { padding: 9px 14px; border-radius: 12px; background: linear-gradient(180deg, #7af5b0, #22b866); color: #032; font-weight: 900; font-size: 13.5px; box-shadow: 0 4px 0 #127a42; min-width: 96px; }
.item .buy.gem { background: linear-gradient(180deg, #a8e6ff, #4fb4ff); box-shadow: 0 4px 0 #2a7ab0; color: #02223a; }
.item .buy.owned { background: #2e3654; color: var(--muted); box-shadow: none; }
.item .tagx { position: absolute; top: -9px; right: 12px; background: var(--red); border-radius: 8px; padding: 3px 9px; font-size: 11px; font-weight: 900; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.item.hot { border-color: var(--gold); background: linear-gradient(135deg, #5a430c, #1f1705); box-shadow: 0 0 22px rgba(255, 210, 63, 0.25), 0 6px 0 rgba(0, 0, 0, 0.4); }
.proto { text-align: center; color: var(--muted); font-size: 12px; }

/* --- Ayarlar --- */
.settings { display: flex; flex-direction: column; gap: 9px; max-width: 480px; }
.set { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 14px; font-weight: 700; }
.set > span { display: flex; align-items: center; gap: 10px; } .set > span .ic { width: 22px; height: 22px; color: var(--gold); }
.tog { width: 54px; height: 31px; border-radius: 16px; background: #343c5c; position: relative; padding: 0; flex: 0 0 auto; }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: #fff; transition: left 0.15s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
.tog.on { background: var(--green); } .tog.on::after { left: 26px; }
.credits { font-size: 11px; color: var(--muted); line-height: 1.5; padding: 8px 4px; }

/* --- Reklam / klip / tost --- */
.ad { background: #fff; color: #111; }
.ad-tag { font-size: 11px; font-weight: 700; color: #888; letter-spacing: 2px; }
.ad-body { font-size: 28px; font-weight: 900; padding: 30px 0; } .ad-body .ic { color: #8a4b2a; }
.ad-body small { font-size: 14px; font-weight: 500; color: #555; }
.ad-count { font-size: 44px; font-weight: 900; color: var(--blue); }
#clipVideo { width: 100%; max-height: 50vh; border-radius: 14px; background: #000; }
#toast { position: fixed; left: 50%; top: 20%; transform: translateX(-50%); z-index: 45; background: linear-gradient(180deg, rgba(34, 46, 88, 0.98), rgba(14, 20, 42, 0.98)); border: 1px solid var(--gold); border-radius: 14px; padding: 11px 17px; font-weight: 900; pointer-events: none; text-align: center; max-width: calc(100% - 32px); animation: pop 0.2s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

/* --- Sezon kartı ve etkinlik --- */
.season-card { --sc: #ffb21a; position: relative; width: 100%; text-align: left; padding: 12px 14px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sc) 55%, #1a1030), #120c26 70%); border: 1px solid color-mix(in srgb, var(--sc) 70%, transparent);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 26px color-mix(in srgb, var(--sc) 35%, transparent); }
.season-card::before { content: ""; position: absolute; inset: -40% -10%; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%); animation: shine 3.6s infinite; pointer-events: none; }
@keyframes shine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.sc-top { display: flex; align-items: center; gap: 8px; }
.sc-tag { font-size: 10px; font-weight: 900; letter-spacing: 2px; background: rgba(0, 0, 0, 0.35); padding: 3px 8px; border-radius: 999px; }
.sc-name { flex: 1; font-weight: 900; font-style: italic; font-size: 17px; }
.sc-left { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #fff; } .sc-left .ic { width: 14px; height: 14px; }
.sc-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.sc-tier { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 16px; background: var(--sc); color: #1a0d00; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.sc-bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.sc-bar div { height: 100%; background: linear-gradient(90deg, #fff, var(--sc, #ffd23f)); border-radius: 5px; transition: width 0.4s; }
.sc-badge { min-width: 22px; height: 22px; border-radius: 11px; background: var(--red); font-weight: 900; font-size: 12px; display: grid; place-items: center; padding: 0 6px; animation: bump 1.2s infinite; }
.event-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 16px; text-align: left; background: linear-gradient(90deg, rgba(255, 77, 109, 0.28), rgba(20, 28, 56, 0.9)); border: 1px solid rgba(255, 77, 109, 0.55); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
.event-chip > .ic { width: 30px; height: 30px; color: #ff8aa0; }
.event-chip span { flex: 1; display: flex; flex-direction: column; } .event-chip span b { font-size: 14px; font-weight: 900; } .event-chip span small { font-size: 11px; color: #ffd0d9; }
.event-chip em { font-style: normal; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 900; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.7); animation: live 1.4s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); } }
.sp-gain { color: #d9c2ff; font-size: 16px; }

/* --- Sezon ekranı --- */
#seasonScr { background: radial-gradient(ellipse at 50% 0%, rgba(70, 40, 110, 0.95), rgba(6, 9, 20, 0.98) 70%); padding-top: calc(var(--safe-t) + 58px); }
.ss-hero { --sc: #ffb21a; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; margin-bottom: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--sc) 45%, #1a1030), #120c26 75%); border: 1px solid color-mix(in srgb, var(--sc) 60%, transparent); }
.ss-hero > div > b { font-weight: 900; font-style: italic; font-size: 20px; display: block; } .ss-hero small { color: #ddd; font-size: 12px; }
.ss-hero .sc-bar { margin-top: 8px; }
.pass-on { display: inline-flex; gap: 6px; align-items: center; font-weight: 900; color: #d9c2ff; }
.track-head { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 8px; font-size: 12px; font-weight: 900; color: var(--muted); padding: 0 4px 6px; text-align: center; }
.track-head span:last-child { color: #c9a8ff; display: flex; gap: 4px; justify-content: center; align-items: center; }
.tier { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.tnum { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #232b4a; border: 2px solid var(--line2); color: var(--muted); }
.tier.reached .tnum { background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; border-color: transparent; }
.tier.next .tnum { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(255, 210, 63, 0.45); }
.rw { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); min-height: 52px; text-align: left; }
.rw > .ic:first-child { width: 26px; height: 26px; color: var(--gold); }
.rw small { font-size: 11px; font-weight: 700; color: #dfe6ff; }
.rw.prem { background: linear-gradient(135deg, rgba(120, 70, 220, 0.35), rgba(40, 20, 80, 0.5)); border-color: rgba(167, 123, 255, 0.45); }
.rw.ready { border-color: var(--gold); animation: glow 1.6s infinite; }
.rw.got { opacity: 0.5; } .rw.locked { filter: grayscale(0.6); opacity: 0.75; }
.rw .chk { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; }
.ms-h { display: flex; justify-content: space-between; align-items: center; margin: 14px 2px 8px; font-size: 15px; font-weight: 900; }
.ms-h small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; } .ms-h small .ic { width: 13px; height: 13px; }
.mission { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line2); margin-bottom: 8px; }
.m-info { flex: 1; } .m-info b { font-size: 14px; } .m-info small { font-size: 11px; color: var(--muted); }
.m-bar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); margin: 6px 0 3px; overflow: hidden; } .m-bar div { height: 100%; background: linear-gradient(90deg, #a77bff, #5fd8ff); }
.m-btn { padding: 9px 12px; border-radius: 12px; font-weight: 900; font-size: 13px; background: linear-gradient(180deg, #b48bff, #6d3df0); box-shadow: 0 3px 0 #3d1f99; min-width: 84px; }
.m-btn:disabled { background: #2e3654; color: var(--muted); box-shadow: none; }
.mission.done:not(.claimed) { border-color: #a77bff; box-shadow: 0 0 16px rgba(167, 123, 255, 0.35); }
.lg-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 6px; font-weight: 700; }
.lg-row b { color: var(--muted); } .lg-row em { font-style: normal; color: #d9c2ff; font-weight: 900; }
.lg-row.up { border-left: 4px solid var(--green); } .lg-row.down { border-left: 4px solid var(--red); }
.lg-row.me { background: linear-gradient(90deg, rgba(255, 210, 63, 0.25), var(--panel)); border-color: var(--gold); }
.league-note { padding: 10px 12px; border-radius: 14px; background: rgba(61, 220, 132, 0.15); font-weight: 700; font-size: 13px; margin-bottom: 8px; }

/* --- Günlük giriş --- */
.login-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ld { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.ld .ic { width: 26px; height: 26px; color: var(--gold); } .ld small { font-size: 10px; color: var(--muted); } .ld b { font-size: 13px; }
.ld.past { opacity: 0.45; } .ld.today { border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 210, 63, 0.3), rgba(255, 160, 30, 0.08)); animation: glow 1.4s infinite; }
.ld:last-child { grid-column: span 2; }

.screen > * { flex-shrink: 0; }

/* --- Açılış altyazısı ve isim girişi --- */
#splash { justify-content: flex-start; padding-top: calc(var(--safe-t) + 70px); background: linear-gradient(180deg, rgba(6, 9, 20, 0.55) 0%, rgba(6, 9, 20, 0) 40%, rgba(6, 9, 20, 0) 70%, rgba(6, 9, 20, 0.7) 100%); }
.intro-cap { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-b) + 110px); text-align: center; font-weight: 900; font-style: italic; font-size: 20px; text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.8); min-height: 26px; }
.name-input { width: 100%; padding: 14px; border-radius: 14px; border: 2px solid var(--gold); background: rgba(0, 0, 0, 0.35); color: #fff; font-family: var(--font); font-size: 26px; font-weight: 900; font-style: italic; text-align: center; letter-spacing: 2px; text-transform: uppercase; user-select: text; -webkit-user-select: text; touch-action: auto; outline: none; }
.name-input.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.skip-btn { position: fixed; right: 14px; bottom: calc(var(--safe-b) + 18px); z-index: 34; display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: rgba(8, 12, 28, 0.75); border: 1px solid var(--line2); font-weight: 900; font-size: 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.skip-btn .ic { width: 14px; height: 14px; }

/* --- Animasyon testi --- */
#debugPanel { position: fixed; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); z-index: 30; background: rgba(8, 12, 28, 0.88); border: 1px solid var(--line2); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 7px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-height: 52vh; overflow-y: auto; touch-action: pan-y; }
.dbg-head { display: flex; align-items: center; gap: 8px; } .dbg-head b { font-weight: 900; font-style: italic; } .dbg-head span { flex: 1; color: var(--gold); font-weight: 700; font-size: 13px; }
.dbg-head button { padding: 6px 10px; border-radius: 10px; background: var(--red); font-weight: 900; font-size: 12px; }
.dbg-row { display: flex; flex-wrap: wrap; gap: 5px; }
.dbg-row button { padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); font-weight: 700; font-size: 12px; }
.dbg-row button.on { background: var(--gold); color: #2a1600; border-color: transparent; }
.dbg-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Sevinç önizleme --- */
.cele-card { padding: 12px 12px 14px; }
#celeCanvas { width: 100%; height: min(52vh, 420px); border-radius: 18px; display: block; background: radial-gradient(ellipse at 50% 30%, #7ec3ff, #2c6bb0 60%, #173a63); }
.cp-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-top: -2px; }
.cp-bar div { height: 100%; width: 0; background: var(--gold); }
.preview-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line2); font-weight: 900; font-size: 12.5px; }
.preview-btn .ic { width: 12px; height: 12px; color: var(--gold); }

.item .buy .ic, .item h4 .ic, .item p .ic, .rw small .ic, #cpBuy .ic { width: 1.05em; height: 1.05em; vertical-align: -0.18em; }
.item .buy.gem .ic-gem { color: #0b4f8a; } .item .buy .ic-coin { color: #8a5a00; }

/* --- Öğretici (koç) --- */
#coach { position: fixed; inset: 0; z-index: 31; pointer-events: none; }
.coach-hole { position: fixed; border-radius: 22px; box-shadow: 0 0 0 9999px rgba(3, 6, 16, 0.55), 0 0 0 4px var(--gold), 0 0 26px 6px rgba(255, 210, 63, 0.7); animation: holePulse 1.2s infinite; transition: all 0.25s; }
@keyframes holePulse { 50% { box-shadow: 0 0 0 9999px rgba(3, 6, 16, 0.55), 0 0 0 7px var(--gold), 0 0 36px 10px rgba(255, 210, 63, 0.85); } }
.coach-bubble { position: fixed; left: 12px; right: 12px; display: flex; gap: 10px; align-items: center; max-width: 520px; margin: 0 auto; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(110, 60, 30, 0.97), rgba(55, 28, 12, 0.97)); border: 2px solid #e0a477; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: up 0.3s; }
.coach-bubble.top { top: calc(var(--safe-t) + 120px); } .coach-bubble.mid { top: 36%; } .coach-bubble.bottom { bottom: calc(var(--safe-b) + 170px); }
.coach-bubble img { width: 58px; height: 58px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); flex: 0 0 auto; }
.coach-bubble b { display: block; font-weight: 900; font-style: italic; color: #ffd9a8; font-size: 15px; margin-bottom: 2px; }
.coach-bubble p { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; }
.coach-hand { position: fixed; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25), 0 6px 18px rgba(0, 0, 0, 0.45); display: grid; place-items: center; }
.coach-hand .ic { width: 28px; height: 28px; color: #1a1a1a; }
.coach-hand.tap { animation: hTap 1s infinite; }
@keyframes hTap { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.78); box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.45); } }
.coach-hand.hold { animation: hHold 1.4s infinite; }
@keyframes hHold { 0% { transform: scale(1); } 30%, 80% { transform: scale(0.8); box-shadow: 0 0 0 22px rgba(255, 210, 63, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45); } 100% { transform: scale(1); } }
.coach-hand.swipeh { animation: hSwipeH 1.3s ease-in-out infinite; }
@keyframes hSwipeH { 0%, 100% { transform: translateX(-70px) scale(0.85); } 50% { transform: translateX(70px) scale(0.85); } }
.coach-hand.swipeup { animation: hSwipeUp 1.3s ease-in infinite; }
@keyframes hSwipeUp { 0% { transform: translate(0, 60px) scale(0.85); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(30px, -180px) scale(0.85); opacity: 0; } }

/* --- Top özellikleri --- */
.bstats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 6px; }
.bstats div { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; opacity: 0.9; }
.bstats span { width: 64px; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bstats i { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bstats em { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffd23f, #ff7a1a); }
.bperk { color: #ffd9a8; font-weight: 700; font-size: 11.5px !important; }
.buy.locked { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 11px; max-width: 110px; white-space: normal; line-height: 1.2; }
.buy small { display: block; font-size: 10px; opacity: 0.8; }
.ball-offer .bo-head { display: flex; gap: 10px; align-items: center; text-align: left; }
.ball-offer .bo-head .ico { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; }
.ball-offer .bo-head .ico .ic { width: 32px; height: 32px; }

/* --- Adil Oyun Sözü / neden tuttu --- */
.card.fair { text-align: left; max-width: 420px; }
.card.fair img { display: block; width: 74px; height: 74px; margin: 0 auto 6px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); }
.card.fair h2 { text-align: center; }
.card.fair ul { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 10px; }
.card.fair li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.35; }
.card.fair li .ic { width: 24px; height: 24px; flex: 0 0 auto; color: var(--gold); margin-top: 1px; }
.fair-strip { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: rgba(19, 255, 160, 0.08); border: 1px solid rgba(19, 255, 160, 0.3); font-size: 12px; font-weight: 700; }
.fair-strip .ic { width: 18px; height: 18px; color: #3dffa8; flex: 0 0 auto; }
.why { text-align: left; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 8px; }
.why b { color: #ffd9a8; font-style: italic; } .why p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.35; }

/* --- Penaltı modu --- */
.pen-score { display: inline-flex; gap: 8px; padding: 6px 12px; border-radius: 20px; background: rgba(0, 0, 0, 0.45); }
.pen-score .pd { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); display: inline-block; }
.pen-score .pd.ok { background: #3dffa8; border-color: #3dffa8; } .pen-score .pd.no { background: #ff4d5e; border-color: #ff4d5e; }
.pen-score.big .pd { width: 26px; height: 26px; }
#hud.pen .boosts, #hud.pen .slowbar, #hud.pen #hudShots, #hud.pen #hudObj { display: none !important; }

/* --- Bölüm arası fragman --- */
#trailer { position: fixed; inset: 0; z-index: 32; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6)); }
#trailer .tr-k { font-weight: 900; letter-spacing: 0.3em; font-size: 13px; color: #ffd23f; text-shadow: 0 2px 8px #000; }
#trailer .tr-t { font-weight: 900; font-style: italic; font-size: clamp(34px, 10vw, 64px); line-height: 1; margin: 8px 0; text-shadow: 0 4px 24px #000, 0 0 2px #000; }
#trailer .tr-l { font-weight: 700; font-size: 17px; max-width: 460px; text-shadow: 0 2px 10px #000; min-height: 2.6em; }
#trailer .in { animation: trIn 0.7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes trIn { from { opacity: 0; transform: scale(1.25); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
#trailer .tr-skip { position: fixed; right: 16px; bottom: calc(var(--safe-b) + 12vh); padding: 8px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.4); color: #fff; font-weight: 800; }

/* --- Kahvehane Modu --- */
.card.kahve h2 .ic { width: 26px; height: 26px; vertical-align: -5px; color: var(--gold); }
.kh-count { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.kh-count button { width: 54px; height: 44px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 900; font-size: 18px; }
.kh-count button.on { border-color: var(--gold); background: rgba(255, 210, 63, 0.18); }
.kh-names { display: grid; gap: 8px; margin-bottom: 12px; }
.kh-names input { width: 100%; box-sizing: border-box; }
.card.kahve-turn { text-align: center; }
.card.kahve-turn img { width: 70px; height: 70px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); }
.kh-round { font-weight: 900; letter-spacing: 0.2em; font-size: 12px; color: var(--gold); margin-top: 6px; }
.card.kahve-turn h2 { font-size: 28px; margin: 4px 0; }
.card.kahve-turn p { font-style: italic; opacity: 0.9; }
.kh-table { display: grid; gap: 4px; margin: 10px 0 14px; text-align: left; }
.kh-table div { display: flex; justify-content: space-between; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-weight: 800; }
.kh-table div.now { background: rgba(255, 210, 63, 0.18); }
#hud.kh .boosts { display: none !important; }

/* --- Penaltı: eldivenler (sen kalecinin ellerisin) --- */
#gloves { position: fixed; inset: 0; pointer-events: none; z-index: 12; }
#gloves .gl { position: fixed; width: 86px; height: 86px; margin: -43px 0 0 -43px; background: #f4f4f4; -webkit-mask: url(icons/glove.svg) center / contain no-repeat; mask: url(icons/glove.svg) center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
#gloves .gl.l { transform: rotate(8deg); } #gloves .gl.r { transform: scaleX(-1) rotate(8deg); }
#gloves .gl::after { content: ""; }
#gloves .aim { position: fixed; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.55); }
#gloves.hit .gl { background: #ffd23f; }

/* --- Penaltı sandığı --- */
#penChest { position: fixed; top: calc(var(--safe-t) + 70px); right: 12px; z-index: 13; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px 6px; border-radius: 16px; background: linear-gradient(160deg, rgba(110, 60, 30, 0.92), rgba(50, 26, 10, 0.92)); border: 2px solid #e0a477; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); min-width: 74px; }
#penChest .ic { width: 40px; height: 40px; color: #ffd23f; }
#penChest b { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; border-radius: 13px; background: #2fd3ff; color: #062033; font-weight: 900; display: grid; place-items: center; font-size: 15px; box-shadow: 0 0 0 2px #fff; }
#penChest small { font-size: 10px; font-weight: 800; text-align: center; max-width: 90px; line-height: 1.15; }
#penChest.pop { animation: chestPop 0.45s; } @keyframes chestPop { 40% { transform: scale(1.28) rotate(-6deg); } 70% { transform: scale(0.95) rotate(3deg); } }
#penChest.ready { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.5), 0 0 26px rgba(255, 210, 63, 0.8); }
#penChest.ready .ic { animation: chestGlow 0.9s infinite; } @keyframes chestGlow { 50% { transform: scale(1.12); filter: drop-shadow(0 0 8px #ffd23f); } }
#penChest.danger { border-color: #ff4d5e; animation: chestShake 0.5s infinite; } @keyframes chestShake { 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }
#penChest.lost { opacity: 0.45; filter: grayscale(1); transform: scale(0.9); transition: all 0.6s; }
.fly-gem { position: fixed; z-index: 14; width: 34px; height: 34px; margin: -17px 0 0 -17px; color: #2fd3ff; pointer-events: none; filter: drop-shadow(0 0 10px #2fd3ff);
  transition: left 0.75s cubic-bezier(.5, -0.4, .6, 1), top 0.75s cubic-bezier(.2, .6, .4, 1), transform 0.75s; }
.fly-gem .ic { width: 100%; height: 100%; }
.lost-gem { position: fixed; z-index: 14; width: 26px; height: 26px; color: #2fd3ff; pointer-events: none; transition: all 0.9s ease-in; }
.lost-gem .ic { width: 100%; height: 100%; }
.b-main.gold { background: linear-gradient(180deg, #fff6c9, #ffd23f 55%, #ff9a1a); -webkit-background-clip: text; background-clip: text; font-size: clamp(40px, 12vw, 84px); }

/* --- Canlı hedef işareti: top buraya gidecek --- */
#aimDot { position: fixed; z-index: 12; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; border-radius: 50%;
  border: 3px solid #ffd23f; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 210, 63, 0.8); }
#aimDot::before, #aimDot::after { content: ""; position: absolute; left: 50%; top: 50%; background: #ffd23f; transform: translate(-50%, -50%); }
#aimDot::before { width: 2px; height: 14px; } #aimDot::after { width: 14px; height: 2px; }
#aimDot.out { border-color: #ff4d5e; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 77, 94, 0.8); }
#aimDot.out::before, #aimDot.out::after { background: #ff4d5e; }

/* --- İlk vuruş zamanlama halkası: dış halka içteki halkaya oturunca kaydır --- */
#tRing { position: fixed; z-index: 12; pointer-events: none; width: 0; height: 0; }
#tRing i { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0,0,0,.5); }
#tRing b { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.7); transform: translate(-50%, -50%); }
#tRing.ok i { border-color: #3dffa8; box-shadow: 0 0 18px #3dffa8; } #tRing.ok b { border-color: #3dffa8; }
#tRing.late i { border-color: #ff4d5e; }

/* --- Sansür (bip): oyunun mahalle ağzı --- */
.bip { display: inline-block; background: #0b0b0b; color: #ffd23f; font-weight: 900; font-style: normal; font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.05em 0.45em; margin: 0 0.12em; border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 0 0 1.5px rgba(255, 210, 63, 0.55); vertical-align: 0.08em; line-height: 1.25; }
.bip.pop { animation: bipPop 0.35s; } @keyframes bipPop { 0% { transform: scale(1.8) rotate(-12deg); } 100% { transform: rotate(-3deg); } }
#toast small { display: block; font-size: 0.82em; opacity: 0.85; margin-top: 2px; font-weight: 700; }
.claim-all { width: 100%; margin: 0 0 10px; }

/* --- Mola menüsü --- */
#pause.pause { background: rgba(4, 8, 18, 0.55); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.pz { width: min(92vw, 400px); padding: 18px 18px 16px; border-radius: 26px; text-align: center; position: relative;
  background: linear-gradient(170deg, rgba(28, 40, 70, 0.96), rgba(10, 16, 32, 0.97)); border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12); animation: pzIn 0.28s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes pzIn { from { transform: translateY(24px) scale(0.94); opacity: 0; } }
.pz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pz-tag { display: inline-flex; gap: 6px; align-items: center; font-weight: 900; letter-spacing: 0.22em; font-size: 12px; color: #ffd23f; }
.pz-tag .ic { width: 16px; height: 16px; }
.pz-shots { display: inline-flex; gap: 4px; } .pz-shots .ic { width: 18px; height: 18px; } .pz-shots .used { opacity: 0.25; }
.pz h2 { margin: 2px 0 0; font-size: 26px; font-weight: 900; font-style: italic; }
.pz > small { display: block; opacity: 0.7; font-weight: 700; margin-bottom: 10px; }
.pz-reis { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 16px; background: linear-gradient(135deg, rgba(110, 60, 30, 0.55), rgba(55, 28, 12, 0.55)); border: 1px solid rgba(224, 164, 119, 0.5); margin-bottom: 10px; }
.pz-reis img { width: 44px; height: 44px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); flex: 0 0 auto; }
.pz-reis p { margin: 0; font-size: 13.5px; font-weight: 700; font-style: italic; line-height: 1.3; }
.pz-tasks { display: grid; gap: 6px; margin-bottom: 14px; text-align: left; }
.pz-tasks div { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-weight: 700; font-size: 13.5px; }
.pz-tasks div .ic:first-child { width: 20px; height: 20px; opacity: 0.85; } .pz-tasks div span { flex: 1; }
.pz-tasks div.done { background: rgba(61, 255, 168, 0.12); } .pz-tasks div .ic-star { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.25); } .pz-tasks div.done .ic-star { color: #ffd23f; }
.pz-go { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border: 0; border-radius: 18px; font-size: 22px; font-weight: 900; letter-spacing: 0.08em; color: #1b1300;
  background: linear-gradient(180deg, #ffe27a, #ffb21a); box-shadow: 0 6px 0 #b86f00, 0 12px 24px rgba(255, 178, 26, 0.35); margin-bottom: 12px; }
.pz-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #b86f00; } .pz-go .ic { width: 26px; height: 26px; }
.pz-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pz-sq { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 800; font-size: 11.5px; }
.pz-sq .ic { width: 24px; height: 24px; } .pz-sq:active { transform: scale(0.95); }
.pz-sq.off { opacity: 0.45; } .pz-sq.off .ic { text-decoration: line-through; }

/* --- Kenardan teknik direktör bağırışı --- */
#yell { position: fixed; left: 10px; top: calc(var(--safe-t) + 74px); z-index: 14; pointer-events: none; display: flex; gap: 8px; align-items: center; max-width: min(82vw, 360px);
  padding: 7px 12px 7px 7px; border-radius: 16px 16px 16px 4px; background: linear-gradient(135deg, #3a0d0d, #1c0606); border: 2px solid #ff4d5e;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 77, 94, 0.45); animation: yellIn 0.25s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes yellIn { from { transform: translateX(-30px) scale(0.85); opacity: 0; } }
#yell img { width: 46px; height: 46px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); flex: 0 0 auto; animation: yellShake 0.12s 6; }
@keyframes yellShake { 25% { transform: translate(-2px, 1px) rotate(-4deg); } 75% { transform: translate(2px, -1px) rotate(4deg); } }
#yell b { display: block; font-size: 11px; letter-spacing: 0.12em; color: #ff8a96; text-transform: uppercase; }
#yell p { margin: 0; font-size: 15px; font-weight: 900; font-style: italic; line-height: 1.25; }
.ic-home { --i: url(icons/home.svg); }
/* --- Sıralama ve gerçek lig --- */
.card.lb { max-width: 420px; width: min(92vw, 420px); }
#lbList { list-style: none; padding: 0; margin: 8px 0 12px; max-height: 56vh; overflow-y: auto; display: grid; gap: 5px; text-align: left; }
#lbList li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-weight: 800; }
#lbList li b { width: 28px; text-align: center; color: #ffd23f; } #lbList li span { flex: 1; } #lbList li small { display: block; font-size: 10.5px; opacity: 0.65; font-weight: 700; }
#lbList li em { font-style: normal; font-weight: 900; } #lbList li.me { background: rgba(255, 210, 63, 0.18); } #lbList li.lb-total { justify-content: center; opacity: 0.6; background: none; font-size: 12px; }
.lg-pos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 12px; }
.lg-pbtn { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: #fff; }
.lg-pbtn b { font-size: 18px; font-weight: 900; } .lg-pbtn small { font-size: 10.5px; font-weight: 800; opacity: 0.8; } .lg-pbtn.done { border-color: #3dffa8; background: rgba(61, 255, 168, 0.12); }
.rank-row b { color: #ffd23f; }
.acc { padding: 12px; border-radius: 16px; background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.3); margin-bottom: 12px; text-align: left; }
.acc b { display: block; margin-bottom: 4px; } .acc b .ic { width: 18px; height: 18px; vertical-align: -3px; color: #ffd23f; }
.acc small { display: block; font-size: 12.5px; opacity: 0.85; line-height: 1.35; margin-bottom: 8px; }
.acc .tcode { display: inline-block; margin-top: 6px; font: 900 22px/1 ui-monospace, monospace; letter-spacing: 0.08em; color: #ffd23f; user-select: all; -webkit-user-select: all; }

/* --- Penaltı Düellosu --- */
.duel-btn { background: linear-gradient(180deg, #2b5fd9, #1b3f99) !important; }
.duel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); margin-bottom: 10px; }
.duel-head b { font-size: 26px; font-weight: 900; } .duel-head small { display: block; opacity: 0.75; font-weight: 700; }
.duel-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); margin-top: 8px; }
.duel-row span { flex: 1; font-weight: 800; } .duel-row small { display: block; font-weight: 700; opacity: 0.7; font-size: 12px; }
.duel-row.me { border: 1px solid #ffd23f; background: rgba(255, 210, 63, 0.12); } .duel-row .win { color: #3dffa8; } .duel-row .loss { color: #ff4d5e; }
.duel-row button { padding: 8px 14px; border-radius: 12px; border: 0; background: #ffd23f; color: #1b1300; font-weight: 900; }

/* --- Online Kahvehane --- */
.kh-online { margin: 6px 0 4px; } .kh-or { margin: 6px 0 4px; text-align: center; }
.room-code { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.35); margin-bottom: 8px; }
.room-code small { font-weight: 900; letter-spacing: 0.2em; font-size: 11px; color: #ffd23f; } .room-code b { flex: 1; font: 900 34px/1 ui-monospace, monospace; letter-spacing: 0.15em; }
.room-code .big { width: auto; padding: 10px 14px; }
.room-p { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); margin-top: 6px; font-weight: 800; }
.room-p span { flex: 1; } .room-p em { font-style: normal; font-weight: 900; color: #ffd23f; } .room-p small { opacity: 0.7; font-weight: 700; } .room-p.done { border: 1px solid #3dffa8; }
.room-react { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.room-react button { padding: 9px 4px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 800; font-size: 12px; }
#hud .room-mini { position: fixed; right: 10px; top: calc(var(--safe-t) + 120px); z-index: 11; font-weight: 800; font-size: 12px; background: rgba(0, 0, 0, 0.45); padding: 6px 10px; border-radius: 12px; }

/* --- genel: yan yana butonlar arasında boşluk --- */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 9px 0; }
.screen > .big, .card > .big { margin-top: 9px; }
.sec-h { margin: 18px 2px 6px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; font-weight: 900; }
/* --- Penaltı Düellosu (yeni tasarım) --- */
.duel-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; margin-bottom: 4px;
  background: radial-gradient(circle at 18% 30%, rgba(255, 210, 63, 0.25), transparent 55%), linear-gradient(135deg, #24438f, #121d42); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.duel-hero .badge { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(180deg, #ffe27a, #ffb21a); box-shadow: 0 5px 0 #b86f00; flex: 0 0 auto; }
.duel-hero .badge .ic { width: 44px; height: 44px; color: #3b2400; }
.duel-hero .info { flex: 1; } .duel-hero .rank { font-size: 26px; font-weight: 900; font-style: italic; line-height: 1; }
.duel-hero .elo { font-weight: 800; opacity: 0.85; margin-top: 4px; } .duel-hero .wl { display: flex; gap: 10px; margin-top: 8px; font-weight: 800; font-size: 12.5px; }
.duel-hero .wl span { padding: 3px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); }
.duel-hero .bar2 { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); margin-top: 8px; overflow: hidden; } .duel-hero .bar2 i { display: block; height: 100%; background: linear-gradient(90deg, #3dffa8, #ffd23f); }
.duel-go { height: 74px; } .duel-go span { font-size: 22px; letter-spacing: 0.06em; }
.duel-steps { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
.duel-steps div { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 11.5px; font-weight: 700; opacity: 0.9; }
.duel-steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #ffd23f; color: #1b1300; font-weight: 900; }
.duel-steps > .ic { width: 14px; height: 14px; opacity: 0.4; flex: 0 0 auto; }
.duel-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); margin-top: 8px; border: 1px solid transparent; }
.duel-row .av { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 18px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); flex: 0 0 auto; }
.duel-row span { flex: 1; font-weight: 900; } .duel-row small { display: block; font-weight: 700; opacity: 0.75; font-size: 12px; margin-top: 2px; }
.duel-row .pill { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 11px; font-weight: 900; margin-top: 3px; }
.pill.turn { background: #ffd23f; color: #1b1300; } .pill.wait { background: rgba(255, 255, 255, 0.14); } .pill.win { background: #1f9d63; } .pill.loss { background: #c0303f; } .pill.draw { background: #6b7280; }
.duel-row.me { border-color: #ffd23f; background: rgba(255, 210, 63, 0.1); animation: rowPulse 1.6s infinite; } @keyframes rowPulse { 50% { box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.25); } }
.duel-row button { padding: 9px 14px; border-radius: 12px; border: 0; background: #ffd23f; color: #1b1300; font-weight: 900; box-shadow: 0 3px 0 #b86f00; }
.duel-empty { text-align: center; padding: 18px; opacity: 0.75; font-weight: 700; }
/* --- Kahvehane penceresi bölümleri --- */
.kh-sec { padding: 10px 12px 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); margin-top: 10px; text-align: left; }
.kh-sec > b { font-size: 11px; letter-spacing: 0.14em; color: #ffd23f; }
.room-code { margin-top: 6px; }
#duelScr { background: radial-gradient(ellipse at 50% 0%, rgba(30, 62, 150, 0.96), rgba(6, 9, 20, 0.985) 70%); padding-top: calc(var(--safe-t) + 58px); }
#roomScr { background: linear-gradient(180deg, rgba(12, 8, 6, 0.15) 0%, rgba(12, 8, 6, 0.55) 30%, rgba(12, 8, 6, 0.93) 52%); padding-top: calc(var(--safe-t) + 58px); }
.duel-steps { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); }
/* HUD: top ikonları en fazla bir satır, başlık ve duraklat butonu sıkışmasın */
#hudShots { flex-wrap: nowrap; overflow: hidden; max-width: 46vw; }
/* Afiş alt yazısı her zemin üstünde okunsun */
.b-sub:not(:empty) { display: inline-block; max-width: 88vw; padding: 5px 14px; border-radius: 14px; background: rgba(6, 10, 22, 0.72); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); letter-spacing: 0.5px; font-size: clamp(15px, 4.2vw, 22px); line-height: 1.25; }
/* Penaltı ekranlarında afiş küçük ve üstte: kaleyi kapatmasın */
#banner.pen { top: calc(var(--safe-t) + 92px); }
#banner.pen .b-main { font-size: clamp(34px, 10vw, 60px); }
#penChest { top: calc(var(--safe-t) + 178px); }

/* --- Gol klibi: kayıt göstergesi ve klip penceresi --- */
#recTag { position: fixed; top: calc(var(--safe-t) + 10vh + 8px); left: 50%; transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 8px 14px 10px; border-radius: 16px; background: rgba(8, 10, 20, 0.78); border: 1px solid rgba(255, 77, 94, 0.55); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); min-width: 230px; }
#recTag b { font-weight: 900; letter-spacing: 0.16em; color: #ff4d5e; } #recTag small { font-weight: 700; opacity: 0.85; font-size: 12px; }
#recTag .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff2d45; box-shadow: 0 0 0 0 rgba(255, 45, 69, 0.7); animation: recPulse 1s infinite; }
@keyframes recPulse { 70% { box-shadow: 0 0 0 9px rgba(255, 45, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 69, 0); } }
#recTag i { flex-basis: 100%; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; } #recTag em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff4d5e, #ffd23f); transition: width 0.15s linear; }
.clip-card { width: min(92vw, 400px); }
.clip-head { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 10px; }
.clip-head .ic { width: 34px; height: 34px; color: #ffd23f; } .clip-head b { display: block; font-size: 19px; font-weight: 900; font-style: italic; } .clip-head small { opacity: 0.75; font-weight: 700; font-size: 12px; }
.clip-frame { position: relative; margin: 0 auto 10px; width: min(62vw, 230px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #000; border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 210, 63, 0.25); }
#clipVideo { width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; display: block; }
.clip-tags { display: block; margin: 8px auto 0; padding: 7px 12px; border-radius: 12px; border: 1px dashed rgba(255, 210, 63, 0.6); background: none; color: #ffd23f; font-weight: 800; font-size: 12px; }

/* ---------- Kariyer kartı, kulüp arması ---------- */
.crest { display: inline-grid; place-items: center; width: 42px; height: 46px; flex: 0 0 auto; font-style: normal; background: linear-gradient(135deg, var(--a) 0 52%, var(--b) 52% 100%);
  clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.crest b { font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.5); }
.crest.none { --a: #3a4466; --b: #262d46; }
.hub { background: linear-gradient(160deg, rgba(40, 52, 98, 0.95), rgba(14, 20, 42, 0.95)); border: 1px solid var(--line2); border-radius: 22px; padding: 14px; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.hub-top { display: flex; align-items: center; gap: 12px; } .hub-top > div:nth-child(2) { flex: 1; } .hub-top b { display: block; font-size: 18px; font-weight: 900; font-style: italic; } .hub-top small { color: var(--muted); font-size: 12px; }
.hub-fans { text-align: right; } .hub-fans b { color: var(--cyan); font-size: 20px; font-style: normal !important; } .hub-fans small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.hub-con { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; font-weight: 700; align-items: center; } .hub-con span { display: flex; gap: 4px; align-items: center; }
.hub-con > i { flex-basis: 100%; height: 7px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; } .hub-con > i > em { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff9f1a); } .hub-con span { white-space: nowrap; } .hub-con .ic { width: 15px; height: 15px; }
.hub-tip { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.hub-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-top: 12px; } .hub-row .mid { padding: 9px 6px 8px; } .hub-row .mid .ic { width: 22px; height: 22px; }
.hub-row .mid.hs .ic { color: #2ec4ff; }
.node.fan::before { content: ""; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: #2ec4ff; box-shadow: 0 0 10px #2ec4ff; border: 2px solid #0b2a6b; }
.boss-crest .crest { width: 38px; height: 42px; }
.chapter.c-stadyum[class*="c-"] .nodes .node.boss .crest b { font-size: 13px; }
.rw-pill { display: inline-flex; align-items: center; gap: 4px; margin: 6px 4px 0 0; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 800; }
.rw-pill.fans { color: var(--cyan); } .rw-pill .ic { width: 14px; height: 14px; }
.r-bubble.hs { border-color: #2ec4ff !important; box-shadow: 0 0 18px rgba(46, 196, 255, 0.45); } .hs-name { color: #2ec4ff; margin-right: 4px; }
.hood-btn { background: linear-gradient(180deg, rgba(46, 120, 90, 0.95), rgba(18, 60, 44, 0.95)) !important; }

/* ---------- Transfer ---------- */
.card.transfer { max-width: 420px; max-height: 92vh; text-align: left; }
.tf-head { display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,.25); border-radius: 16px; padding: 8px 10px; }
.tf-head img { width: 56px; height: 56px; border-radius: 14px; background: #ffc23a33; } .tf-head b { color: #ffc23a; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; } .tf-head p { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; }
.card.transfer h2 { margin: 14px 0 2px; font-size: 20px; } .tf-fans { margin: 0 0 10px; color: var(--cyan); font-size: 12px; font-weight: 700; display: flex; gap: 5px; align-items: center; }
.offer-card { position: relative; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--line2); border-radius: 18px; padding: 12px; margin-bottom: 10px; }
.offer-card.loyal { border-color: rgba(255, 210, 63, .6); box-shadow: 0 0 16px rgba(255, 210, 63, .18); }
.oc-head { display: flex; gap: 10px; align-items: center; } .oc-head > div { flex: 1; } .oc-head b { display: block; font-size: 17px; font-weight: 900; font-style: italic; } .oc-head small { color: var(--muted); font-size: 11.5px; }
.offer-card .tagx { position: static; }
.oc-joke { margin: 8px 0; font-size: 12.5px; color: #cfd8f0; font-style: italic; }
.oc-terms { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 4px; } .oc-terms li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; background: rgba(0,0,0,.2); padding: 6px 9px; border-radius: 10px; }
.oc-terms b { display: flex; gap: 3px; align-items: center; white-space: nowrap; } .oc-perk { display: block; color: var(--gold); font-size: 11.5px; font-weight: 700; margin-bottom: 8px; }
.offer-card .big.primary { padding: 12px; } .offer-card .big.primary span { font-size: 19px; }

/* ---------- Reis Gazetesi ---------- */
.paper-card { width: 100%; max-width: 390px; max-height: 94vh; overflow-y: auto; background: #f3ead7; color: #1a1410; border-radius: 6px; padding: 16px 16px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  font-family: Georgia, "Times New Roman", serif; animation: paperIn .55s cubic-bezier(.2, 1.3, .4, 1); transform-origin: 50% 60%; }
@keyframes paperIn { from { transform: rotate(-540deg) scale(.1); opacity: 0; } to { transform: rotate(-1.2deg) scale(1); opacity: 1; } }
.pp-mast { text-align: center; border-bottom: 3px double #1a1410; padding-bottom: 6px; } .pp-mast b { display: block; font-size: 34px; font-weight: 900; letter-spacing: 1px; } .pp-mast small { font-size: 11px; font-style: italic; }
.paper-card h1 { font-family: var(--font); font-size: 27px; line-height: 1.05; font-weight: 900; margin: 12px 0 10px; text-transform: uppercase; }
#ppImg { width: 100%; border: 3px solid #1a1410; display: block; background: #d9cfb8; } #ppImg.face { width: 46%; float: left; margin: 0 12px 6px 0; border-width: 2px; } #ppImg.shot { aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(.25) sepia(.25) contrast(1.05); margin-bottom: 8px; }
.pp-sub { font-size: 15px; line-height: 1.35; margin: 0 0 8px; font-weight: 600; }
.pp-cols { clear: both; columns: 2; column-gap: 14px; column-rule: 1px solid #1a141055; font-size: 12.5px; line-height: 1.3; border-top: 1px solid #1a1410; padding-top: 6px; } .pp-cols p { margin: 0 0 6px; break-inside: avoid; }
.paper-card .bip { background: #1a1410; color: #1a1410; }
.paper-card .row { margin-top: 10px; } .paper-card .big:not(.primary) { background: #1a1410; color: #f3ead7; box-shadow: 0 4px 0 #000; } .paper-card .big:not(.primary) span .ic { color: #ffd23f; }

/* ---------- Kişisel mahalle ---------- */
#hoodScr { background: linear-gradient(180deg, rgba(6,9,20,.55) 0, rgba(6,9,20,0) 18%, rgba(6,9,20,0) 55%, rgba(6,9,20,.75) 70%); padding-top: calc(var(--safe-t) + 58px); overflow: hidden; touch-action: none; }
#hoodScr .bar { position: relative; z-index: 2; }
.hood-info { position: relative; z-index: 2; align-self: flex-start; background: rgba(6,9,20,.6); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hood-info:empty { display: none; } .hood-info b { display: block; color: var(--gold); font-size: 14px; font-style: italic; } .hood-info small { color: #cfd8f0; font-size: 11.5px; }
.hood-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 12px calc(var(--safe-b) + 12px); background: linear-gradient(180deg, rgba(14, 20, 42, 0.92), rgba(6, 9, 20, 0.98)); border-top: 1px solid var(--line2); border-radius: 22px 22px 0 0; max-height: 52vh; overflow-y: auto; touch-action: pan-y; }
.hood-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; touch-action: pan-x; } .hood-tabs::-webkit-scrollbar { display: none; }
.hood-tabs button { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 800; font-size: 13px; }
.hood-tabs button.on { background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; }
.hood-items { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; flex-wrap: nowrap; touch-action: pan-x; scrollbar-width: none; } .hood-items::-webkit-scrollbar { display: none; }
.hood-card { position: relative; flex: 0 0 148px; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid var(--line2); min-height: 132px; }
.hood-card b { font-size: 14px; font-weight: 900; line-height: 1.1; } .hood-card small { color: var(--muted); font-size: 11px; line-height: 1.25; flex: 1; }
.hood-card .hc-foot { display: flex; justify-content: space-between; align-items: center; gap: 4px; } .hood-card .pp { color: var(--gold); font-size: 11px; font-weight: 800; display: flex; gap: 3px; align-items: center; } .hood-card .pp .ic { width: 12px; height: 12px; }
.hood-card em { font-style: normal; font-weight: 900; font-size: 12px; background: rgba(255,255,255,.12); padding: 3px 8px; border-radius: 999px; display: flex; gap: 3px; align-items: center; white-space: nowrap; }
.hood-card.own em { background: rgba(61, 220, 132, .25); color: #9ff5c6; } .hood-card.on { border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 210, 63, .3); } .hood-card.on em { background: var(--gold); color: #2a1600; }
.hood-card .tagx { top: -2px; right: -2px; font-size: 8.5px; }
.sus-chips { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; } .sus-chips button { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 11.5px; font-weight: 800; text-align: left; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sus-chips button.on { background: rgba(255, 210, 63, .3); color: var(--gold); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px; } .swatches button { width: 42px; height: 42px; border-radius: 12px; border: 3px solid rgba(255,255,255,.2); } .swatches button.on { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.6); }
#hoodItems .proto { flex-basis: 100%; }
.hood-items:has(.swatches) { flex-wrap: wrap; } .hood-items:has(.sign-opt) { flex-wrap: wrap; } .hood-items:has(.soc-btns) { flex-direction: column; flex-wrap: nowrap; overflow: visible; }
.sign-opt { padding: 9px 12px; border-radius: 12px; background: #1f3d7a; border: 2px solid #ffd23f55; font-weight: 900; font-size: 12.5px; } .sign-opt.on { border-color: #ffd23f; box-shadow: 0 0 12px rgba(255, 210, 63, .4); }
.soc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .soc-btns .big { padding: 11px 12px; } .soc-btns .big span { font-size: 13.5px; } .soc-btns .big.primary span { font-size: 15px; }
.notes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; } .notes li { background: rgba(255,255,255,.06); border-radius: 12px; padding: 7px 10px; font-size: 13px; display: flex; gap: 8px; } .notes li b { color: var(--gold); white-space: nowrap; } .notes li[data-id] { cursor: pointer; }
.visit-acts { display: grid; gap: 8px; } .visit-acts .big.primary span { font-size: 19px; } .visit-acts .big:disabled { filter: grayscale(.7); opacity: .7; }
.hood-panel .sec-h { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
#lbList li.hood-row, #lbList li.paper-row, #lbList li.note-opt { cursor: pointer; } #lbList li.note-opt { font-weight: 700; }
.room-hood { margin: 0 0 4px; color: #ffd8a8; font-weight: 800; font-size: 12.5px; } .room-hood:empty { display: none; }
.tagx { background: var(--red); border-radius: 8px; padding: 3px 9px; font-size: 11px; font-weight: 900; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); color: #fff; }
.hood-card .tagx { position: absolute; padding: 2px 6px; }
.offer-card.loyal .tagx { background: #b8860b; }
#banner.low { top: auto !important; bottom: calc(var(--safe-b) + 12%); transform: none; }
.r-reward { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; } .r-reward .rw-pill { margin: 2px 0 0; }
.r-reward { flex-shrink: 0; height: auto; margin-bottom: 4px; }
#roomScr.in-hood { background: linear-gradient(180deg, rgba(12,8,6,.35) 0, rgba(12,8,6,0) 14%, rgba(12,8,6,0) 34%, rgba(12,8,6,.88) 50%); } #roomScr.in-hood .room-code { margin-top: 28vh; }
.hood-card.pv { border-color: #2ec4ff; box-shadow: 0 0 16px rgba(46, 196, 255, .45); }
.hood-card.pv em { background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; }
.hood-card .pv-tag { position: absolute; top: -2px; left: -2px; font-style: normal; font-size: 8.5px; font-weight: 900; background: #2ec4ff; color: #04203a; padding: 2px 6px; border-radius: 8px; }
.card.confirm { text-align: center; } .card.confirm p { margin: 8px 0 16px; line-height: 1.5; font-size: 15px; } .card.confirm p b { color: var(--gold); font-size: 18px; }
#confirmModal { z-index: 40; }
#hoodBubbles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.yield-bubble { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; gap: 4px; align-items: center; white-space: nowrap; padding: 5px 10px; border-radius: 999px; font-weight: 900; font-size: 12.5px;
  background: rgba(6, 9, 20, 0.7); border: 1px solid rgba(255,255,255,.25); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.yield-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(6, 9, 20, 0.7); border-bottom: 0; }
.yield-bubble .ic { width: 14px; height: 14px; }
.yield-bubble.ready { background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; border-color: #fff3b0; animation: ybob 1.4s ease-in-out infinite; }
.yield-bubble.ready::after { border-top-color: #ffb21a; } .yield-bubble.ready .ic { color: #2a1600; }
.yield-bubble.full { box-shadow: 0 0 18px rgba(255, 210, 63, .8); }
.yield-bubble:not(.ready) { padding: 4px; } .yield-bubble i { display: block; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#ffd23f var(--f), rgba(255,255,255,.15) 0); }
@keyframes ybob { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
.yield-float { position: fixed; z-index: 30; pointer-events: none; font-weight: 900; font-size: 18px; color: #ffd23f; text-shadow: 0 2px 4px #000; display: flex; gap: 5px; align-items: center; animation: yfloat 1.4s ease-out forwards; white-space: nowrap; }
@keyframes yfloat { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }
.hood-card small.perk { color: #9fe3ff; flex: 0 0 auto; display: flex; gap: 4px; align-items: flex-start; font-weight: 700; } .hood-card small.perk .ic { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 1px; color: #2ec4ff; }
.collect-all { display: flex; gap: 5px; align-items: center; margin-top: 6px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; font-weight: 900; font-size: 12.5px; }
.hood-card { min-height: 150px; }

/* ---------- Ana menü: sekmeler ---------- */
#title { padding-bottom: calc(var(--safe-b) + 84px); }
.title-top { position: absolute; top: calc(var(--safe-t) + 10px); left: 12px; display: flex; gap: 8px; z-index: 3; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(6,9,20,.6); border: 1px solid var(--line2); display: grid; place-items: center; }
.icon-btn .ic { width: 22px; height: 22px; color: var(--gold); }
.tab-pane { display: flex; flex-direction: column; gap: 10px; }
.main-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px calc(var(--safe-b) + 6px); background: linear-gradient(180deg, rgba(14, 20, 42, 0.95), rgba(6, 9, 20, 0.99)); border-top: 1px solid var(--line2); }
#title[hidden] ~ .main-tabs { display: none; }
.main-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; background: none; color: var(--muted); font-weight: 800; font-size: 11.5px; border-radius: 12px; }
.main-tabs button .ic { width: 24px; height: 24px; }
.main-tabs button.on { color: var(--gold); background: rgba(255, 210, 63, .1); }
.main-tabs button.locked { opacity: .45; } .main-tabs button.locked::after { content: ""; position: absolute; top: 4px; right: 22%; width: 12px; height: 12px; background: currentColor; -webkit-mask: url(icons/lock.svg) center/contain no-repeat; mask: url(icons/lock.svg) center/contain no-repeat; }
.main-tabs button.new::before { content: "YENİ"; position: absolute; top: -6px; right: 14%; background: var(--red); color: #fff; font-size: 8.5px; padding: 2px 5px; border-radius: 6px; font-weight: 900; }
.quest-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 16px; background: linear-gradient(160deg, rgba(46, 196, 255, .2), rgba(13, 19, 38, .9)); border: 1px solid rgba(46, 196, 255, .4); text-align: left; }
.quest-card .ic { width: 26px; height: 26px; color: #2ec4ff; } .quest-card span { flex: 1; } .quest-card b { display: block; font-size: 14px; } .quest-card small { color: var(--muted); font-size: 12px; } .quest-card em { font-style: normal; font-size: 11px; color: var(--muted); }
.quest-card.ready { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 210, 63, .35); animation: glow 1.6s infinite; } .quest-card.ready small { color: var(--gold); }
.hood-hero { padding: 22px 18px !important; } .hood-hero span { font-size: 22px !important; } .hood-ready { color: #ffd23f !important; font-weight: 800 !important; }
.team-btn { background: linear-gradient(180deg, rgba(122, 31, 107, .9), rgba(52, 14, 48, .95)) !important; } .invite-btn { background: linear-gradient(180deg, rgba(139, 92, 246, .85), rgba(52, 26, 110, .95)) !important; }
/* görevler, albüm */
.card.quests, .card.album { max-height: 90vh; } #questList, #questBonus { display: grid; gap: 8px; margin: 8px 0; }
.quest { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: left; } .quest > div { flex: 1; }
.quest b { display: flex; gap: 5px; align-items: center; font-size: 14px; } .quest small { color: var(--muted); font-size: 11.5px; display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.quest i { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); margin-top: 6px; overflow: hidden; } .quest i em { display: block; height: 100%; background: linear-gradient(90deg, #2ec4ff, #13ffd2); }
.quest.done { border: 1px solid var(--gold); } .quest.got { opacity: .55; } .quest.bonus { background: linear-gradient(160deg, rgba(255, 210, 63, .18), rgba(255,255,255,.04)); }
.quest .buy { min-width: 64px; }
.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.alb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.18); opacity: .55; }
.alb .ic { width: 26px; height: 26px; color: var(--muted); } .alb b { font-size: 12.5px; } .alb small { font-size: 10px; color: var(--muted); text-align: center; }
.alb.on { opacity: 1; border: 1px solid var(--gold); background: linear-gradient(160deg, rgba(255, 210, 63, .2), rgba(255,255,255,.03)); } .alb.on .ic { color: var(--gold); }
/* takım */
#teamScr { background: radial-gradient(ellipse at 50% 0%, rgba(122, 31, 107, 0.95), rgba(6, 9, 20, 0.985) 70%); padding-top: calc(var(--safe-t) + 58px); }
#teamBody { display: flex; flex-direction: column; gap: 10px; }
.team-head { display: flex; gap: 12px; align-items: center; } .team-head b { display: block; font-size: 22px; font-style: italic; } .team-head small { color: var(--muted); }
.team-intro b { display: block; font-size: 16px; } .team-intro small { color: var(--muted); }
.crest.mini { width: 22px; height: 24px; } .team-list li, .team-m li { align-items: center; cursor: pointer; } .team-list li span, .team-m li span { margin-left: auto; color: var(--muted); font-size: 12px; }
/* mahalle: geliştirme */
.hood-card .hc-up { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 4px; padding: 4px 6px; border-radius: 9px; background: rgba(46, 196, 255, .2); color: #9fe3ff; font-size: 11px; font-weight: 900; }
.hood-card .hc-up .ic { width: 12px; height: 12px; }
.big.danger { background: linear-gradient(180deg, rgba(200, 30, 43, .5), rgba(90, 10, 20, .7)); border-color: rgba(255, 77, 109, .5); }
#getApp { position: fixed; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(6,9,20,.95); border: 1px solid var(--gold); }
#getApp span { flex: 1; } #getApp b { display: block; color: var(--gold); } #getApp small { color: var(--muted); font-size: 12px; }
#getApp a { background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; font-weight: 900; padding: 8px 16px; border-radius: 999px; text-decoration: none; } #getApp button { background: none; font-size: 20px; color: var(--muted); }
#teamBody .big.primary span { font-size: 17px; } #teamBody .row .big { padding: 12px; }

/* saha görünümü düğmesi */
.view-btn { position: absolute; right: 12px; top: calc(var(--safe-t) + 112px); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 6px; border-radius: 14px;
  background: rgba(6, 9, 20, .7); border: 1px solid rgba(255,255,255,.25); color: #fff; font-weight: 900; font-size: 10px; letter-spacing: .5px; pointer-events: auto; }
.view-btn .ic { width: 24px; height: 24px; color: #2ec4ff; }
.view-btn.on { background: linear-gradient(180deg, #2ec4ff, #1478c8); border-color: #bff4ff; } .view-btn.on .ic { color: #fff; }
/* günlük görev düğmeleri: net durumlar */
.quest .buy { min-width: 78px; padding: 10px 12px; border-radius: 12px; font-weight: 900; font-size: 14px; background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid rgba(255,255,255,.12); }
.quest .buy.claim { background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; border: 0; box-shadow: 0 4px 0 #a35a00, 0 0 16px rgba(255, 210, 63, .5); animation: glow 1.4s infinite; }
.quest .buy.owned { background: rgba(61, 220, 132, .18); color: #9ff5c6; border-color: rgba(61, 220, 132, .4); }
.quest .buy.wait { font-size: 11.5px; font-weight: 800; }
/* alt sekme çubuğu son kartı örtmesin: kaydırılan flex kapta padding-bottom yok sayılır, bu yüzden ayrı boşluk */
#title { padding-bottom: 0; }
#title::after { content: ""; flex: 0 0 calc(var(--safe-b) + 92px); }
.hub-row .mid.locked { opacity: .5; } .hub-row .mid.locked .ic { color: var(--muted); }

/* ---------- Satın alma düğmeleri: cezbedici ---------- */
.item .buy { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 112px; padding: 9px 16px 8px; border-radius: 14px; border: 0;
  font-weight: 900; transition: transform .1s; }
.item .buy em { font-style: normal; font-size: 16px; display: flex; gap: 4px; align-items: center; }
.item .buy i { font-style: normal; font-size: 10px; letter-spacing: 1.5px; opacity: .85; }
.item .buy:active { transform: translateY(3px) scale(.97); }
.item .buy::after { content: ""; position: absolute; top: -10%; left: -70%; width: 45%; height: 120%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-20deg); animation: buyShine 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes buyShine { 0% { left: -70%; } 55%, 100% { left: 140%; } }
.item .buy.coin { background: linear-gradient(180deg, #fff09a 0%, #ffc21f 55%, #ff9d14 100%); color: #3a2000; box-shadow: 0 4px 0 #a35a00, 0 6px 16px rgba(255, 170, 30, .45); }
.item .buy.gem { background: linear-gradient(180deg, #c9f3ff 0%, #5fc8ff 50%, #7b5cff 100%); color: #0b1f4a; box-shadow: 0 4px 0 #3b2a9e, 0 6px 18px rgba(110, 140, 255, .5); }
.item .buy.gem .ic-gem { color: #1b2a8a; }
.item .buy.cash { background: linear-gradient(180deg, #ff9a6b 0%, #ff4d4d 55%, #d81b60 100%); color: #fff; box-shadow: 0 4px 0 #8a0f3a, 0 0 22px rgba(255, 77, 109, .55); animation: cashPulse 1.6s ease-in-out infinite; }
.item .buy.cash em { font-size: 17px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
@keyframes cashPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.item .buy.ad { background: linear-gradient(180deg, #7af5b0, #1fb866); color: #032; box-shadow: 0 4px 0 #127a42, 0 6px 14px rgba(34, 184, 102, .4); }
.item .buy.use { background: linear-gradient(180deg, #7af5b0, #22b866); color: #032; box-shadow: 0 4px 0 #127a42; }
.item .buy.owned { background: #2e3654; color: var(--muted); box-shadow: none; } .item .buy.owned::after, .item .buy.use::after { display: none; }
.item.hot { box-shadow: 0 0 0 2px rgba(255, 77, 109, .6), 0 0 26px rgba(255, 77, 109, .3); }
/* mahalle kartı fiyatı */
.hood-card em.price { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff09a, #ffb21a); color: #3a2000; box-shadow: 0 2px 0 #a35a00; padding: 4px 10px; }
.hood-card em.price::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); animation: buyShine 3s ease-in-out infinite; }
.hood-card em.price.go { background: linear-gradient(180deg, #ff9a6b, #ff4d4d); color: #fff; box-shadow: 0 2px 0 #8a0f3a, 0 0 12px rgba(255, 77, 109, .5); }
.hood-card em.price .ic-coin { color: #8a5a00; }
/* ana ekran kaydırılmaz: her şey tek ekrana sığar */
#title { overflow: hidden; touch-action: none; overscroll-behavior: none; justify-content: flex-start; gap: 8px; }
#title .logo.small .logo-main span { font-size: clamp(36px, 10.5vw, 64px); }
#title .menu { flex: 1 1 auto; min-height: 0; }
#title .tab-pane { gap: 8px; }
#title .big { padding: 11px 14px; } #title .big.primary { padding: 14px; } #title .big.primary span { font-size: 21px; }
#title .reis-tip { margin-top: auto; }
#title::after { flex: 0 0 calc(var(--safe-b) + 78px); }
@media (max-height: 760px) { #title .reis-tip { display: none; } #title .event-chip { display: none; } }
@media (max-height: 680px) { #title .season-card .sc-row { display: none; } #title .big small { display: none; } }

/* nişangah paneli: üstte mini kale */
.aim-panel { position: absolute; left: 50%; top: calc(var(--safe-t) + 118px); transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
  background: rgba(6, 9, 20, .72); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 8px 10px 6px; }
.ap-goal { position: relative; width: 170px; height: 58px; border: 4px solid #fff; border-bottom: 0; border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 9px); }
.ap-goal::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: 0; height: 2px; background: rgba(255,255,255,.5); }
.ap-keeper { position: absolute; bottom: 0; width: 14px; height: 32px; margin-left: -7px; border-radius: 7px 7px 2px 2px; background: #2bd46a; opacity: .85; }
.ap-dot { position: absolute; width: 18px; height: 18px; margin: 0 0 -9px -9px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.35), 0 0 14px #ffd23f; }
.aim-panel b { font-size: 12px; font-weight: 900; letter-spacing: 1px; color: #fff; }
.aim-panel.in { border-color: rgba(61, 220, 132, .7); } .aim-panel.in b { color: #7af5b0; } .aim-panel.in .ap-dot { background: #7af5b0; box-shadow: 0 0 0 3px rgba(61,220,132,.35), 0 0 14px #3ddc84; }
.aim-panel.out { border-color: rgba(255, 77, 109, .7); } .aim-panel.out b { color: #ff7a8f; } .aim-panel.out .ap-dot { background: #ff4d6d; box-shadow: 0 0 0 3px rgba(255,77,109,.35), 0 0 14px #ff4d6d; }
.aim-panel.pass b { color: #9fe3ff; }
.aim-panel { top: calc(var(--safe-t) + 176px); }
.ap-goal { overflow: visible; margin: 0 26px; }
.ap-goal::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.18); }
.aim-panel.in:not(.corner) b { color: #ffe27a; } .aim-panel.in:not(.corner) .ap-dot { background: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.35), 0 0 14px #ffd23f; } .aim-panel.in:not(.corner) { border-color: rgba(255, 210, 63, .6); }

/* yeğen saldırı süresi */
.bug-timer { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 112px); width: min(78vw, 320px); text-align: center; pointer-events: none; z-index: 3; }
.bug-timer b { display: block; font-size: 14px; font-weight: 900; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.8); margin-bottom: 5px; animation: glow 0.8s infinite; }
.bug-timer .track { height: 10px; border-radius: 6px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); overflow: hidden; }
.bug-timer .fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff4d4d, #ffd23f); }
.bug-timer.low .fill { background: #ff3b3b; }

.boosts.sp-hide { opacity: 0; pointer-events: none; transform: translateY(20px); }
.boosts { transition: opacity .25s, transform .25s; }

/* gol albümü: liste kendi içinde kayar, Kapat tuşu kartın altında sabit, köşede X */
.card.album { display: flex; flex-direction: column; overflow: hidden; max-height: min(92vh, 760px); }
.card.album .album-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 6px; margin: 10px -2px 0; -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent); mask-image: linear-gradient(180deg, #000 92%, transparent); }
.card.album #albumClose { flex-shrink: 0; margin-top: 12px; background: linear-gradient(180deg, #ffe979, #ffb21a); color: #2a1600; border: 0; box-shadow: 0 4px 0 #a35a00; font-weight: 900; }
.album-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; z-index: 2; }

/* mağaza satıcısı Hamam Reis */
.shop-reis { display: flex; gap: 10px; align-items: center; margin: 2px 14px 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: linear-gradient(135deg, rgba(110, 60, 30, .9), rgba(55, 28, 12, .9)); border: 1px solid rgba(201, 138, 90, .6); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.shop-reis img { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; background: radial-gradient(circle at 50% 30%, #f6d9b0, #8a4b2a); }
.shop-reis .sr-bub { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.shop-reis .sr-bub b { font-size: 11px; color: #ffcf8a; letter-spacing: .4px; text-transform: uppercase; }
.shop-reis.talk { animation: srPop .35s ease-out; }
@keyframes srPop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* Vuruş Okulu */
.lesson-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; padding: 2px; }
.lesson { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; text-align: left; }
.lesson .ic { width: 24px; height: 24px; color: #2ec4ff; } .lesson b { font-size: 13.5px; } .lesson small { font-size: 11px; color: var(--muted); }
.lesson.done { border-color: rgba(61,220,132,.55); background: linear-gradient(160deg, rgba(61,220,132,.18), rgba(255,255,255,.03)); } .lesson.done .ic { color: #3ddc84; } .lesson.done small { color: #9ff5c6; }
.lesson-btn { background: linear-gradient(160deg, rgba(46,196,255,.22), rgba(255,255,255,.04)); border-color: rgba(46,196,255,.5); }
#hud.lesson #hudShots { display: none !important; }
#coachText b { display: inline !important; color: #ffd23f; font-weight: 900; font-size: inherit; margin: 0; }

/* mahalle döndürme düğmeleri */
.hood-rot { position: absolute; right: 12px; top: calc(var(--safe-t) + 120px); z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.hood-rot button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(6,9,20,.7); color: #fff; font-size: 22px; font-weight: 900; display: grid; place-items: center; }

/* ince tam genişlik menü düğmesi (gol albümü) */
#title .big.slim { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 16px; min-height: 0; }
#title .big.slim small { margin: 0; }

/* Vuruş Okulu rehberi: kesikli yol + kayan parmak */
.guide { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
#guidePath { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 13; animation: gDash .6s linear infinite; }
#guideGlow { fill: none; stroke: #2ec4ff; stroke-width: 14; stroke-linecap: round; opacity: .35; filter: url(#gGlow); }
#guideEnd { fill: rgba(255,210,63,.18); stroke: #ffd23f; stroke-width: 3; animation: gEnd 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gDash { to { stroke-dashoffset: -15; } }
@keyframes gEnd { 50% { transform: scale(1.25); } }
.guide-finger { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; width: 52px; height: 52px; margin: -6px 0 0 -18px; transition: opacity .15s; }
.guide-finger .ic { width: 52px; height: 52px; color: #fff; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.ic-finger { --i: url(icons/finger.svg); }
.guide-note { position: fixed; z-index: 5; transform: translateX(-50%); pointer-events: none; background: rgba(6,9,20,.82); border: 1px solid #ffd23f; color: #ffd23f; font-weight: 900; font-size: 13px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }

/* ================= Sokak Akademisi ================= */
#acadScr { background: radial-gradient(ellipse at 50% 0%, rgba(31, 122, 77, 0.95), rgba(6, 9, 20, 0.985) 70%); padding-top: calc(var(--safe-t) + 58px); }
#gazScr { background: #e9e1cf; color: #1d1a14; padding-top: calc(var(--safe-t) + 58px); }
#gazScr .bar h2, #gazScr .back { color: #1d1a14; }
.ac-ap { text-align: right; font-weight: 900; line-height: 1.1; } .ac-ap b { color: var(--gold); font-size: 20px; } .ac-ap small { display: block; color: #ff8fc8; font-size: 11px; }
.ac-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .ac-tabs::-webkit-scrollbar { display: none; }
.ac-tabs button { flex: 0 0 auto; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line2); color: #fff; font-weight: 800; font-size: 13px; }
.ac-tabs button.on { background: var(--gold); color: #2a1600; border-color: transparent; }
.ac-body { display: flex; flex-direction: column; gap: 10px; }
.ac-info { display: flex; flex-direction: column; gap: 2px; } .ac-info span { font-weight: 900; font-size: 16px; } .ac-info small { color: var(--muted); font-size: 12px; }
.ac-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ac-card { position: relative; padding: 11px 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 5px; text-align: left; }
.ac-card.sq { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.ac-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ac-top b { font-size: 16px; }
.ac-stars { color: var(--gold); letter-spacing: 1px; font-size: 13px; white-space: nowrap; } .ac-stars i { font-style: normal; color: rgba(255,255,255,.2); }
.ac-spec { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ac-spec .ic { color: var(--gold); }
.ac-bars { display: grid; gap: 3px; } .ac-bars span { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 6px; font-size: 11px; }
.ac-bars small { color: var(--muted); } .ac-bars b { text-align: right; font-size: 11px; }
.ac-bars i { position: relative; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: visible; } .ac-bars em { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: #5fd7ff; }
.ac-bars .main em { background: var(--gold); } .ac-bars u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,.55); }
.ac-card > em { font-style: normal; font-size: 12px; font-weight: 800; color: #9fe8ff; } .ac-card > em.ok { color: #9ff5c6; } .ac-card > em.bad { color: #ff8a8a; }
.ac-new > small { display: block; text-align: center; color: var(--gold); font-weight: 900; margin-bottom: 8px; letter-spacing: .5px; }
.ac-modal { max-width: 400px; } .ac-modal .mx { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; border: 0; z-index: 2; }
.ac-modal h3 { margin: 0 0 8px; padding-right: 36px; }
.ac-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ac-acts .big { padding: 12px 14px; }
.ac-perk { font-size: 13px; margin: 8px 0 0; } .ac-perk small { color: var(--muted); }
.ac-busy { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(95, 215, 255, .12); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ac-busy button, .tr-row button, .mat button, .notes li button, .order button, .stad button, .gz-box button, .gz-refresh button, .im-need button {
  padding: 7px 11px; border-radius: 10px; border: 0; background: var(--gold); color: #2a1600; font-weight: 900; font-size: 12px; white-space: nowrap; }
button:disabled { opacity: .45; }
.tr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tr-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 13px; }
.tr-row b small { color: #9ff5c6; font-weight: 800; margin-left: 4px; } .tr-row span { grid-column: 1; color: var(--muted); font-size: 12px; } .tr-row button { grid-row: 1 / span 2; grid-column: 2; }
.tr-row:not(.ok) button { background: rgba(255,255,255,.15); color: #fff; } .tr-row.max { opacity: .6; }
.ac-miss { font-size: 15px; line-height: 1.7; }
.mat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mat { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: center; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line2); color: #fff; text-align: left; }
.mat i .mi { width: 38px; height: 38px; } .mat i { grid-row: 1 / span 2; } .mat b { font-size: 20px; } .mat small { color: var(--muted); font-size: 11px; }
.mat div { grid-column: 1 / span 2; display: flex; gap: 6px; margin-top: 6px; } .mat div button { flex: 1; padding: 6px 4px; } .mat div button:first-child { background: rgba(255,255,255,.15); color: #fff; }
.mat-grid.pick .mat { grid-template-columns: 34px 1fr; }
.lp label { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-weight: 800; } .lp label input { flex: 1; } .lp label button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; } .lp p { margin: 6px 0; }
.ac-orders, .stad { display: grid; gap: 8px; }
.order, .st { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line2); }
.order b, .st b { font-size: 15px; } .order span, .st span { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .order em { font-style: normal; font-weight: 800; color: var(--gold); font-size: 13px; }
.order small, .st em { font-size: 12px; color: var(--muted); font-style: normal; } .order.done { opacity: .5; } .order button { align-self: flex-start; }
.st.done { opacity: .6; border-color: rgba(61, 220, 132, .5); } .st.cur { border-color: var(--gold); } .st button { align-self: flex-start; }
.rival { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rival div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.07); }
.rival img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); } .rival em { font-style: normal; font-weight: 900; font-size: 22px; color: var(--gold); }
.rbar { height: 10px; border-radius: 6px; background: rgba(255, 45, 154, .35); overflow: hidden; margin: 8px 0; } .rbar i { display: block; height: 100%; background: linear-gradient(90deg, #3ddc84, #ffd23f); }
.squad-chip { position: absolute; left: 12px; top: calc(var(--safe-t) + 172px); z-index: 3; max-width: 70vw; padding: 5px 10px; border-radius: 12px; background: rgba(6, 9, 20, .65); border: 1px solid rgba(255, 210, 63, .5); color: #fff; font-size: 11px; font-weight: 800; pointer-events: none; }
.squad-chip .ic { color: var(--gold); }
.ac-btn { background: linear-gradient(160deg, rgba(31, 122, 77, .85), rgba(14, 40, 30, .9)); } .gz-btn { background: linear-gradient(160deg, rgba(233, 225, 207, .25), rgba(60, 50, 30, .6)); }
.raid-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px; border-radius: var(--r); border: 1px solid #ff2d9a; background: linear-gradient(160deg, rgba(255, 45, 154, .35), rgba(40, 6, 30, .9)); color: #fff; overflow: hidden; margin-top: 9px; }
.raid-card b { font-size: 17px; font-style: italic; } .raid-card small { color: #ffd0e8; } .raid-card i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 0%); background: #ffd23f; }
.raid-card.live { animation: glow 1.4s infinite; }
/* gazete */
.gaz { display: flex; flex-direction: column; gap: 10px; font-family: Georgia, "Times New Roman", serif; }
.gz-mast { text-align: center; border-top: 4px double #1d1a14; border-bottom: 4px double #1d1a14; padding: 6px 0; }
.gz-mast b { display: block; font-size: 30px; letter-spacing: 1px; font-weight: 900; } .gz-mast small { font-size: 11px; font-style: italic; }
.gz-lead h2 { margin: 2px 0; font-size: 24px; line-height: 1.1; } .gz-lead p { margin: 0; font-style: italic; }
.gz-head { border-top: 1px solid rgba(0,0,0,.25); padding-top: 6px; } .gz-head b { display: block; font-size: 16px; } .gz-head small { font-size: 12px; }
.gz-sec { margin: 10px 0 0; font-size: 13px; letter-spacing: .2em; border-bottom: 2px solid #1d1a14; padding-bottom: 2px; }
.gz-box { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.25); border-radius: 6px; background: rgba(255,255,255,.4); font-family: system-ui, Rubik, sans-serif; }
.gz-box b { font-size: 15px; } .gz-box small { font-size: 12px; color: #4a4333; } .gz-box button { align-self: flex-start; }
.gz-box.live, .gz-box.raid.live { background: #1d1a14; color: #ffd23f; } .gz-box.live small { color: #f2e7c9; }
.gz-box.raid.won { border-color: #1f7a4d; } .gz-box.raid.lost { border-color: #c81e2b; }
.gz-box .rbar { background: rgba(255,45,154,.3); }
.gz-box.poll p { margin: 2px 0 6px; font-weight: 700; } .gz-box.poll .row2 button { padding: 10px; border-radius: 10px; border: 1px solid #1d1a14; background: #fff; color: #1d1a14; font-weight: 800; white-space: normal; }
.gz-box.poll .row2 button.on { background: #1d1a14; color: #ffd23f; } .gz-box .ep { margin-top: 6px; }
.gz-fest { padding: 10px; border-radius: 8px; background: linear-gradient(90deg, #c81e2b, #ff5a5a); color: #fff; font-family: system-ui, sans-serif; } .gz-fest b { display: block; } .gz-fest small { font-size: 12px; }
.gz-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; font-family: system-ui, sans-serif; } .gz-filter::-webkit-scrollbar { display: none; }
.gz-filter button { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1px solid #1d1a14; background: transparent; color: #1d1a14; font-weight: 800; font-size: 12px; } .gz-filter button.on { background: #1d1a14; color: #e9e1cf; }
.gz-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-family: system-ui, sans-serif; }
.gz-ad { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px dashed rgba(0,0,0,.45); border-radius: 4px; background: rgba(255,255,255,.55); cursor: pointer; }
.gz-ad b { font-size: 13px; line-height: 1.2; } .gz-ad small { font-size: 11px; color: #4a4333; } .gz-ad span { font-size: 11px; color: #4a4333; } .gz-ad span a { text-decoration: underline; }
.gz-ad em { font-style: normal; font-weight: 900; font-size: 14px; } .gz-ad .ac-stars i { color: rgba(0,0,0,.15); } .gz-ad .ac-stars { color: #b8860b; }
.gz-ad.eye { border: 2px solid #ff2d9a; } .gz-ad > i { font-style: normal; font-size: 10px; font-weight: 900; color: #ff2d9a; }
.gz-refresh { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-family: system-ui, sans-serif; } .gz-refresh small { flex: 1 0 100%; font-size: 11px; }
.gz-refresh button { background: #1d1a14; color: #ffd23f; }
.gz-helps li, #gazScr .notes li { background: rgba(255,255,255,.45); color: #1d1a14; font-family: system-ui, sans-serif; align-items: center; } #gazScr .notes li b { color: #1d1a14; } #gazScr .notes li.me { outline: 2px solid #1d1a14; }
#gazScr .notes li span { flex: 1; }
.gz-col { display: flex; gap: 10px; align-items: flex-start; border-top: 3px double #1d1a14; padding-top: 8px; } .gz-col img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; } .gz-col p { margin: 2px 0 0; font-style: italic; font-size: 14px; }
.gaz .ic { vertical-align: -0.15em; }
/* ziyaret: akademi ekleri */
.visit-ac { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .visit-ac .big { padding: 11px 14px; } .visit-ac .big.tekir { border-color: var(--gold); } .visit-ac .big.rescue { border-color: #ff2d9a; }
.visit-ac .gz-ads { grid-template-columns: 1fr 1fr; } .visit-ac .gz-ad { background: rgba(255,255,255,.08); border-color: var(--line2); color: #fff; } .visit-ac .gz-ad em { color: var(--gold); }
/* takım: çay, derbi, muhtar, imece */
.team-ac { display: flex; flex-direction: column; gap: 8px; } .team-ac .gz-box { background: rgba(255,255,255,.07); border-color: var(--line2); font-family: inherit; } .team-ac .gz-box small { color: var(--muted); }
.team-ac .row2 button { padding: 10px; border-radius: 12px; border: 0; background: var(--gold); color: #2a1600; font-weight: 900; font-size: 13px; }
.im-need { display: flex; flex-wrap: wrap; gap: 6px; } .im-need button { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.12); color: #fff; }

/* ana menü kısa ekran: sıkıştır, gerekirse kaydır */
#title.compact .menu { gap: 7px; } #title.compact .big { padding: 9px 14px; } #title.compact .big.primary { padding: 12px 16px; } #title.compact .big.primary span { font-size: 20px; }
#title.compact .big small { font-size: 11px; } #title.compact .season-card, #title.compact .quest-card { padding-top: 7px; padding-bottom: 7px; } #title.compact .row2 { gap: 7px; } #title.compact .raid-card { padding: 9px 14px; margin-top: 0; }
#title.compact .logo.small .logo-main span { font-size: clamp(30px, 8.5vw, 52px); }
#title.scroll .menu { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding-bottom: 8px; scrollbar-width: none; } #title.scroll .menu::-webkit-scrollbar { display: none; }

/* Hoca'nın malzeme görevleri */
.mq { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, rgba(61, 220, 132, .16), rgba(255,255,255,.03)); border: 1px solid rgba(61, 220, 132, .45); }
.mq-h { display: flex; gap: 10px; align-items: center; } .mq-h img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); } .mq-h b { display: block; font-size: 15px; } .mq-h small { color: var(--muted); font-size: 11px; }
.mq-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; background: rgba(255,255,255,.06); } .mq-row span { flex: 1; display: flex; flex-direction: column; } .mq-row span b { font-size: 13px; } .mq-row span small { color: var(--muted); font-size: 11px; }
.mq-row > i { flex: 0 0 64px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; } .mq-row > i em { display: block; height: 100%; background: #3ddc84; }
.mq-row button { padding: 7px 10px; border-radius: 10px; border: 0; background: var(--gold); color: #2a1600; font-weight: 900; font-size: 12px; animation: glow 1.4s infinite; } .mq-row > em { font-style: normal; font-size: 12px; color: #9ff5c6; font-weight: 800; } .mq-row.got { opacity: .55; }
.ac-btn.ready small { color: #9ff5c6; font-weight: 800; }

/* renkli malzeme görselleri */
.mi { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -0.35em; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.mat { grid-template-columns: 42px 1fr; }
.ac-acts .big span .mi { width: 24px; height: 24px; }
/* eksik malzeme penceresi */
#acModal.miss .ac-modal { background: radial-gradient(ellipse at 50% 0%, rgba(61, 220, 132, .28), transparent 60%), linear-gradient(180deg, #1d3a5c, #0e1a33); border: 2px solid rgba(255, 210, 63, .55); box-shadow: 0 0 0 4px rgba(255,210,63,.12), 0 20px 50px rgba(0,0,0,.5); }
.miss-head { display: flex; gap: 12px; align-items: center; margin: 0 34px 12px 0; }
.miss-head img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid #3ddc84; background: rgba(255,255,255,.1); animation: missBob 1.6s ease-in-out infinite; }
.miss-head b { display: block; font-size: 19px; font-style: italic; font-weight: 900; color: #ffd23f; } .miss-head small { color: #cfe3ff; font-size: 12px; line-height: 1.3; display: block; }
@keyframes missBob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.miss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.miss-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.18); animation: missPop .35s ease-out backwards; }
.miss-t:nth-child(2) { animation-delay: .07s; } .miss-t:nth-child(3) { animation-delay: .14s; } .miss-t:nth-child(4) { animation-delay: .21s; }
@keyframes missPop { from { transform: scale(.6); opacity: 0; } }
.miss-t .mi.lg { width: 52px; height: 52px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.miss-t b { font-size: 13px; } .miss-t small { font-size: 11px; color: var(--muted); font-weight: 800; }
.miss-t i { width: 100%; height: 6px; border-radius: 4px; background: rgba(255, 90, 90, .3); overflow: hidden; } .miss-t i em { display: block; height: 100%; background: linear-gradient(90deg, #3ddc84, #ffd23f); }
.miss-n { position: absolute; top: -8px; right: -4px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(180deg, #ff5a5a, #c81e2b); color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 2px 6px rgba(200, 30, 43, .5); }
.ac-acts .big.green { background: linear-gradient(180deg, #46e08f, #1f9a58); border: 0; color: #062a14; box-shadow: 0 4px 0 #136b3c; } .ac-acts .big.green span { color: #062a14; }
.ac-acts .big.paper { background: linear-gradient(180deg, #f4ecd8, #d9ccae); border: 0; color: #1d1a14; box-shadow: 0 4px 0 #9d8f6e; } .ac-acts .big.paper span, .ac-acts .big.paper .ic { color: #1d1a14; }
.ac-acts .big.ghost { background: transparent; border: 1px solid rgba(255,255,255,.2); padding: 9px; }

/* abi/abla */
.mt-box, .mt-gift { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); margin-bottom: 8px; } .mt-box small, .mt-gift small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.mt-gift { background: linear-gradient(160deg, rgba(255, 210, 63, .25), rgba(255,255,255,.05)); border: 1px solid rgba(255, 210, 63, .6); } .mt-gift b { color: var(--gold); }
.mt-gift button, .mt-kids button { align-self: flex-start; padding: 7px 11px; border-radius: 10px; border: 0; background: var(--gold); color: #2a1600; font-weight: 900; font-size: 12px; }
.mt-kids li { align-items: center; } .mt-kids li span { flex: 1; } .mt-kids em { font-style: normal; font-size: 12px; color: #9ff5c6; font-weight: 800; }
#btnMentor.ready small { color: #9ff5c6; font-weight: 800; }
#gazScr .notes li.kid { outline: 2px solid #1f7a4d; background: rgba(61, 220, 132, .25); }

/* ================= TEMA: "Oyun" (ui7) — mobil oyun arayüzü, bütün oyun =================
   Kural: kalın oyun yazısı (Lilita One) beyaz + koyu kontur; butonlar parlak iki tonlu, alt kenarı kalın "dudak" (3D),
   üstte parlama; paneller koyu kraliyet mavisi, içte açık kenar; kaynaklar büyük ikonlu kapsül; seçili şey sarı. */
body.ui7 { --gf: "Baloo 2", Rubik, system-ui, sans-serif;
  --oy: #b86a00; --ob: #10307a; --og: #126b22; --or: #7a1420; --op: #3d1a80; --oo: #8a3a06; --ot: #0a5260; --ok: #7a1450; --on: #0b1f4d; }
body.ui7 .big { --t: #4f9bff; --b: #1f56d6; --l: var(--ob);
  background: linear-gradient(180deg, var(--t) 0%, var(--t) 46%, var(--b) 54%, var(--b) 100%) !important;
  border: 3px solid var(--l) !important; border-radius: 18px; color: #fff !important;
  box-shadow: 0 6px 0 var(--l), 0 10px 16px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.15) !important; transition: transform .07s, box-shadow .07s; }
body.ui7 .big::after { content: ""; display: block; position: absolute; left: 10px; right: 10px; top: 5px; height: 34%; border-radius: 12px 12px 30px 30px; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); inset: 5px 10px auto 10px; pointer-events: none; }
body.ui7 .big:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--l), 0 3px 6px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.4) !important; }
body.ui7 .big span { font-family: var(--gf); font-weight: 400; font-style: normal; letter-spacing: .5px; color: #fff !important;
  text-shadow: -2px -2px 0 var(--l), 2px -2px 0 var(--l), -2px 2px 0 var(--l), 2px 2px 0 var(--l), 0 3px 0 var(--l) !important; position: relative; z-index: 1; }
body.ui7 .big small { color: rgba(255,255,255,.92) !important; font-weight: 800; text-shadow: 0 1px 0 var(--l); position: relative; z-index: 1; }
body.ui7 .big .ic { color: #fff !important; filter: drop-shadow(0 2px 0 var(--l)) drop-shadow(0 -1px 0 var(--l)) drop-shadow(1px 0 0 var(--l)) drop-shadow(-1px 0 0 var(--l)); }
body.ui7 .big.primary { --t: #ffe35a; --b: #ffad1a; --l: var(--oy); }
body.ui7 .big.green { --t: #6ef07a; --b: #26b043; --l: var(--og); } body.ui7 .big.paper { --t: #fff3d6; --b: #e8d5a8; --l: #8a7442; } body.ui7 .big.ghost { --t: #3a4f86; --b: #263868; --l: var(--on); }
body.ui7 .big:disabled { filter: grayscale(.6) brightness(.85); }
/* ana menü: simge karosu solda */
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big { justify-content: center; min-height: 66px; padding: 12px 14px 12px 72px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big::before { content: ""; position: absolute; left: 10px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 14px; background: rgba(0,0,0,.2); box-shadow: inset 0 3px 0 rgba(0,0,0,.2), 0 2px 0 rgba(255,255,255,.35); z-index: 1; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big > span { position: static; font-size: 22px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big > span .ic { position: absolute; left: 20px; top: 50%; width: 30px; height: 30px; margin-top: -15px; z-index: 2; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big { padding-left: 58px; min-height: 64px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big::before { width: 40px; height: 40px; margin-top: -20px; left: 9px; border-radius: 12px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big > span { font-size: 16px; line-height: 1.05; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big > span .ic { left: 17px; width: 24px; height: 24px; margin-top: -12px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big small { font-size: 11px; }
/* renkler */
body.ui7 #title #btnCareer { min-height: 84px; } body.ui7 #title #btnCareer > span { font-size: 32px !important; letter-spacing: 1px; }
body.ui7 #title #btnCareer::before { width: 58px; height: 58px; margin-top: -29px; } body.ui7 #title #btnCareer > span .ic { left: 22px; width: 36px; height: 36px; margin-top: -18px; } body.ui7 #title #btnCareer { padding-left: 82px; }
body.ui7 #title :is(#btnDaily, #btnSocial, #btnDuel) { --t: #4f9bff; --b: #1f56d6; --l: var(--ob); }
body.ui7 #title :is(#btnPractice, #btnHood, #btnMentor) { --t: #6ef07a; --b: #26b043; --l: var(--og); }
body.ui7 #title :is(#btnPenalty, #btnFriends) { --t: #ff7272; --b: #e0303f; --l: var(--or); }
body.ui7 #title :is(#btnLessons, #btnShareHood, #btnInvite) { --t: #c28cff; --b: #8448e8; --l: var(--op); }
body.ui7 #title :is(#btnAlbum, #btnKahve) { --t: #ffb85c; --b: #f2741c; --l: var(--oo); }
body.ui7 #title :is(#btnAcademy, #btnTea) { --t: #4fe6d6; --b: #14a3b8; --l: var(--ot); }
body.ui7 #title :is(#btnRich) { --t: #ffe35a; --b: #ffad1a; --l: var(--oy); }
body.ui7 #title :is(#btnGazette) { --t: #fff3d6; --b: #e8d5a8; --l: #8a7442; } body.ui7 #title #btnGazette small { color: #fff !important; }
body.ui7 #title :is(#btnTeam) { --t: #ff8fd0; --b: #d6338f; --l: var(--ok); }
body.ui7 #title #btnHood { min-height: 88px; padding-left: 84px; } body.ui7 #title #btnHood > span { font-size: 32px !important; }
body.ui7 #title #btnHood::before { width: 60px; height: 60px; margin-top: -30px; } body.ui7 #title #btnHood > span .ic { left: 23px; width: 36px; height: 36px; margin-top: -18px; }
body.ui7 #title #btnAlbum { justify-content: space-between !important; min-height: 56px; flex-direction: row; align-items: center; }
body.ui7 #title #btnAlbum::before { width: 38px; height: 38px; margin-top: -19px; } body.ui7 #title #btnAlbum > span .ic { left: 17px; width: 24px; height: 24px; margin-top: -12px; }
body.ui7 #title .hood-ready { color: #fff36b !important; }
body.ui7 #title :is(#btnAcademy.ready, #btnMentor.ready)::before { animation: ui7pulse 1.2s ease-in-out infinite; }
@keyframes ui7pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 243, 107, .9), inset 0 3px 0 rgba(0,0,0,.2); } }
/* günlük görevler ve baskın */
body.ui7 #title .quest-card { background: linear-gradient(180deg, #4fe6d6 0 46%, #14a3b8 54%) !important; border: 3px solid var(--ot) !important; border-radius: 18px; box-shadow: 0 6px 0 var(--ot), 0 10px 16px rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.45); color: #fff; }
body.ui7 #title .quest-card b { font-family: var(--gf); font-weight: 400; font-size: 18px; text-shadow: -2px -2px 0 var(--ot), 2px -2px 0 var(--ot), -2px 2px 0 var(--ot), 2px 2px 0 var(--ot), 0 3px 0 var(--ot); }
body.ui7 #title .quest-card .ic { color: #fff; width: 30px; height: 30px; filter: drop-shadow(0 2px 0 var(--ot)); } body.ui7 #title .quest-card small, body.ui7 #title .quest-card em { color: #fff; font-weight: 800; }
body.ui7 #title .raid-card { background: linear-gradient(180deg, #ff7272 0 46%, #e0303f 54%); border: 3px solid var(--or); border-radius: 18px; box-shadow: 0 6px 0 var(--or), inset 0 3px 0 rgba(255,255,255,.4); }
body.ui7 #title .raid-card b { font-family: var(--gf); font-weight: 400; font-style: normal; font-size: 20px; text-shadow: -2px -2px 0 var(--or), 2px -2px 0 var(--or), -2px 2px 0 var(--or), 2px 2px 0 var(--or); }
/* sezon kartı ve etkinlik */
body.ui7 #title .season-card { border: 3px solid var(--on) !important; box-shadow: 0 6px 0 var(--on), inset 0 2px 0 rgba(255,255,255,.2) !important; border-radius: 18px; }
body.ui7 #title .season-card .sc-name { font-family: var(--gf); font-weight: 400; font-style: normal; font-size: 18px; }
body.ui7 #title .event-chip { border: 3px solid var(--on) !important; box-shadow: 0 4px 0 var(--on); border-radius: 16px; }
body.ui7 .reis-tip { border: 3px solid var(--on); box-shadow: 0 5px 0 var(--on); border-radius: 18px; }
/* kaynaklar: büyük ikonlu kapsül */
body.ui7 #wallet { gap: 12px; }
body.ui7 .cur { position: relative; padding: 4px 12px 4px 30px; min-width: 96px; justify-content: center; background: linear-gradient(180deg, #0b1633, #18264d); border: 3px solid #050b1c; border-radius: 12px; box-shadow: inset 0 3px 0 rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.12); }
body.ui7 .cur .ic { position: absolute; left: -14px; top: 50%; width: 36px; height: 36px; margin-top: -18px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
body.ui7 .cur b { font-family: var(--gf); font-weight: 400; font-size: 18px; color: #fff; text-shadow: 0 2px 0 #000; }
body.ui7 .cur .plus { border-radius: 8px; border: 2px solid var(--og); background: linear-gradient(180deg, #6ef07a 0 50%, #26b043 50%); color: #fff; font-family: var(--gf); text-shadow: 0 1px 0 var(--og); box-shadow: 0 2px 0 var(--og); }
/* simge düğmeleri, geri */
body.ui7 :is(.icon-btn, .back) { background: linear-gradient(180deg, #4f9bff 0 46%, #1f56d6 54%) !important; border: 3px solid var(--ob) !important; border-radius: 14px; box-shadow: 0 4px 0 var(--ob), inset 0 2px 0 rgba(255,255,255,.45) !important; color: #fff !important; }
body.ui7 .icon-btn .ic { color: #fff; filter: drop-shadow(0 2px 0 var(--ob)); } body.ui7 .back { font-family: var(--gf); font-size: 26px; text-shadow: 0 2px 0 var(--ob); }
body.ui7 :is(.icon-btn, .back):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ob) !important; }
/* başlıklar */
body.ui7 .bar h2 { font-family: var(--gf); font-weight: 400; font-style: normal; font-size: 28px; letter-spacing: .5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: -2px -2px 0 var(--on), 2px -2px 0 var(--on), -2px 2px 0 var(--on), 2px 2px 0 var(--on), 0 4px 0 var(--on); }
body.ui7 :is(.sec-h, .ac-info span, .card h2, .card h3, .ac-modal h3, .miss-head b) { font-family: var(--gf); font-weight: 400; font-style: normal; letter-spacing: .4px; color: #5ef2ff; text-shadow: 0 2px 0 var(--on); }
/* alt menü: büyük kare düğmeler, seçili sarı */
body.ui7 .main-tabs { background: linear-gradient(180deg, #1c3b8f, #0e2259); border-top: 3px solid var(--on); padding-top: 8px; }
body.ui7 .main-tabs button { margin: 0 4px; border-radius: 14px; border: 3px solid var(--on); background: linear-gradient(180deg, #3d6fe0 0 46%, #2550c2 54%); box-shadow: 0 4px 0 var(--on), inset 0 2px 0 rgba(255,255,255,.3); color: #fff; }
body.ui7 .main-tabs button span { font-family: var(--gf); font-weight: 400; font-size: 13px; text-shadow: 0 2px 0 var(--on); }
body.ui7 .main-tabs button .ic { filter: drop-shadow(0 2px 0 var(--on)); }
body.ui7 .main-tabs button.on { background: linear-gradient(180deg, #ffe35a 0 46%, #ffad1a 54%); border-color: var(--oy); box-shadow: 0 4px 0 var(--oy), inset 0 2px 0 rgba(255,255,255,.5); color: #fff; transform: translateY(-4px); }
body.ui7 .main-tabs button.on span, body.ui7 .main-tabs button.on .ic { text-shadow: 0 2px 0 var(--oy); filter: drop-shadow(0 2px 0 var(--oy)); }
/* paneller: pencereler ve kutular */
body.ui7 .card { background: linear-gradient(180deg, #2a5ad0, #163a96) !important; border: 4px solid var(--on) !important; border-radius: 24px; box-shadow: 0 8px 0 var(--on), inset 0 0 0 2px rgba(255,255,255,.2), 0 20px 40px rgba(0,0,0,.5) !important; }
body.ui7 :is(.ac-card, .order, .st, .mat, .hood-card, .quest, .item, .offer, .offer-card, .alb, .set, .mq, .mq-row, .tr-row, .miss-t, .chapter, .mission, .tier, .lg-row, .rank-row, .shop-reis, .fair-strip, .hood-info, .mt-box, .team-ac .gz-box, .visit-ac .gz-ad) {
  background: linear-gradient(180deg, #13306f, #0d2152) !important; border: 3px solid #050f2e !important; border-radius: 16px !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.35) !important; }
body.ui7 :is(.ac-card.sq, .hood-card.on, .st.cur, .order:not(.done)) { border-color: #ffb21a !important; }
body.ui7 .notes li { background: linear-gradient(180deg, #13306f, #0d2152); border: 2px solid #050f2e; }
body.ui7 :is(.ac-busy, .tr-row, .mat, .order, .stad, .mq-row) button, body.ui7 :is(.notes li, .gz-box, .gz-refresh, .im-need, .mt-gift, .mt-kids, .team-ac .row2) button, body.ui7 .buy {
  font-family: var(--gf); font-weight: 400 !important; letter-spacing: .3px; border: 2px solid var(--oy) !important; border-radius: 10px !important; background: linear-gradient(180deg, #ffe35a 0 50%, #ffad1a 50%) !important; color: #fff !important; text-shadow: 0 1px 0 var(--oy), 1px 0 0 var(--oy), -1px 0 0 var(--oy), 0 -1px 0 var(--oy); box-shadow: 0 3px 0 var(--oy) !important; }
body.ui7 .tog { border: 3px solid var(--on); } body.ui7 .tog.on { background: linear-gradient(180deg, #6ef07a, #26b043); }
/* sekme çipleri */
body.ui7 :is(.tabs, .ac-tabs, .hood-tabs, .sus-chips) button { font-family: var(--gf); font-weight: 400; font-size: 14px; letter-spacing: .3px; color: #fff !important; border: 3px solid var(--on) !important; border-radius: 12px;
  background: linear-gradient(180deg, #3d6fe0 0 50%, #2550c2 50%) !important; box-shadow: 0 3px 0 var(--on); text-shadow: 0 2px 0 var(--on); }
body.ui7 :is(.tabs, .ac-tabs, .hood-tabs, .sus-chips) button.on { background: linear-gradient(180deg, #ffe35a 0 50%, #ffad1a 50%) !important; border-color: var(--oy) !important; box-shadow: 0 3px 0 var(--oy); text-shadow: 0 2px 0 var(--oy); }
/* ekran arka planları: gökyüzü mavisinden sahaya */
body.ui7 :is(#acadScr, #teamScr, #shop, #settings, #seasonScr, #duelScr) { background: linear-gradient(180deg, #4d8fe8 0%, #2a5ad0 35%, #1a7a3a 100%) !important; }
body.ui7 .ac-modal .mx { background: linear-gradient(180deg, #ff7272 0 50%, #e0303f 50%); border: 3px solid var(--or); color: #fff; font-family: var(--gf); box-shadow: 0 3px 0 var(--or); }
body.ui7 .ac-ap b { font-family: var(--gf); font-weight: 400; }
body.ui7.ui7 #title.compact :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big { min-height: 54px; padding-top: 8px; padding-bottom: 8px; }
body.ui7 #title.compact #btnCareer { min-height: 66px; } body.ui7 #title.compact #btnHood { min-height: 72px; }
body.ui7 .big::after { z-index: 0; opacity: .8; } body.ui7 .big > span, body.ui7 .big > small { z-index: 2; } body.ui7 #title .big > span .ic { z-index: 3; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big::before { background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.22)); box-shadow: inset 0 3px 0 rgba(0,0,0,.25), 0 2px 0 rgba(255,255,255,.4); }

/* ---------- Oyun teması: Türkçe destekli gömülü oyun yazı tipi ve zengin butonlar ---------- */
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(fonts/baloo2-800-latin-ext.woff) format("woff");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(fonts/baloo2-800-latin.woff) format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body.ui7 :is(.big span, .bar h2, .sec-h, .ac-info span, .card h2, .card h3, .ac-modal h3, .miss-head b, .main-tabs button span, .cur b, .quest-card b, .raid-card b, .season-card .sc-name, .ac-ap b,
  .tabs button, .ac-tabs button, .hood-tabs button, .sus-chips button, .buy, .notes li button, .mq-row button, .order button, .stad button, .tr-row button) { font-family: var(--gf) !important; font-weight: 800 !important; }
/* buton: çift çerçeve (koyu dış + açık iç), çapraz çizgi dokusu, üstte parlak kubbe, kalın alt dudak */
body.ui7 .big {
  background:
    radial-gradient(130% 70% at 50% -18%, rgba(255,255,255,.6), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 9px, rgba(255,255,255,0) 9px 18px),
    linear-gradient(180deg, var(--t) 0%, var(--b) 100%) !important;
  border: 3px solid var(--l) !important; border-radius: 20px;
  box-shadow: 0 7px 0 var(--l), 0 13px 18px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.38), inset 0 -7px 0 rgba(0,0,0,.16) !important;
}
body.ui7 .big::after { display: none; }
body.ui7 .big span { letter-spacing: .3px; line-height: 1;
  text-shadow: 0 0 0 var(--l), -3px 0 0 var(--l), 3px 0 0 var(--l), 0 -3px 0 var(--l), 0 3px 0 var(--l), -2px -2px 0 var(--l), 2px -2px 0 var(--l), -2px 2px 0 var(--l), 2px 2px 0 var(--l), 0 5px 0 var(--l) !important; }
body.ui7 .big small { font-size: 12.5px; text-shadow: 0 1px 0 var(--l), 1px 0 0 var(--l), -1px 0 0 var(--l), 0 -1px 0 var(--l) !important; }
/* ana menü: beyaz yuvarlak simge rozeti (renkli simge), sağda ok rozeti */
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big { padding-right: 46px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big::before {
  border-radius: 50% !important; background: radial-gradient(circle at 35% 28%, #ffffff 0%, #eef3fb 45%, #c8d5ea 100%) !important;
  border: 3px solid var(--l); box-shadow: 0 4px 0 var(--l), inset 0 -4px 0 rgba(0,0,0,.08) !important; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big > span .ic { color: var(--b) !important; filter: none !important; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big::after {
  content: "›"; display: grid; place-items: center; position: absolute; inset: auto; right: 10px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: rgba(0,0,0,.22); box-shadow: inset 0 2px 0 rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4); color: #fff; font: 800 22px/1 var(--gf); padding-bottom: 3px; text-shadow: 0 2px 0 var(--l); opacity: 1; z-index: 2; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big { padding-right: 12px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big::after { display: none; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .big > span { font-size: 24px; }
body.ui7 #title :is([data-pane="play"], [data-pane="hood"], [data-pane="social"]) .row2 .big > span { font-size: 17px; }
body.ui7 #title #btnCareer > span, body.ui7 #title #btnHood > span { font-size: 34px !important; }
body.ui7 #title #btnAlbum::after { display: none; } body.ui7 #title #btnAlbum { padding-right: 14px; }
/* kariyer: köşede "OYNA" rozeti */
body.ui7 #title #btnCareer small::after { content: ""; }
/* üst çubuk sayıları ve alt menü yazısı biraz büyüsün */
body.ui7 .cur b { font-size: 19px; } body.ui7 .main-tabs button span { font-size: 14px; }
/* hazır bildirimi: yanıp sönme yok; köşede kırmızı "!" rozeti, hafifçe zıplar */
body.ui7 #title :is(#btnAcademy.ready, #btnMentor.ready)::before { animation: none !important; }
body.ui7 #title .row2 :is(#btnAcademy.ready, #btnMentor.ready)::after {
  content: "!"; display: grid !important; place-items: center; position: absolute; inset: auto; top: -10px; right: -8px; width: 28px; height: 28px; margin: 0; border-radius: 50%;
  background: linear-gradient(180deg, #ff6b6b 0 50%, #e0263a 50%); border: 3px solid #fff; box-shadow: 0 3px 0 #7a1420, 0 4px 8px rgba(0,0,0,.35);
  color: #fff; font: 800 18px/1 var(--gf); padding-top: 2px; text-shadow: 0 2px 0 #7a1420; z-index: 5; animation: ui7badge 1.6s ease-in-out infinite; }
@keyframes ui7badge { 0%, 70%, 100% { transform: translateY(0) scale(1); } 80% { transform: translateY(-5px) scale(1.08); } 90% { transform: translateY(0) scale(.96); } }
body.ui7 #title .row2 .big { overflow: visible; }
body.ui7 #title .quest-card.ready { animation: none; }
body.ui7 #title .quest-card.ready::after { content: "!"; position: absolute; top: -10px; right: -8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(180deg, #ff6b6b 0 50%, #e0263a 50%); border: 3px solid #fff; box-shadow: 0 3px 0 #7a1420; color: #fff; font: 800 18px/1 var(--gf); padding-top: 2px; text-shadow: 0 2px 0 #7a1420; animation: ui7badge 1.6s ease-in-out infinite; }
body.ui7 #title .quest-card { position: relative; overflow: visible; }
body.ui7 #title #btnHood { padding: 14px 46px 14px 86px !important; }
body.ui7 #title #btnGazette { --t: #ffe7b0; --b: #e0ad55; --l: #6e4a14; } body.ui7 #title #btnGazette small { color: #fff !important; }
/* açma/kapama: kalın çerçeveyle yuvarlak ortada kalsın */
body.ui7 .tog { box-sizing: border-box; width: 58px; height: 34px; border-radius: 17px; background: linear-gradient(180deg, #2a3a66, #1c2a52); box-shadow: inset 0 3px 0 rgba(0,0,0,.35); }
body.ui7 .tog::after { top: 2px; left: 2px; width: 24px; height: 24px; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
body.ui7 .tog.on::after { left: 26px; }
/* mahalle eşya kartı görseli */
.hood-card.has-img { padding-top: 6px; }
.hood-card .hc-img { display: block; width: 100%; height: 74px; object-fit: contain; border-radius: 12px; margin-bottom: 2px; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse at 50% 85%, rgba(111, 143, 74, .55), rgba(111, 143, 74, 0) 70%), radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%); }
.hood-card .hc-img.on { opacity: 1; }
.hood-card.has-img > small:not(.perk) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Kale Kale ---------- */
.room-mode { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px; border-radius: 16px; text-align: left; color: #fff; border: 3px solid #0b1f4d;
  background: linear-gradient(180deg, #2fd0a0 0 50%, #14a37a 50%); box-shadow: 0 5px 0 #064a38; margin: 6px 0; }
.room-mode b { font-family: var(--gf, Rubik); font-weight: 800; font-size: 18px; text-shadow: 0 2px 0 #064a38; } .room-mode small { font-weight: 700; opacity: .9; }
.room-mode:disabled { opacity: .9; }
.kale-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kt { padding: 10px; border-radius: 16px; border: 3px solid #0b1f4d; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.kt h4 { margin: 0 0 2px; text-align: center; font-family: var(--gf, Rubik); font-weight: 800; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.kt-A { background: linear-gradient(180deg, rgba(255, 210, 63, .35), rgba(14, 22, 52, .9)); } .kt-B { background: linear-gradient(180deg, rgba(79, 155, 255, .4), rgba(14, 22, 52, .9)); }
.kt .room-p { padding: 6px 8px; } .kt > small { text-align: center; opacity: .6; }
.kale-bar { position: absolute; left: 50%; top: calc(var(--safe-t) + 66px); transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 12px 9px; border-radius: 16px;
  background: linear-gradient(180deg, #13306f, #0d2152); border: 3px solid #050f2e; box-shadow: 0 4px 0 #050f2e; color: #fff; font-family: var(--gf, Rubik); font-weight: 800; overflow: hidden; }
.kale-bar b { font-size: 24px; min-width: 64px; text-align: center; } .kale-bar em { font-style: normal; font-size: 14px; color: #5ef2ff; margin-left: 4px; }
.kb-t { padding: 2px 8px; border-radius: 8px; font-size: 12px; } .kb-A { background: #ffad1a; color: #3a2600; } .kb-B { background: #2b6fe0; }
.kb-t.on { box-shadow: 0 0 0 2px #fff; }
.kale-bar i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p); background: #ff6262; transition: width .25s linear; }
#hud.kale .objectives, #hud.kale #hudShots { display: none; }
.kale-def { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 18px); z-index: 6; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 20px;
  background: linear-gradient(180deg, #2a5ad0, #163a96); border: 3px solid #0b1f4d; box-shadow: 0 6px 0 #0b1f4d; pointer-events: auto; }
.kale-def b { text-align: center; color: #fff; font-family: var(--gf, Rubik); font-weight: 800; font-size: 18px; text-shadow: 0 2px 0 #0b1f4d; }
.kale-def label { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; color: #5ef2ff; font-weight: 900; font-size: 13px; }
.kale-def input[type=range] { width: 100%; height: 36px; accent-color: #ffd23f; }
.kale-final { display: block; font-size: 20px; margin-top: 4px; }
body.ui7 #title #btnKale { --t: #ff7272; --b: #e0303f; --l: var(--or); }