:root{
  --bg-deep:#050608;
  --bg-rail:#07090C;
  --bg-side:#0A0C10;
  --bg-surface:#0E1218;
  --bg-elevated:#141A22;
  --bg-card:#10151C;
  --bg-hover:#1A222C;
  --line:#ffffff12;
  --text:#F3F5F7;
  --text-muted:#8B939E;
  --text-faint:#5A636E;
  --accent:#FF4D24;
  --accent-hover:#E03510;
  --accent-dim:#FF4D2428;
  --accent-2:#3DFF9A;
  --accent-2-dim:#3DFF9A2E;
  --pink:#FF3D8A;
  --gold:#C8D0DC;
  --danger:#FF4D5E;
  --danger-dim:#FF4D5E22;
  --radius-lg:12px;
  --radius-md:10px;
  --radius-sm:8px;
  --font-display:'Unbounded', sans-serif;
  --font-body:'Manrope', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --shadow:0 8px 24px #00000066;
  --ease:cubic-bezier(.22,.8,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow-x:hidden; max-width:100%;}
body{
  background:var(--bg-deep);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  background-image:url('pardy-texture.png');
  background-size:420px;
  background-blend-mode:soft-light;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#1A1B1E; border-radius:8px;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.hidden{display:none !important;}

/* ===== DISCORD SHELL ===== */
.app{
  display:grid;
  grid-template-columns:72px 248px 1fr 312px;
  height:100vh;
  background:var(--bg-deep);
  max-width:100%;
  /* overflow-x burada olmamalı — mobilde sabit kanal menüsünü ve tıklamaları kırıyor */
}
.app.no-right{grid-template-columns:72px 248px 1fr;}

.server-rail{
  background:var(--bg-rail);
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:8px; z-index:2;
}
.rail-logo{
  width:48px; height:48px; border-radius:16px;
  background:linear-gradient(145deg,#5865F2,#9B59B6);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:18px; color:#fff;
  transition:border-radius .2s var(--ease), transform .15s;
  position:relative;
}
.rail-logo::after{
  content:''; position:absolute; inset:-3px; border-radius:18px;
  border:2px solid transparent;
  transition:border-color .2s;
}
.rail-logo:hover{border-radius:14px; transform:translateY(-1px);}
.rail-logo:hover::after{border-color:var(--accent);}
.rail-divider{width:32px; height:2px; background:var(--line); border-radius:1px; margin:4px 0;}
.rail-icon{
  width:48px; height:48px; border-radius:50%;
  background:var(--bg-surface); color:var(--text-muted);
  display:grid; place-items:center; font-size:18px; position:relative;
  transition:border-radius .2s var(--ease), background .15s, color .15s;
}
.rail-icon::before{
  content:''; position:absolute; left:-16px; width:4px; height:0;
  background:#fff; border-radius:0 4px 4px 0; transition:height .2s var(--ease);
}
.rail-icon:hover,.rail-icon.active{border-radius:16px; background:var(--accent); color:#fff;}
.rail-icon:hover::before{height:20px;}
.rail-icon.active::before{height:40px;}
.rail-add{
  width:48px; height:48px; border-radius:50%;
  background:var(--bg-surface); color:var(--accent-2);
  display:grid; place-items:center; font-size:26px;
  transition:border-radius .2s, background .15s, color .15s;
}
.rail-add:hover{border-radius:16px; background:var(--accent-2); color:#fff;}

.channel-sidebar{
  background:var(--bg-side);
  display:flex; flex-direction:column;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.channel-sidebar__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:#0a0c12;
  background-image:url('psport-arena.jpg'); /* fallback; inline style ezer */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.04);
  filter:saturate(.55) brightness(.45);
}
.channel-sidebar__bg::after{
  content:'';position:absolute; inset:0;
  /* Demodaki gibi koyu örtü — yazı okunaklı kalsın */
  background:
    linear-gradient(180deg, #07090Ff2 0%, #07090Ee8 42%, #07090Ff6 100%),
    radial-gradient(480px 260px at 20% 0%, #FF5C3914, transparent 62%);
}
.channel-sidebar > *:not(.channel-sidebar__bg){ position:relative; z-index:1; }
.server-header{
  padding:14px 14px 12px;
  box-shadow:0 1px 0 #ffffff0c;
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  background:linear-gradient(180deg, #00000055, #00000022);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.server-header h1{font-family:var(--font-display); font-size:13px; font-weight:800;}
.server-boost{display:block; font-size:10px; color:var(--gold); margin-top:3px; font-weight:600;}
.server-header .chev{color:var(--text-faint); font-size:11px; margin-top:2px;}
.channel-list{flex:1; overflow-y:auto; padding:10px 8px 16px;}
.group-label{
  font-size:11px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.02em;
  padding:14px 8px 4px;
  display:flex; align-items:center; justify-content:space-between;
}
.channel-item{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; margin:1px 0; border-radius:6px;
  color:var(--text-faint); font-size:15px; font-weight:500;
  transition:background .12s, color .12s;
}
.channel-item:hover{background:#ffffff10; color:var(--text-muted);}
.channel-item.active{background:#252A38; color:var(--text); box-shadow:inset 0 0 0 1px #ffffff0A;}
.channel-item .hash{width:16px; text-align:center; opacity:.7;}
.channel-item .game-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.channel-item .count{margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--text-faint); background:var(--bg-deep); padding:1px 6px; border-radius:8px;}
.ch-badge{
  margin-left:auto; font-size:9px; font-weight:800; text-transform:uppercase;
  background:var(--danger); color:#fff; padding:2px 5px; border-radius:4px;
}
.ch-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#B8F5D4; background:#3DDC9722;
  box-shadow:inset 0 0 0 1px #3DDC9766, 0 0 12px #3DDC9722;
  padding:3px 7px; border-radius:999px;
}
.ch-live i{
  width:6px; height:6px; border-radius:50%; background:var(--accent-2);
  box-shadow:0 0 0 0 #3DDC9788; animation:ping 1.5s ease infinite; display:block;
}
.voice-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; margin:2px 0; border-radius:6px; color:var(--text-faint);
}
.voice-row.live{background:#233528; color:#3BA55D;}
.voice-icon{font-size:14px;}
.voice-name{font-size:14px; font-weight:600;}
.voice-meta{font-size:11px; opacity:.75;}
.voice-live{
  margin-left:auto; font-size:9px; font-weight:800;
  background:#23A559; color:#fff; padding:2px 6px; border-radius:4px;
  animation:blink 1.6s ease infinite;
}
@keyframes blink{50%{opacity:.55}}

.user-panel{
  padding:10px;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, #00000066, #00000088);
  border-top:1px solid #ffffff12;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.user-avatar{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-weight:700; font-size:12px; color:#111;
  position:relative;
}
.status-pip{
  position:absolute; right:-1px; bottom:-1px;
  width:11px; height:11px; border-radius:50%;
  border:2.5px solid #0c0e14;
}
.status-pip.online{background:var(--accent-2);}
.user-meta{flex:1; min-width:0;}
.user-meta .name{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-meta .status{font-size:11px; color:var(--text-faint);}
.user-panel .gear{
  width:32px; height:32px; border-radius:6px;
  display:grid; place-items:center; color:var(--text-muted); flex-shrink:0;
}
.user-panel .gear:hover{background:var(--bg-elevated); color:var(--text);}
.guest-actions{display:flex; gap:6px; width:100%;}
.guest-actions a{flex:1; text-align:center;}

.content{display:flex; flex-direction:column; min-width:0; background:var(--bg-surface); max-width:100%; overflow-x:hidden;}
.topbar{
  height:48px; flex-shrink:0;
  display:flex; align-items:center; gap:10px; padding:0 16px;
  box-shadow:0 1px 0 #1a1b1e, 0 2px 6px #00000022;
  background:var(--bg-surface); position:relative; z-index:1500;
}
.topbar .hash{color:var(--text-faint); font-size:20px; font-weight:700;}
.topbar h2{font-size:15px; font-weight:700;}
.topbar .sub{color:var(--text-faint); font-size:13px; padding-left:12px; border-left:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar-tools{margin-left:auto; display:flex; align-items:center; gap:6px;}
.search{
  background:var(--bg-rail); border:none; border-radius:4px;
  padding:6px 10px; font-size:13px; color:var(--text-muted); width:180px;
}
.search:focus{outline:none; box-shadow:0 0 0 2px var(--accent-dim); color:var(--text); width:220px;}
.icon-btn{
  width:32px; height:32px; border-radius:6px;
  display:grid; place-items:center; color:var(--text-muted); font-size:14px;
}
.icon-btn:hover{background:var(--bg-hover); color:var(--text);}
.feed{flex:1; overflow-y:auto; overflow-x:hidden; padding:18px 18px 56px; position:relative; max-width:100%;}

/* ===== BUTTONS ===== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:#fff; font-weight:650; font-size:14px;
  padding:10px 16px; border-radius:6px;
  transition:background .15s, transform .1s, box-shadow .15s;
  box-shadow:0 2px 0 #3C45C6;
}
.btn-primary:hover{background:var(--accent-hover); box-shadow:0 4px 16px var(--accent-dim);}
.btn-primary:active{transform:translateY(1px); box-shadow:0 1px 0 #3C45C6;}
.btn-primary[disabled]{opacity:.5; pointer-events:none;}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--text); font-weight:600; font-size:14px;
  padding:9px 14px; border-radius:6px; background:transparent;
  transition:background .15s, border-color .15s;
}
.btn-ghost:hover{background:var(--bg-hover); border-color:var(--text-faint);}
.btn-ghost[disabled]{opacity:.5; pointer-events:none;}
.btn-sm{padding:6px 10px; font-size:12px;}
.btn-block{width:100%;}
.btn-danger{background:var(--danger-dim); color:var(--danger); font-weight:700; font-size:12px; padding:8px 14px; border-radius:6px;}

/* ===== HOME FEED — night dispatch ===== */
.feed{ position:relative; }
.feed::before{
  content:''; pointer-events:none;
  position:absolute; inset:-20px -10px auto; height:280px; z-index:0;
  background:radial-gradient(ellipse at 18% 0%, #FF5C3920, transparent 55%),
             radial-gradient(ellipse at 82% 12%, #FF3D8A14, transparent 50%);
}
.feed > *{ position:relative; z-index:1; }

.card-spotlight{
  position:relative; overflow:hidden;
  border-radius:20px;
  min-height:280px;
  margin-bottom:20px;
  isolation:isolate;
  box-shadow:
    inset 0 0 0 1px #ffffff14,
    0 20px 48px #00000066,
    0 0 40px #FF5C3918;
}
.card-spotlight__art{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  animation:ken 22s ease-in-out infinite alternate;
  filter:saturate(1.15) brightness(.78) contrast(1.05);
}
@keyframes ken{from{transform:scale(1.04) translate(0,0)} to{transform:scale(1.12) translate(-2%,1%)}}
.card-spotlight__fx{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.sfx-noise{
  position:absolute; inset:0; opacity:.1; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:sfx-noise 1.4s steps(2) infinite;
}
.sfx-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 40%, transparent 10%, #00000099 100%);
}
.sfx-orb{
  position:absolute; border-radius:50%; filter:blur(48px); opacity:.4;
  animation:sfx-float 11s ease-in-out infinite alternate;
}
.sfx-orb--1{ width:200px; height:200px; background:#FF5C39; left:8%; top:20%; }
.sfx-orb--2{ width:160px; height:160px; background:#FF3D8A; right:12%; top:8%; animation-duration:15s; }
.sfx-scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #ffffff55, transparent);
  animation:sfx-scan 6s linear infinite; opacity:.35;
}
.sfx-spark{
  position:absolute; left:-30%; top:40%; width:40%; height:1px;
  background:linear-gradient(90deg, transparent, #FF5C39aa, transparent);
  animation:sfx-spark 8s ease-in-out infinite; opacity:0;
}
@keyframes sfx-noise{ 33%{ transform:translate(1%,-1%); } 66%{ transform:translate(-1%,1%); } }
@keyframes sfx-float{ to{ transform:translateY(-18px); } }
@keyframes sfx-scan{ from{ top:-5%; } to{ top:105%; } }
@keyframes sfx-spark{
  0%,70%,100%{ opacity:0; transform:translateX(0); }
  78%{ opacity:.7; }
  92%{ opacity:0; transform:translateX(280%); }
}
.card-spotlight__shade{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(105deg, #0B0C10F5 0%, #0B0C10D8 38%, #0B0C1055 68%, #0B0C1022 100%),
    linear-gradient(0deg, #0B0C10F0 0%, transparent 42%);
}
.card-spotlight__body{ position:relative; z-index:3; padding:28px 30px 26px; max-width:580px; }
.spotlight-brand{
  font-family:var(--font-display); font-weight:900; font-size:11px;
  letter-spacing:.22em; color:#FFB59A;
  margin-bottom:10px;
  text-shadow:0 0 20px #FF5C3988;
}
.pill-live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:#B8F5C8; background:#23A55922;
  box-shadow:inset 0 0 0 1px #23A55966, 0 0 16px #23A55922;
  padding:5px 11px; border-radius:999px; margin-bottom:14px;
}
.pill-live .pip{
  width:7px; height:7px; border-radius:50%; background:#23A559;
  box-shadow:0 0 0 0 #23A55988; animation:ping 1.5s ease infinite;
}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}}
.card-spotlight__body h3{
  font-family:var(--font-display); font-size:clamp(28px,4.2vw,42px);
  font-weight:900; letter-spacing:-.04em; margin-bottom:10px; line-height:1.05;
  text-shadow:0 4px 24px #000000aa;
}
.card-spotlight__body p{
  color:#C4C9D4; font-size:15px; line-height:1.55; margin-bottom:18px; max-width:42ch;
}
.card-spotlight__cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.btn-glow{ box-shadow:0 2px 0 color-mix(in srgb, var(--accent) 65%, #000), 0 0 24px var(--accent-dim) !important; }
.btn-glow:hover{ box-shadow:0 4px 16px var(--accent-dim), 0 0 32px var(--accent-dim) !important; }
.ip-chip{
  font-family:var(--font-mono); font-size:12px;
  background:#00000077; box-shadow:inset 0 0 0 1px #ffffff1a;
  padding:9px 13px; border-radius:8px; color:#C9CDD6;
  backdrop-filter:blur(8px);
  text-decoration:none; display:inline-flex; align-items:center;
}
a.ip-chip:hover{ color:#fff; box-shadow:inset 0 0 0 1px #5865F288; background:#5865F233; }
.spotlight-dc-hint{
  margin:10px 0 0; font-size:11px; color:#F47B7B; opacity:.9; max-width:42ch;
}
.card-spotlight__meta{
  display:flex; gap:6px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid #ffffff12;
}
.card-spotlight__meta .ms{
  min-width:88px; padding:10px 12px; border-radius:12px;
  background:linear-gradient(160deg, #ffffff0C, #00000033);
  box-shadow:inset 0 0 0 1px #ffffff10;
}
.card-spotlight__meta .ms b{ display:block; font-family:var(--font-mono); font-size:16px; color:#EEF0F6; }
.card-spotlight__meta .ms span{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }

/* Banner YouTube — aynı ölçü, oynatılabilir */
.card-spotlight__video{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; background:#0a0a0c;
}
.card-spotlight__video iframe{
  position:absolute; border:0;
  /* 16:9 cover: banner yüksekliğini bozmadan doldur */
  top:50%; left:50%;
  width:100%; height:100%;
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%) scale(1.35);
  pointer-events:auto;
}
.card-spotlight--video{
  /* sağ yarı video kontrolleri için tıklanabilir kalsın */
}
.card-spotlight--video .card-spotlight__fx{
  opacity:.35; pointer-events:none;
}
.card-spotlight--video .sfx-scan,
.card-spotlight--video .sfx-spark{ display:none; }
.card-spotlight--video .card-spotlight__shade{
  pointer-events:none;
  background:
    linear-gradient(105deg, #0B0C10F8 0%, #0B0C10EE 28%, #0B0C10AA 46%, #0B0C1044 62%, transparent 78%),
    linear-gradient(0deg, #0B0C10E8 0%, transparent 38%);
}
.card-spotlight--video .card-spotlight__body{
  pointer-events:none;
  max-width:min(520px, 58%);
}
.card-spotlight--video .card-spotlight__body a,
.card-spotlight--video .card-spotlight__body .btn-primary,
.card-spotlight--video .card-spotlight__body .btn-ghost{
  pointer-events:auto;
}
@media (max-width:720px){
  .card-spotlight--video .card-spotlight__body{ max-width:100%; }
  .card-spotlight__video iframe{ transform:translate(-50%,-50%) scale(1.55); }
}

/* ===== HOME HERO (topluluk konsepti — LFG kartlarıyla uyumlu) ===== */
.home-hero{
  position:relative; overflow:hidden; border-radius:16px;
  min-height:320px; margin-bottom:14px; isolation:isolate;
  display:flex; align-items:stretch; background:#0d1016;
  box-shadow:inset 0 0 0 1px #ffffff14, 0 10px 26px #00000055;
}
.home-hero__media{ position:absolute; inset:0; z-index:-2; background:#0b0d12; }
/* Video / görsel / YouTube sağa yaslı; sol kenarı karanlığa yumuşakça karışır. */
.home-hero__media video,
.home-hero__media img,
.home-hero__media iframe{
  position:absolute; top:0; right:0; height:100%; width:72%;
  object-fit:cover; object-position:center;
  pointer-events:none; user-select:none; border:0;
  opacity:.68; filter:brightness(.82);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 32%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 32%);
}
.home-hero__media iframe{
  width:85%; height:140%; top:50%; right:-4%;
  transform:translateY(-50%); opacity:.55; filter:brightness(.75) saturate(1.05);
}
.home-hero--video .home-hero__shade{
  background:linear-gradient(90deg, #0b0d12f5 0%, #0b0d12d8 38%, #0b0d1260 68%, #0b0d1230 100%),
             linear-gradient(0deg, #0b0d12b0 0%, transparent 50%);
}
.home-hero__shade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, #0b0d12f2 0%, #0b0d12cc 34%, #0b0d1250 62%, #0b0d1226 100%),
             linear-gradient(0deg, #0b0d12a8 0%, transparent 45%);
}
.home-hero__inner{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:12px;
  min-height:320px; padding:34px 38px; max-width:620px;
}
.home-hero__tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.18em;
  color:#FFB59A; background:color-mix(in srgb, var(--accent) 14%, #00000088); padding:4px 12px; border-radius:99px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.home-hero__title{
  font-family:var(--font-display); font-size:clamp(32px,4.8vw,52px); font-weight:900;
  line-height:1; letter-spacing:-.04em; color:#fff; text-shadow:0 4px 24px #000c;
}
.home-hero__title em{
  font-style:normal;
  background:linear-gradient(120deg, var(--accent), #FF3D8A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px #FF5C3944);
}
.home-hero__sub{
  font-size:14px; line-height:1.6; color:#e8e6f0c4; max-width:46ch; text-shadow:0 1px 10px #000a;
}
.home-hero__cta{ display:flex; flex-wrap:wrap; gap:11px; align-items:center; margin-top:4px; }
.home-hero__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.home-hero__pill{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10.5px;
  color:#e8e6f0d0; background:#00000070; padding:5px 12px; border-radius:99px;
  box-shadow:inset 0 0 0 1px #ffffff1c; backdrop-filter:blur(4px);
  text-decoration:none; transition:box-shadow .15s, background .15s;
}
a.home-hero__pill:hover{ background:#00000090; box-shadow:inset 0 0 0 1px #ffffff3a; }
.home-hero__pill i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); flex:0 0 auto; }
.home-hero__pill i.is-on{ background:#3DDC97; box-shadow:0 0 8px #3DDC97; animation:hbpip 1.5s infinite; }
.home-hero__pill i.is-off{ background:#E53429; box-shadow:none; }
.home-hero__pill i.is-live{ background:#53FC18; box-shadow:0 0 8px #53FC18; animation:hbpip 1.5s infinite; }
@keyframes hbpip{ 50%{ opacity:.35; transform:scale(.7); } }

@media (max-width:640px){
  .home-hero__media video,
  .home-hero__media img,
  .home-hero__media iframe{ width:100%; -webkit-mask-image:none; mask-image:none; }
  .home-hero__media iframe{ height:100%; top:0; right:0; transform:none; width:100%; }
}

/* Banner altı hızlı LFG kartları — görselli */
.lfg-quick{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.lfg-quick__card{
  position:relative; display:block; min-height:200px; border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; isolation:isolate; background:#0d1016;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 28%, transparent), 0 10px 26px #00000055;
  transition:transform .18s var(--ease), box-shadow .18s;
}
.lfg-quick__card:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 70%, transparent),
             0 18px 38px #00000077, 0 0 30px color-mix(in srgb, var(--gc) 22%, transparent);
}
.lfg-quick__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; margin:0; border:0; display:block;
  object-fit:cover; object-position:82% 0%;
  background-size:cover; background-position:100% 0%;
  transition:transform .5s var(--ease);
}
.lfg-quick__card:hover .lfg-quick__bg{ transform:scale(1.05); }
.lfg-quick__shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, #0b0d12f0 0%, #0b0d12c8 40%, #0b0d1238 72%, #0b0d1215 100%),
             linear-gradient(0deg, #0b0d12b0 0%, transparent 55%);
}
.lfg-quick__inner{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:7px;
  min-height:200px; padding:20px 22px;
}
.lfg-quick__tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.16em;
  color:var(--gc); background:color-mix(in srgb, var(--gc) 14%, #00000088); padding:3px 10px; border-radius:99px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent);
}
.lfg-quick__name{
  font-family:var(--font-display); font-size:24px; font-weight:800; color:#fff; line-height:1.05;
  text-shadow:0 2px 14px #000c;
}
.lfg-quick__sub{ font-size:12px; color:#e8e6f0b8; text-shadow:0 1px 8px #000a; }
.lfg-quick__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:3px; }
.lfg-quick__pill{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px;
  color:#e8e6f0d0; background:#00000070; padding:4px 10px; border-radius:99px;
  box-shadow:inset 0 0 0 1px #ffffff1c; backdrop-filter:blur(4px);
}
.lfg-quick__pill i{ width:6px; height:6px; border-radius:50%; background:var(--gc); box-shadow:0 0 8px var(--gc); }
.lfg-quick__go{
  position:absolute; right:16px; bottom:14px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:16px; color:#fff;
  background:color-mix(in srgb, var(--gc) 32%, #00000066);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 55%, transparent);
  transition:transform .18s var(--ease), background .18s;
}
.lfg-quick__card:hover .lfg-quick__go{ transform:translateX(4px); background:color-mix(in srgb, var(--gc) 55%, #000c); }
@media (max-width:640px){
  .lfg-quick{ grid-template-columns:1fr; }
  .home-hero__inner{ padding:26px 22px; min-height:280px; }
  .home-hero{ min-height:280px; }
}


/* ===== CINEMATIC VIZ ROTATOR (home) ===== */
.viz{
  position:relative; border-radius:20px; overflow:hidden;
  height:min(280px, 52vw); margin-bottom:14px;
  background:#0a0c10;
  box-shadow:0 24px 60px #00000088, inset 0 0 0 1px rgba(255,255,255,.08);
}
.viz__track{
  display:flex; height:100%; width:100%;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.viz__slide{ position:relative; flex:0 0 100%; height:100%; }
.viz__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block; transform:scale(1.02);
  transition:transform 7s ease;
}
.viz__slide.is-active img{ transform:scale(1.08); }
.viz__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, #07080Cf0 0%, #07080Ca8 32%, #07080C22 58%, transparent 78%),
    linear-gradient(0deg, #07080Ce6 0%, transparent 42%);
}
.viz__copy{
  position:absolute; left:0; bottom:0; right:0; z-index:2;
  padding:28px 28px 22px; max-width:420px;
}
.viz__label{
  font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:#FFB59A; margin-bottom:8px;
  font-family:var(--font-display);
}
.viz__copy h2{
  margin:0 0 8px; font-family:var(--font-display); font-weight:900;
  font-size:clamp(28px,4.5vw,40px); letter-spacing:-.04em; line-height:.95;
  color:#fff; text-shadow:0 6px 30px #000c;
}
.viz__copy p{
  margin:0 0 16px; font-size:14px; line-height:1.45; color:#d4cfc4;
  text-shadow:0 2px 12px #000a; max-width:32ch;
}
.viz__cta{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#fff; border:0; border-radius:11px;
  padding:11px 16px; cursor:pointer;
  font-family:var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(120deg,#FF5C39,#FF3D8A);
  box-shadow:0 12px 28px rgba(255,92,57,.4);
}
.viz__cta:hover{ filter:brightness(1.07); color:#fff; }
.viz__nav{
  position:absolute; z-index:3; right:16px; bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.viz__dots{ display:flex; gap:6px; }
.viz__dot{
  width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.28);
  transition:width .2s, background .2s, border-radius .2s;
}
.viz__dot.on{
  background:#FF5C39; box-shadow:0 0 12px #FF5C39; width:18px; border-radius:99px;
}
.viz__arrows{ display:flex; gap:6px; }
.viz__arrows button{
  width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.45); color:#fff; cursor:pointer; font-size:16px;
  backdrop-filter:blur(8px);
}
.viz__arrows button:hover{ background:rgba(255,92,57,.35); border-color:rgba(255,92,57,.5); }
.viz__rail{
  position:absolute; z-index:3; left:28px; right:120px; bottom:0; height:2px;
  background:rgba(255,255,255,.08);
}
.viz__rail i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#FF5C39,#FF3D8A);
}
@media (max-width:640px){
  .viz{ height:300px; }
  .viz__copy{ max-width:100%; padding:22px 18px 56px; }
  .viz__nav{ right:12px; bottom:14px; }
}
@media (prefers-reduced-motion:reduce){
  .viz__track{ transition:none; }
  .viz__slide img{ transition:none; }
}

/* ===== FEATURE RAIL ===== */
.feature-rail{ margin-bottom:18px; }
.feature-rail__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.feature-rail__head h4{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:13px; font-weight:800; letter-spacing:.04em;
}
.rail-mark{
  width:8px; height:8px; border-radius:2px;
  background:linear-gradient(135deg,#FF5C39,#FF3D8A);
  box-shadow:0 0 10px #FF5C3988;
}
.feature-rail__head a{ font-size:12px; color:var(--accent); font-weight:700; }

/* ---- Kick canlı yayın kartları ---- */
.kick-live{ margin-bottom:14px; }
.rail-mark--live{
  background:linear-gradient(135deg,#53FC18,#2FBF00);
  box-shadow:0 0 10px #53FC1888;
}
.kick-live__count{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-faint); font-weight:700;
}
.kick-live__logo{ flex:none; filter:drop-shadow(0 0 6px #53FC1866); }
.kick-live__track{
  display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.kick-card{
  position:relative; flex:0 0 280px; scroll-snap-align:start; overflow:hidden;
  aspect-ratio:16/10;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:12px 14px;
  background:#121612 center/cover no-repeat;
  border-radius:16px;
  box-shadow:inset 0 0 0 1px #53FC1833, 0 10px 28px #00000055;
  transition:transform .2s var(--ease), box-shadow .2s;
  text-decoration:none; isolation:isolate;
}
.kick-card:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:inset 0 0 0 1px #53FC1888, 0 14px 32px #00000077, 0 0 22px #53FC1828;
}
.kick-card__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(0deg, #070A07F5 0%, #070A07AA 38%, #070A0722 62%, #070A0755 100%),
    radial-gradient(80% 60% at 90% 0%, #53FC1822, transparent 55%);
}
.kick-card.has-thumb .kick-card__scrim{
  background:
    linear-gradient(0deg, #070A07F2 0%, #070A0788 36%, #070A0710 60%, #070A0744 100%),
    radial-gradient(70% 50% at 100% 0%, #53FC1818, transparent 50%);
}
.kick-card__brand{
  position:absolute; top:12px; right:12px; z-index:2;
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background:#0B0D0ACC; box-shadow:inset 0 0 0 1px #53FC1855, 0 0 12px #53FC1822;
  backdrop-filter:blur(6px);
}
.kick-card__topbar{
  position:relative; z-index:1; display:flex; align-items:center; gap:8px; padding-right:36px;
}
.kick-card__viewpill{
  margin-left:auto;
  font-size:11px; font-weight:700; color:#fff; font-family:var(--font-mono);
  background:#00000077; backdrop-filter:blur(6px);
  padding:4px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px #ffffff22;
}
.kick-card__bottom{ position:relative; z-index:1; display:flex; align-items:flex-end; gap:10px; }
.kick-card__avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 40px;
  background:#53FC1822 center/cover no-repeat;
  display:grid; place-items:center;
  font-size:15px; font-weight:800; color:#53FC18;
  box-shadow:0 0 0 2px #53FC18cc, 0 4px 14px #00000088;
}
.kick-card__who{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.kick-card__name{
  font-family:var(--font-display); font-size:14px; font-weight:800; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 8px #000000cc;
}
.kick-card__title{
  font-size:11.5px; color:#D5DACF; line-height:1.35; text-shadow:0 1px 6px #000000aa;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.kick-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px;
  background:#E53429EE; color:#fff; backdrop-filter:blur(4px);
  font-size:10px; font-weight:800; letter-spacing:.1em;
  box-shadow:0 2px 10px #E5342966;
}
.kick-badge__dot{
  width:6px; height:6px; border-radius:50%;
  background:#fff; box-shadow:0 0 8px #fff;
  animation:kickPulse 1.4s ease-in-out infinite;
}
@keyframes kickPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.75); } }

/* Kompakt anasayfa kartları — küçük ama kart */
.kick-live--sm{ margin:0 0 10px; }
.kick-live--sm .kick-live__track{
  display:flex; gap:8px; overflow-x:auto; padding:0 0 2px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.kick-live--sm .kick-card{
  flex:0 0 132px;
  width:132px;
  height:82px;
  aspect-ratio:auto;
  padding:7px 8px;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px #53FC1833, 0 4px 14px #00000050;
}
.kick-live--sm .kick-card:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #53FC1877, 0 8px 18px #00000066, 0 0 14px #53FC1818;
}
.kick-live--sm .kick-card__brand{ display:none; }
.kick-live--sm .kick-card__topbar{ gap:4px; padding-right:0; }
.kick-live--sm .kick-badge{
  padding:2px 6px; font-size:8px; letter-spacing:.06em; gap:3px;
}
.kick-live--sm .kick-badge__dot{ width:4px; height:4px; }
.kick-live--sm .kick-card__viewpill{
  font-size:9px; padding:2px 6px;
}
.kick-live--sm .kick-card__bottom{ gap:6px; }
.kick-live--sm .kick-card__avatar{
  width:22px; height:22px; flex:0 0 22px;
  font-size:10px;
  box-shadow:0 0 0 1.5px #53FC18cc, 0 2px 6px #00000066;
}
.kick-live--sm .kick-card__name{ font-size:11px; }
.kick-live--sm .kick-card__title{ display:none; }

@media (max-width:640px){
  .kick-card{ flex-basis:240px; }
  .kick-live--sm .kick-card{ flex-basis:118px; width:118px; height:74px; }
}

/* ===== LFG (Takım bul) ===== */
.lfg-hero{
  position:relative; overflow:hidden; border-radius:18px; margin-bottom:16px;
  padding:26px 28px; isolation:isolate;
  background:linear-gradient(150deg, color-mix(in srgb, var(--gc) 16%, #12141b), #0d0f15);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 30%, transparent), 0 16px 40px #00000055;
}
.lfg-hero__glow{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(90% 130% at 90% 10%, color-mix(in srgb, var(--gc) 34%, transparent), transparent 60%); }
.lfg-hero__body{ position:relative; z-index:1; }
.lfg-hero__kicker{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.16em;
  color:var(--gc); text-transform:uppercase; }
.lfg-hero h2{ font-family:var(--font-display); font-size:clamp(24px,4vw,34px); font-weight:900;
  letter-spacing:-.03em; margin:8px 0 6px; }
.lfg-hero p{ color:var(--text-muted); font-size:13.5px; max-width:52ch; margin-bottom:16px; }
.lfg-hero__stats{ display:flex; gap:22px; }
.lfg-hero__stats b{ font-family:var(--font-mono); font-size:22px; color:#fff; display:block; line-height:1; }
.lfg-hero__stats span{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; }

.lfg-tabs{ display:flex; gap:10px; margin-bottom:16px; }
.lfg-tab{
  display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:12px;
  text-decoration:none; color:var(--text-muted); background:var(--bg-card);
  box-shadow:inset 0 0 0 1px #ffffff10; transition:transform .15s, box-shadow .15s, color .15s;
}
.lfg-tab:hover{ transform:translateY(-2px); color:#fff; }
.lfg-tab.is-active{ color:#fff; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 70%, transparent), 0 8px 20px #00000044;
  background:linear-gradient(150deg, color-mix(in srgb, var(--gc) 18%, var(--bg-card)), var(--bg-card)); }
.lfg-tab__ico{ font-size:18px; }
.lfg-tab__name{ font-family:var(--font-display); font-weight:800; font-size:14px; }
.lfg-tab__count{ font-family:var(--font-mono); font-size:11px; background:color-mix(in srgb, var(--gc) 24%, #000);
  color:#fff; padding:2px 8px; border-radius:999px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent); }

.lfg-layout{ display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start; }
.lfg-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.lfg-filters select{
  background:var(--bg-card); color:var(--text); border:0; border-radius:10px; padding:9px 30px 9px 12px;
  font-family:var(--font-mono); font-size:12px; box-shadow:inset 0 0 0 1px #ffffff12; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a97a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.lfg-filters select option, .lfg-create select option, .lfg-rankform select option{ background:#15171e; color:var(--text); }
.lfg-filters select optgroup, .lfg-create select optgroup, .lfg-rankform select optgroup{ background:#0e1015; color:var(--text-faint); }
.lfg-clear{ align-self:center; font-size:12px; color:var(--accent); text-decoration:none; font-family:var(--font-mono); }

.lfg-list{ display:flex; flex-direction:column; gap:10px; }
.lfg-card{
  display:flex; align-items:stretch; gap:0; border-radius:14px; overflow:hidden;
  background:var(--bg-card); box-shadow:inset 0 0 0 1px #ffffff0e; transition:box-shadow .15s;
}
.lfg-card:hover{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent), 0 10px 24px #00000044; }
.lfg-card.is-full{ opacity:.62; }
.lfg-card__side{
  flex:0 0 62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--gc) 22%, #000), #0d0f15);
  box-shadow:inset -1px 0 0 color-mix(in srgb, var(--gc) 30%, transparent);
}
.lfg-card__game{ font-family:var(--font-display); font-weight:900; font-size:13px; color:var(--gc); }
.lfg-card__slots{ font-family:var(--font-mono); font-size:11px; color:#fff; }
.lfg-timer{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); margin-top:2px; }
.lfg-card--ending .lfg-timer{ color:#FF6B5E; animation:lfgpulse .8s ease-in-out infinite; }
@keyframes lfgpulse{ 50%{ opacity:.4; } }
.lfg-card__body{ flex:1; min-width:0; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.lfg-card__top{ display:flex; align-items:center; gap:10px; }
.lfg-av{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#111; overflow:hidden; box-shadow:0 0 0 2px #ffffff14; }
.lfg-card__owner{ font-family:var(--font-display); font-weight:800; font-size:14px; display:flex; align-items:center; gap:7px; }
.lfg-you{ font-family:var(--font-mono); font-size:9px; background:var(--accent); color:#fff; padding:1px 6px; border-radius:5px; letter-spacing:.06em; }
.lfg-card__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.lfg-card__meta .chip{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  background:#ffffff0a; padding:3px 8px; border-radius:6px; box-shadow:inset 0 0 0 1px #ffffff10;
}
.lfg-card__meta .chip--rank{ color:#EAD9A0; }
.lfg-card__meta .chip--mode{ color:var(--gc); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 35%, transparent); }
.lfg-card__note{ font-size:12.5px; color:var(--text-muted); font-style:italic; }
.lfg-card__code{
  font-family:var(--font-mono); font-size:12px; color:#B8F5C8;
  background:#23A55914; padding:7px 10px; border-radius:8px; box-shadow:inset 0 0 0 1px #23A55940;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.lfg-card__code--locked{ color:var(--text-faint); background:#ffffff08; box-shadow:inset 0 0 0 1px #ffffff14; }
.lfg-card__code--locked a{ color:var(--text-muted); }
.lfg-copy{ font-family:var(--font-mono); font-size:10px; background:#23A55933; color:#DFFCE8; border:0;
  padding:3px 8px; border-radius:6px; cursor:pointer; }
.lfg-card__action{ flex:0 0 auto; display:flex; align-items:center; padding:12px 14px; }
.lfg-fullbadge{ font-family:var(--font-mono); font-size:11px; color:#F0A9A9; background:#E5342918;
  padding:6px 12px; border-radius:8px; box-shadow:inset 0 0 0 1px #E5342944; }

.lfg-empty{ text-align:center; padding:44px 20px; color:var(--text-faint); }
.lfg-empty__ico{ font-size:40px; margin-bottom:10px; opacity:.6; color:#FFC46B; }
.lfg-empty h4{ font-family:var(--font-display); font-size:16px; color:var(--text-muted); margin-bottom:6px; }

.lfg-aside{ display:flex; flex-direction:column; gap:14px; position:sticky; top:14px; }
.lfg-panel{ background:var(--bg-card); border-radius:16px; padding:16px; box-shadow:inset 0 0 0 1px #ffffff0e; }
.lfg-panel h4{ font-family:var(--font-display); font-size:14px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.lfg-panel__ico{ font-size:16px; }
.lfg-create{ display:flex; flex-direction:column; gap:10px; }
.lfg-create label, .lfg-rankform label{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
  display:flex; flex-direction:column; gap:5px; text-transform:uppercase; letter-spacing:.05em; }
.lfg-create select, .lfg-create input, .lfg-rankform select{
  background:var(--bg-deep); color:var(--text); border:0; border-radius:9px; padding:9px 11px;
  font-family:var(--font-mono); font-size:12.5px; text-transform:none; letter-spacing:0;
  box-shadow:inset 0 0 0 1px #ffffff12;
}
.lfg-create select, .lfg-rankform select{
  -webkit-appearance:none; appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a97a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.lfg-create__row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lfg-mic{ flex-direction:row !important; align-items:center; gap:8px !important; color:var(--text-muted) !important; text-transform:none !important; }
.lfg-hint{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); line-height:1.5; margin-top:2px; }
.lfg-panel--guest p{ color:var(--text-muted); font-size:13px; margin-bottom:12px; }
.lfg-panel--rank select{ width:100%; }
@media (max-width:860px){
  .lfg-layout{ grid-template-columns:1fr; }
  .lfg-aside{ position:static; }
}
.feature-rail__track{
  display:flex; gap:12px; overflow-x:auto; padding:4px 2px 10px;
  scroll-snap-type:x mandatory;
}
.clip-card{
  flex:0 0 180px; scroll-snap-align:start;
  background:linear-gradient(165deg, #2B2D31, #1E1F22);
  border-radius:14px; overflow:hidden;
  box-shadow:inset 0 0 0 1px #ffffff10, 0 8px 20px #00000044;
  transition:transform .18s var(--ease), box-shadow .18s;
}
.clip-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:inset 0 0 0 1px #FF5C3955, 0 14px 32px #00000066, 0 0 20px #FF5C3922;
}
.clip-card__media{
  position:relative; aspect-ratio:16/10; background:#111; overflow:hidden;
}
.clip-card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, #00000099);
  pointer-events:none;
}
.clip-card__media img,.clip-card__media video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--ease); }
.clip-card:hover .clip-card__media img,.clip-card:hover .clip-card__media video{ transform:scale(1.06); }
.clip-play{
  position:absolute; inset:0; margin:auto; width:40px; height:40px; z-index:1;
  border-radius:50%; background:#00000099; color:#fff;
  display:grid; place-items:center; font-size:12px;
  backdrop-filter:blur(6px); box-shadow:0 0 0 1px #ffffff22, 0 8px 20px #0008;
}
.clip-card__foot{ display:flex; align-items:center; gap:7px; padding:9px 11px; }
.clip-av{
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:9px; font-weight:800; color:#111;
  box-shadow:0 0 0 2px #ffffff14;
}
.clip-name{ font-size:11px; font-weight:700; color:var(--text-muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clip-likes{ font-size:10px; color:var(--text-faint); font-family:var(--font-mono); }
.clip-ph{
  background:
    linear-gradient(135deg,#FF5C3955,#FF3D8A33),
    repeating-linear-gradient(45deg,transparent,transparent 8px,#ffffff06 8px,#ffffff06 16px);
}
.clip-ph--2{ background:linear-gradient(135deg,#3DDC9744,#FF5C3944); }
.clip-ph--3{ background:linear-gradient(135deg,#F0C75E33,#FF3D8A44); }

/* ===== QUICK CHIPS ===== */
.quick-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.qchip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:10px;
  background:linear-gradient(160deg, #ffffff0A, #00000022);
  color:var(--text-muted); font-size:12px; font-weight:750;
  box-shadow:inset 0 0 0 1px #ffffff10;
  transition:background .14s, color .14s, transform .14s, box-shadow .14s;
}
.qchip i{ font-style:normal; opacity:.85; }
.qchip:hover{
  background:var(--bg-hover); color:var(--text); transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #ffffff18, 0 8px 18px #00000044;
}
.qchip--accent{
  background:linear-gradient(135deg, #FF5C39, #E84A2A);
  color:#fff; box-shadow:0 4px 16px #FF5C3944, inset 0 0 0 1px #ffffff22;
}
.qchip--accent:hover{ filter:brightness(1.06); color:#fff; }

/* ===== COMPOSER ===== */
.card-composer{
  background:linear-gradient(165deg, #2A2C31 0%, #1E1F22 100%);
  border-radius:16px; padding:16px 18px;
  margin-bottom:20px;
  box-shadow:inset 0 0 0 1px #ffffff12, 0 12px 28px #00000044;
  position:relative; overflow:visible;
}
.card-composer::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, #FF5C39aa, transparent); opacity:.7;
}
.composer-row{ display:flex; gap:12px; align-items:flex-start; }
.composer-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:#111;
  box-shadow:0 0 0 2px #ffffff14, 0 4px 12px #0006;
}
/* Tüm avatar img — container ne olursa olsun şişmesin */
.av-img,
.user-avatar img,
.post-avatar img,
.composer-avatar img,
.chat-avatar img,
.chat-av-core img,
.comment-avatar img,
.vip-tile__av img,
.fp img,
.clip-av img,
.fm-av img,
.avatar-core img,
.gang-leader__av img,
.gang-roster__av img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  border-radius:50%;
  display:block;
}
.vip-tile__av,
.fm-av,
.avatar-core,
.chat-av-core,
.gang-leader__av,
.gang-roster__av{
  overflow:hidden;
}
.composer-main{ flex:1; min-width:0; }
.composer textarea, .card-composer textarea{
  width:100%; background:var(--bg-elevated); border:1px solid transparent; border-radius:8px; padding:10px 12px;
  font-size:15px; color:var(--text); resize:none; min-height:52px; line-height:1.45;
}
.composer textarea::placeholder, .card-composer textarea::placeholder{ color:var(--text-faint); }
.composer textarea:focus, .card-composer textarea:focus{ outline:none; border-color:var(--accent-dim); background:var(--bg-surface); }
.composer-foot{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px; padding-top:12px; border-top:1px solid #ffffff0C;
}
.composer-foot select{
  background:var(--bg-surface); border:none; border-radius:8px;
  padding:8px 11px; font-size:12px; color:var(--text-muted);
  box-shadow:inset 0 0 0 1px #ffffff0A;
}
.file-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--text-muted);
  cursor:pointer; padding:7px 10px; border-radius:8px;
  box-shadow:inset 0 0 0 1px #ffffff12;
  user-select:none;
}
.file-btn:hover{ background:var(--bg-hover); color:var(--text); }
.file-btn__input{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  opacity:0;
  cursor:pointer;
  font-size:0;
}
.file-btn__name{
  font-size:11px; color:var(--accent-2); font-weight:600;
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.composer-mood{ display:flex; gap:2px; }
.mood{ width:30px; height:30px; border-radius:8px; font-size:14px; }
.mood:hover,.mood.on{ background:var(--bg-hover); }
.composer-foot .btn-primary{ margin-left:auto; }
.composer-guest{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.composer-guest p{ color:var(--text-muted); font-size:14px; }
.composer-guest .actions{ display:flex; gap:8px; }

.feed-label{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:6px 0 14px;
}
.feed-label > span{
  font-family:var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
}
.feed-tabs{
  display:flex; gap:3px; padding:3px;
  background:linear-gradient(160deg, #ffffff08, #00000033);
  border-radius:10px; box-shadow:inset 0 0 0 1px #ffffff0A;
}
.ftab{
  font-size:12px; font-weight:700; color:var(--text-faint);
  padding:7px 12px; border-radius:8px; transition:background .12s, color .12s;
}
.ftab.active{
  background:var(--accent); color:#fff;
  box-shadow:0 4px 12px var(--accent-dim);
}
.ftab:hover:not(.active){ background:var(--bg-hover); color:var(--text); }

/* ===== POST CARDS (Discord tarzı kompakt) ===== */
.post-card{
  position:relative;
  display:grid; grid-template-columns:3px 1fr;
  background:transparent;
  border-radius:10px; margin-bottom:2px; overflow:visible;
  box-shadow:none;
  transition:background .15s;
  scroll-margin-top:72px;
}
.post-card::after{ display:none; }
.post-card:hover{
  transform:none;
  background:#ffffff07;
  box-shadow:none;
}
.post-card--hot{
  background:#FF5C390C;
  box-shadow:inset 0 0 0 1px #FF5C3928;
}
.post-card__rail{
  background:var(--role, var(--accent));
  border-radius:3px 0 0 3px;
  opacity:.55;
  box-shadow:none;
}
.post-card:hover .post-card__rail{ opacity:1; }
.post-card__inner{ padding:10px 14px 10px 12px; }
.post-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:6px; }
.post-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-weight:700; font-size:12px; color:#111;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--role, #fff) 30%, transparent), 0 4px 12px #0006;
}
.post-who{ flex:1; min-width:0; overflow:hidden; }
.post-who .uname{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:15px; font-weight:750;
  max-width:100%;
}
.post-who .uname a{ min-width:0; overflow-wrap:anywhere; }
.post-who .uname a:hover{ text-decoration:underline; }
.post-who .meta{
  font-size:12px; color:var(--text-faint); margin-top:2px;
  overflow-wrap:anywhere;
}
.role-pill{
  font-size:10px; font-weight:800; text-transform:uppercase;
  padding:2px 7px; border-radius:5px;
  background:color-mix(in srgb, var(--role) 22%, transparent);
  color:var(--role);
}
.tag{
  font-size:10px; font-weight:700; text-transform:uppercase;
  padding:2px 7px; border-radius:5px;
  background:var(--accent-dim); color:#FFB59A;
}
.hot-badge{
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  background:linear-gradient(90deg,#FF5C39,#FF3D8A);
  color:#fff; padding:5px 10px; border-radius:999px; white-space:nowrap;
  box-shadow:0 4px 14px #FF5C3944;
}
.post-text{
  font-size:15px; line-height:1.45; margin:0 0 8px 52px;
  white-space:pre-wrap; color:#DBDEE1;
  max-width:680px;
  overflow-wrap:anywhere; word-break:break-word;
}
.post-media{
  width:fit-content;
  max-width:min(640px, calc(100% - 52px));
  border-radius:10px; overflow:hidden; margin:0 0 8px 52px;
  background:#111;
  box-shadow:0 0 0 1px #00000055;
}
.post-media img,.post-media video{
  display:block;
  width:auto;
  max-width:100%;
  max-height:460px;
  height:auto;
  object-fit:contain;
}
.post-media__zoom{
  display:block; width:fit-content; max-width:100%;
  padding:0; margin:0; border:0; background:transparent;
  cursor:zoom-in; position:relative;
}
.post-media__zoom::after{
  content:'⛶'; position:absolute; right:8px; bottom:8px;
  width:26px; height:26px; border-radius:6px;
  display:grid; place-items:center;
  font-size:12px; color:#fff;
  background:#00000088; box-shadow:inset 0 0 0 1px #ffffff22;
  opacity:0; transition:opacity .15s; pointer-events:none;
}
.post-media__zoom:hover::after{ opacity:1; }
.post-spotify{
  width:auto;
  max-width:min(400px, calc(100% - 52px));
  margin:0 0 8px 52px;
  border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 1px #00000066;
  background:#121212;
}
.post-spotify iframe{
  display:block; border:0; width:100%;
  max-width:100%; height:80px;
}
.react-bar{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-left:52px;
  max-width:calc(100% - 52px);
}

/* Tam ekran görsel — scroll kilidi (üst atlamasın) */
html.lb-open, html.lb-open body{ overflow:hidden; }
html.lb-open body{
  position:fixed;
  left:0; right:0;
  width:100%;
}
.media-lb{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  padding:24px;
}
.media-lb[hidden]{ display:none !important; }
.media-lb__backdrop{
  position:absolute; inset:0; border:0; padding:0; cursor:zoom-out;
  background:#05060acc; backdrop-filter:blur(8px);
}
.media-lb__stage{
  position:relative; z-index:1; max-width:min(1100px, 96vw); max-height:92vh;
}
.media-lb__img{
  display:block; max-width:96vw; max-height:88vh;
  width:auto; height:auto; object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 60px #000000aa, 0 0 0 1px #ffffff18;
}
.media-lb__close{
  position:absolute; top:-14px; right:-14px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:0;
  background:#1E1F22; color:#fff; font-size:22px; line-height:1;
  cursor:pointer; box-shadow:0 0 0 1px #ffffff22, 0 8px 20px #0008;
}
.media-lb__close:hover{ background:#FF5C39; }

.react-form{ display:inline; }
.react{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--text-muted);
  background:linear-gradient(160deg, #ffffff08, #00000022);
  border-radius:999px; padding:6px 12px;
  box-shadow:inset 0 0 0 1px #ffffff0C;
  transition:background .12s, transform .1s, box-shadow .12s, color .12s;
  user-select:none; -webkit-user-select:none; cursor:pointer;
}
.react svg{ width:15px; height:15px; flex:0 0 auto; }
.react:hover{ background:var(--bg-hover); transform:scale(1.05); box-shadow:inset 0 0 0 1px #ffffff18; }
.react--heart:hover{ color:#F47B7B; }
.react--fire:hover{ color:#FFA94D; }
.react--laugh:hover{ color:#FFD84D; }
.react--heart.on{ background:#ED424522; color:#F47B7B; box-shadow:inset 0 0 0 1px #ED424555; }
.react--heart.on svg{ fill:currentColor; }
.react--fire.on{ background:#FF8A3C22; color:#FFA94D; box-shadow:inset 0 0 0 1px #FF8A3C55; }
.react--fire.on svg{ fill:#FF8A3C33; }
.react--laugh.on{ background:#FFD84D1E; color:#FFD84D; box-shadow:inset 0 0 0 1px #FFD84D4D; }
.react b{ font-family:var(--font-mono); font-size:11px; }
.react--ghost{ background:transparent; box-shadow:none; }
/* Onaylı rozeti: metin ✔ yerine keskin SVG mühür (font-size:0 karakteri gizler) */
.verified-badge{
  display:inline-block; width:15px; height:15px;
  vertical-align:middle; margin:-2px 0 0 2px; flex:0 0 auto;
  background:url('badges/verified.svg') center / contain no-repeat;
  font-size:0; color:transparent; line-height:0;
  filter:drop-shadow(0 0 4px #2BB1FF55);
}

/* ---- Yorumlar ---- */
.comments-panel{
  margin:10px 0 0 52px;
  padding:12px;
  border-radius:12px;
  background:#0C0E14;
  box-shadow:inset 0 0 0 1px #ffffff10;
}
.comment-row{
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 0;
  border-bottom:1px solid #ffffff08;
}
.comment-row:last-of-type{ border-bottom:0; }
.comment-avatar{
  width:32px !important; height:32px !important;
  min-width:32px; max-width:32px;
  border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-size:10px; font-weight:800; color:#111;
  box-shadow:0 0 0 1px #ffffff18;
}
.comment-avatar img{
  width:32px !important; height:32px !important;
  max-width:32px !important; max-height:32px !important;
  object-fit:cover; border-radius:50%; display:block;
}
.comment-body{ flex:1; min-width:0; }
.comment-meta{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.comment-name{ font-size:13px; font-weight:750; color:#EEF0F6; text-decoration:none; }
.comment-name:hover{ text-decoration:underline; color:var(--accent); }
.comment-time{ font-size:11px; color:var(--text-faint); }
.comment-text{ font-size:13.5px; line-height:1.45; color:#D5D9E2; word-wrap:break-word; }
.comment-empty{ font-size:12px; color:var(--text-faint); margin:6px 0 10px; }
.comment-form{
  display:flex; align-items:center; gap:8px;
  margin-top:10px; padding-top:10px;
  border-top:1px solid #ffffff0C;
  position:relative;
}
.comment-form .comment-avatar{ margin:0; }
.comment-form input[type=text]{
  flex:1; min-width:0;
  background:#161922 !important;
  border:1px solid #ffffff16 !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  font-size:13px !important;
  color:var(--text) !important;
  font-family:var(--font-body, inherit) !important;
  -webkit-appearance:none; appearance:none;
  box-shadow:none !important;
}
.comment-form input[type=text]::placeholder{ color:var(--text-faint); }
.comment-form input[type=text]:focus{
  outline:none;
  border-color:color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow:0 0 0 2px var(--accent-dim, #FF5C3933) !important;
}
.comment-form .btn-sm{ flex-shrink:0; padding:9px 14px; }

.mention{
  color:#FFB59A; font-weight:700; text-decoration:none;
}
.mention:hover{ text-decoration:underline; color:#FF5C39; }
.mention-box{
  position:absolute; left:40px; right:80px; bottom:calc(100% + 6px);
  z-index:40;
  background:#1A1D26;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px #ffffff16, 0 12px 28px #00000088;
  padding:6px;
  max-height:220px; overflow:auto;
}
.composer-main .mention-box,
.field .mention-box{
  left:0; right:0; bottom:auto; top:calc(100% + 4px);
}
.mention-box__item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:0; border-radius:8px;
  background:transparent; color:#EEF0F6; font-size:13px; font-weight:650;
  cursor:pointer; text-align:left;
}
.mention-box__item:hover,
.mention-box__item.is-active{ background:#ffffff12; }
.mention-box__av{
  width:28px; height:28px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-size:10px; font-weight:800; color:#111; flex-shrink:0;
}
.mention-box__av img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:820px){
  .comments-panel{ margin-left:0; }
}

/* ---- VIP kullanıcıların akışta özel görünümü ---- */
.vip-name-inline{
  font-weight:800;
  background:linear-gradient(90deg,#FFF3A0,#E8C547,#FFE9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 12px #E8C54755;
}
.vip-mini-seal{
  display:inline-flex; align-items:center; gap:3px;
  font-size:9px; font-weight:900; letter-spacing:.06em;
  padding:2px 7px; border-radius:999px;
  color:#1a1408;
  background:linear-gradient(135deg,#FFF3A0,#E8C547 55%,#B8860B);
  box-shadow:0 0 0 1px #fff6, 0 0 10px #E8C54766;
}
.post-card--vip{
  background:#E8C5470C;
  box-shadow:inset 0 0 0 1px #E8C54728;
}
.post-card--vip:hover{ background:#E8C54714; }
.post-card--vip .post-avatar{
  box-shadow:0 0 0 2px #E8C547, 0 0 12px #E8C54766;
}

/* ---- Platinum kullanıcıların akışta özel görünümü ---- */
.plat-name-inline{
  font-weight:900;
  background:linear-gradient(92deg,#FFFFFF,#E8EEF5 30%,#A8B4C4 55%,#F4F7FB 78%,#C8D0DC);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px #C8D0DC66);
}
.plat-mini-seal{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
  color:#07090C;
  background:linear-gradient(135deg,#FFFFFF,#D7DEE8 40%,#9AA8B8 78%,#E8EEF5);
  box-shadow:
    0 0 0 1px #ffffffaa,
    0 0 16px #C8D0DC77,
    inset 0 1px 0 #fff,
    inset 0 -1px 0 #8A96A888;
}
.post-card--plat{
  isolation:isolate;
  background:#C8D0DC0C;
  box-shadow:inset 0 0 0 1px #C8D0DC28;
  overflow:hidden;
  border-radius:10px;
}
.post-card--plat::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(115deg, transparent 0%, #ffffff08 40%, transparent 70%);
  opacity:.7;
}
.post-card--plat::after{
  content:''; position:absolute; top:0; left:8%; right:8%; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, #C8D0DC88, transparent);
  opacity:.7;
}
.post-card--plat:hover{
  transform:none;
  background:#C8D0DC14;
  box-shadow:inset 0 0 0 1px #C8D0DC44;
}
.post-card--plat .post-card__rail{
  background:linear-gradient(180deg,#FFFFFF,#C8D0DC 40%,#7A8798);
  opacity:1;
  box-shadow:0 0 12px #C8D0DC55;
}
.post-card--plat .post-card__inner{ position:relative; z-index:1; }
.post-plat-ribbon{ display:none !important; } /* eski çift rozet — kullanılmıyor */
.plat-mini-seal, .vip-mini-seal, .role-pill, .tag{
  flex-shrink:0;
  max-width:100%;
  white-space:nowrap;
}
.post-avatar--plat,
.post-card--plat .post-avatar{
  box-shadow:
    0 0 0 2px #F4F6FA,
    0 0 0 4px #C8D0DC55,
    0 0 22px #C8D0DC77;
}
.post-card--plat .post-text{ color:#F2F4F8; }
.post-card--plat .react{
  background:linear-gradient(160deg, #C8D0DC18, #00000044);
  box-shadow:inset 0 0 0 1px #C8D0DC33;
}
@keyframes plat-sheen{
  0%,100%{ opacity:.55; transform:translateX(-2%); }
  50%{ opacity:.95; transform:translateX(2%); }
}

.empty-card{
  text-align:center; padding:48px 20px;
  background:linear-gradient(165deg, #2A2C31, #1A1B1E);
  border-radius:16px; box-shadow:inset 0 0 0 1px #ffffff0C;
}
.empty-illu{
  width:72px; height:72px; margin:0 auto 14px; border-radius:20px;
  background:linear-gradient(145deg,#FF5C39,#FF3D8A);
  opacity:.7;
}
.empty-card p{color:var(--text-muted); margin-bottom:14px;}

/* ===== RIGHT PANEL CARDS ===== */
.right-panel{
  background:linear-gradient(180deg, #12151C 0%, #0E1118 100%);
  padding:14px 12px; overflow-y:auto;
}
.side-card{
  background:linear-gradient(165deg, #1C212C 0%, #13161E 100%);
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:inset 0 0 0 1px #ffffff0C, 0 8px 22px #00000044;
  position:relative; overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s;
}
.side-card:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #ffffff14, 0 14px 32px #00000055;
}
.side-card--gang{
  padding:0;
  --gang:#FF3D8A;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gang) 35%, #ffffff10),
             0 12px 28px #00000055, 0 0 32px color-mix(in srgb, var(--gang) 18%, transparent);
}
.side-card--gang:hover{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gang) 50%, #ffffff14),
             0 18px 40px #00000066, 0 0 40px color-mix(in srgb, var(--gang) 28%, transparent);
}
.gang-card__crown{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.14em;
  color:#0A0B0F; background:linear-gradient(90deg, var(--gold), #FFE9A8);
  padding:5px 9px; border-radius:6px;
  box-shadow:0 4px 14px #F0C75E44;
}
.side-card__art{
  height:120px; background-size:cover; background-position:center;
  position:relative;
}
.side-card__art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 5%, #13161EF5 96%);
}
.gang-card__glow{
  position:absolute; inset:auto -20% -40%; height:90px; z-index:1;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--gang) 55%, transparent), transparent 70%);
  filter:blur(8px); pointer-events:none;
}
.side-card__body{padding:4px 14px 14px; position:relative; z-index:2;}
.side-kicker{
  display:block; font-family:var(--font-display);
  font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#FFB59A; margin-bottom:8px;
  text-shadow:0 0 16px #FF5C3944;
}
.side-card__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px;}
.gang-title-row{display:flex; gap:10px; align-items:center; margin-bottom:8px;}
.gang-emoji{
  width:44px; height:44px; border-radius:14px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--gang) 35%, #1C212C), #1C212C);
  display:grid; place-items:center; font-size:22px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gang) 40%, transparent), 0 6px 16px #0008;
}
.gang-title-row strong{display:block; font-family:var(--font-display); font-size:15px; font-weight:800;}
.gang-title-row small{color:var(--text-faint); font-size:11px;}
.gang-blurb{
  font-size:12px; line-height:1.45; color:var(--text-muted);
  margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.stat-pills{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.stat-pills span{
  font-size:11px; color:var(--text-muted);
  background:linear-gradient(160deg,#ffffff0A,#00000022);
  padding:5px 9px; border-radius:8px;
  box-shadow:inset 0 0 0 1px #ffffff0C;
}
.stat-pills b{color:var(--text); font-family:var(--font-mono);}
.facepile{display:flex; margin-bottom:12px;}
.fp{
  width:28px; height:28px; border-radius:50%;
  border:2px solid #13161E; margin-left:-6px;
  display:grid; place-items:center; overflow:hidden;
  font-size:10px; font-weight:800; color:#111;
}
.fp:first-child{margin-left:0;}
.fp.more{background:var(--bg-elevated); color:var(--text-muted);}
.gang-cta{
  background:linear-gradient(135deg, var(--gang), color-mix(in srgb, var(--gang) 60%, #000)) !important;
  box-shadow:0 2px 0 color-mix(in srgb, var(--gang) 50%, #000), 0 0 20px color-mix(in srgb, var(--gang) 30%, transparent) !important;
}

.side-card--connect{text-align:center; padding-top:18px;}
.connect-ring{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, #FF5C3955, transparent 70%);
  pointer-events:none;
  animation:sfx-float 8s ease-in-out infinite alternate;
}
.online-big{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:8px 0 12px; font-size:14px;
}
.online-big .dot{
  width:9px; height:9px; border-radius:50%; background:var(--accent-2);
  box-shadow:0 0 0 0 #3DDC9788; animation:ping 1.5s ease infinite;
}
.online-big b{font-family:var(--font-mono); font-size:18px;}
.side-card--connect .ip-chip{display:block; margin-bottom:12px; text-align:center;}

.side-card--discord .online-big{ justify-content:flex-start; }
.side-card--discord .facepile img.fp{ border:2px solid #13161E; }

/* ===== VIP MEMBERS ===== */
.side-card--vip{
  background:
    linear-gradient(165deg, #2A2418 0%, #141820 55%, #1A1610 100%);
  box-shadow:
    inset 0 0 0 1px #E8C54744,
    0 8px 22px #00000044,
    0 0 28px #E8C54714;
}
.side-card--vip::before{
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, #E8C547aa, transparent);
}
.side-kicker--gold{
  color:#E8C547 !important;
  text-shadow:0 0 18px #E8C54766 !important;
}
.vip-count{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:#0A0B0F; background:linear-gradient(90deg,#E8C547,#FFF3A0);
  padding:3px 8px; border-radius:999px;
  box-shadow:0 2px 10px #E8C54744;
}
.vip-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.vip-tile{
  display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center;
  padding:7px 6px; border-radius:10px;
  transition:background .14s, transform .14s;
}
.vip-tile:hover{
  background:linear-gradient(90deg, #E8C54714, transparent);
  transform:translateX(2px);
}
.vip-tile__av{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-size:11px; font-weight:800; color:#111;
  position:relative;
  box-shadow:0 0 0 2px #E8C54788, 0 0 14px #E8C54733;
}
.vip-tile__crown{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:10px; line-height:1;
  filter:drop-shadow(0 2px 4px #0008);
}
.vip-tile--plat .vip-tile__av{
  box-shadow:0 0 0 2px #C8D0DC88, 0 0 16px #E8EEF544;
}
.vip-tile--plat .vip-tile__name{
  background:linear-gradient(90deg,#E8EEF5,#C8D0DC,#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vip-tile--plat .vip-tile__pts{ color:#C8D0DC; }
.vip-tile__on{
  position:absolute; right:-1px; bottom:-1px;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent-2); border:2px solid #1A1610;
  box-shadow:0 0 8px #3DDC9788;
}
.vip-tile__info{ min-width:0; display:flex; flex-direction:column; }
.vip-tile__name{
  font-size:13px; font-weight:750;
  background:linear-gradient(90deg,#FFF3A0,#E8C547,#FFE9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vip-tile__sub{ font-size:11px; color:var(--text-faint); }
.vip-tile__pts{
  font-family:var(--font-mono); font-size:10px; color:#E8C547;
  opacity:.85;
}
.vip-cta{
  display:block; text-align:center;
  font-size:12px; font-weight:750; color:#E8C547;
  padding:8px; border-radius:8px;
  background:#E8C54712; box-shadow:inset 0 0 0 1px #E8C54733;
  transition:background .14s, box-shadow .14s;
}
.vip-cta:hover{
  background:#E8C54722;
  box-shadow:inset 0 0 0 1px #E8C54766, 0 0 16px #E8C54722;
}

/* ===== EVENT CALENDAR ===== */
.side-card--calendar{
  background:linear-gradient(165deg, #1C212C 0%, #141820 100%);
}
.cal-month{
  font-size:11px; font-weight:700; color:var(--text-faint);
  white-space:nowrap;
}
.cal-week{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  margin-bottom:14px;
}
.cal-day{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 2px 10px; border-radius:10px;
  background:#ffffff06; box-shadow:inset 0 0 0 1px #ffffff08;
}
.cal-dow{font-size:9px; font-weight:700; color:var(--text-faint); text-transform:uppercase;}
.cal-num{font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text-muted);}
.cal-dot{
  position:absolute; bottom:4px;
  width:4px; height:4px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.cal-day.is-today{ box-shadow:inset 0 0 0 1px #ffffff22; }
.cal-day.is-today .cal-num{ color:var(--text); }
.cal-day.is-event{
  background:linear-gradient(160deg, #FF5C3928, #FF3D8A18);
  box-shadow:inset 0 0 0 1px #FF5C3966, 0 0 16px #FF5C3922;
}
.cal-day.is-event .cal-dow{ color:#FFB59A; }
.cal-day.is-event .cal-num{ color:#fff; }

.event-detail{
  padding:12px; border-radius:12px;
  background:linear-gradient(160deg, #ffffff08, #00000033);
  box-shadow:inset 0 0 0 1px #ffffff0C;
}
.event-detail__when{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.event-day-badge{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:11px; font-weight:800;
  color:#0A0B0F; background:linear-gradient(145deg,#FF5C39,#FF3D8A);
  box-shadow:0 4px 14px #FF5C3944;
}
.event-detail__when strong{display:block; font-size:13px; font-weight:750;}
.event-detail__when small{display:block; font-size:11px; color:var(--text-faint); margin-top:2px;}
.event-detail__title{
  font-family:var(--font-display); font-size:15px; font-weight:800;
  letter-spacing:-.02em; margin-bottom:6px; line-height:1.25;
}
.event-detail__desc{
  font-size:12px; line-height:1.5; color:var(--text-muted); margin-bottom:10px;
}
.event-detail__meta{
  display:flex; flex-direction:column; gap:4px;
  font-size:11px; color:var(--text-faint);
  padding-top:10px; border-top:1px solid #ffffff0C;
}

.sync-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:9px; font-weight:700; color:var(--accent-2);
}
.sync-pill i{width:6px; height:6px; border-radius:50%; background:var(--accent-2); display:block;}

.member-tile{
  display:flex; align-items:center; gap:10px;
  padding:7px 6px; border-radius:10px; margin:2px 0;
  transition:background .12s;
}
.member-tile:hover{background:var(--bg-hover);}
.m-avatar{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:11px; font-weight:700; color:#111;
  position:relative;
  box-shadow:0 0 0 2px var(--glow, transparent);
}
.m-avatar.on::after{
  content:''; position:absolute; right:-1px; bottom:-1px;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent-2); border:2px solid #1E1F22;
  box-shadow:0 0 8px #3DDC9788;
}
.m-info{display:flex; flex-direction:column; min-width:0;}
.m-name{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m-sub{font-size:11px; color:var(--text-faint);}

.side-card--event{
  background:linear-gradient(145deg,#1C212C,#2A1A28);
  box-shadow:inset 0 0 0 1px #FF5C3944, 0 8px 22px #00000033, 0 0 24px #FF5C3918;
}
.side-card--event strong{display:block; font-family:var(--font-display); font-size:14px; margin-bottom:4px;}
.side-card--event p{font-size:12px; color:var(--text-muted); margin-bottom:10px;}
.empty-mini{font-size:12px; color:var(--text-faint);}

.chat-livebar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid #ffffff0C;
  background:linear-gradient(90deg, #3DDC9712, transparent 60%);
  font-size:12px; color:var(--text-muted);
}
.chat-livebar .ch-live{ margin-left:0; }

/* ===== CHAT ===== */
.chat-shell{
  display:flex; flex-direction:column; gap:12px;
  /* Sayfa büyümesin: sohbet ekrana sabitlenir, sadece mesaj listesi kayar */
  height:calc(100vh - 130px);
  height:calc(100dvh - 130px);
  min-height:360px;
}
.chat-shell__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:16px;
  background:
    linear-gradient(120deg, #FF5C3918, transparent 42%),
    linear-gradient(165deg, #1C212C, #12151C);
  box-shadow:inset 0 0 0 1px #ffffff12, 0 10px 28px #00000044;
}
.chat-shell__title{ display:flex; align-items:center; gap:12px; min-width:0; }
.chat-shell__hash{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:18px; color:#FFB59A;
  background:linear-gradient(145deg, #FF5C3933, #FF3D8A22);
  box-shadow:inset 0 0 0 1px #FF5C3944, 0 0 18px #FF5C3922;
}
.chat-shell__title strong{
  display:block; font-family:var(--font-display); font-size:16px; font-weight:800;
  letter-spacing:.02em;
}
.chat-shell__title small{ color:var(--text-faint); font-size:12px; }
.chat-shell__live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:900; letter-spacing:.1em;
  padding:6px 11px; border-radius:999px;
  color:#B8F5C8; background:#23A55922;
  box-shadow:inset 0 0 0 1px #23A55966, 0 0 14px #23A55922;
}
.chat-shell__live i{
  width:7px; height:7px; border-radius:50%; background:#23A559;
  box-shadow:0 0 0 0 #23A55988; animation:ping 1.5s ease infinite;
}

.chat-wrap{
  flex:1;
  background:
    radial-gradient(120% 80% at 0% 0%, #FF5C3910, transparent 40%),
    radial-gradient(100% 70% at 100% 100%, #3DDC9710, transparent 45%),
    linear-gradient(180deg, #161A22 0%, #10131A 100%);
  border-radius:18px;
  display:flex; flex-direction:column;
  min-height:0;
  box-shadow:inset 0 0 0 1px #ffffff14, 0 16px 40px #00000055;
  overflow:hidden;
}
.chat-messages{
  flex:1; overflow-y:auto; padding:16px 14px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:#ffffff22 transparent;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.chat-empty{
  margin:auto; text-align:center; padding:40px 16px; color:var(--text-muted);
}
.chat-empty__orb{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #FF5C39aa, #FF3D8A44, transparent 70%);
  box-shadow:0 0 40px #FF5C3933; animation:sfx-float 5s ease-in-out infinite alternate;
}
.chat-empty p{ font-size:14px; }

.chat-msg{
  display:grid; grid-template-columns:52px 1fr; gap:12px;
  align-items:flex-start;
  animation:chat-in .22s ease;
}
@keyframes chat-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
.chat-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-weight:800; font-size:12px; color:#111;
  box-shadow:0 0 0 2px #ffffff18, 0 6px 16px #0006;
  margin-top:4px;
}
.chat-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* VIP / Platinum profil çerçevesi (sohbet) */
.chat-av-stage{
  position:relative;
  width:52px; height:52px;
  flex-shrink:0;
  --theme-glow:#E8C54788;
}
.chat-av-stage.frame-platinum{ --theme-glow:#C8D0DC88; }
.chat-av-core{
  position:absolute;
  inset:18%;
  border-radius:50%;
  overflow:hidden;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:11px; color:#111;
  z-index:1;
}
.chat-av-core img{ width:100%; height:100%; object-fit:cover; display:block; }
.chat-av-frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 0 1px #ffffff55) drop-shadow(0 2px 6px #000000cc) drop-shadow(0 0 10px var(--theme-glow));
  animation:chat-frame-glow 3s ease-in-out infinite;
}
@keyframes chat-frame-glow{
  0%,100%{ filter:drop-shadow(0 0 1px #ffffff44) drop-shadow(0 2px 5px #000c) drop-shadow(0 0 8px var(--theme-glow)); }
  50%{ filter:drop-shadow(0 0 2px #ffffff77) drop-shadow(0 2px 5px #000c) drop-shadow(0 0 16px var(--theme-glow)); }
}
.chat-av-crown{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  z-index:3; font-size:11px; line-height:1;
  filter:drop-shadow(0 2px 4px #000a);
  pointer-events:none;
}
.chat-av-crown--vip{ color:#E8C547; text-shadow:0 0 8px #E8C547aa; }
.chat-av-crown--plat{ color:#E8EEF5; text-shadow:0 0 8px #C8D0DCaa; font-size:10px; }

.chat-msg--vip .chat-avatar{
  box-shadow:0 0 0 2px #E8C547, 0 0 14px #E8C54755;
}
.chat-msg--plat .chat-avatar{
  box-shadow:0 0 0 2px #F4F6FA, 0 0 0 4px #C8D0DC44, 0 0 16px #C8D0DC55;
}
.chat-bubble{
  min-width:0;
  padding:10px 14px 12px;
  border-radius:14px 14px 14px 6px;
  background:linear-gradient(165deg, #232833, #171B22);
  box-shadow:inset 0 0 0 1px #ffffff10, 0 8px 20px #00000033;
  transition:transform .14s, box-shadow .14s;
}
.chat-msg:hover .chat-bubble{
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px #ffffff18, 0 12px 26px #00000044;
}
.chat-meta{
  display:flex; flex-wrap:wrap; gap:7px; align-items:center;
  margin-bottom:5px;
}
.chat-name{ font-size:14px; font-weight:800; color:#EEF0F6; }
.chat-time{ font-size:11px; color:var(--text-faint); margin-left:auto; font-family:var(--font-mono); }
.chat-text{
  font-size:14.5px; color:#D5D9E2; line-height:1.5;
  word-wrap:break-word; white-space:pre-wrap;
}

/* VIP sohbet kartı */
.chat-msg--vip .chat-bubble{
  background:linear-gradient(165deg, #2A2418, #1A160E 60%, #12100A);
  box-shadow:
    inset 0 0 0 1px #E8C54755,
    0 0 22px #E8C54718,
    0 10px 24px #00000044;
}
.chat-msg--vip .chat-text{ color:#F3E8C8; }

/* Platinum sohbet kartı */
.chat-msg--plat .chat-bubble{
  position:relative;
  background:
    radial-gradient(120% 80% at 100% 0%, #C8D0DC22, transparent 42%),
    linear-gradient(165deg, #22262F, #12151C 55%, #0A0C10);
  box-shadow:
    inset 0 0 0 1px #E8EEF566,
    0 0 28px #C8D0DC22,
    0 12px 28px #00000055;
}
.chat-msg--plat .chat-bubble::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent, #ffffff12 35%, transparent 55%);
  opacity:.7;
}
.chat-msg--plat .chat-text{ color:#F2F4F8; position:relative; z-index:1; }
.chat-msg--plat .chat-meta,
.chat-msg--vip .chat-meta{ position:relative; z-index:1; }

.chat-input-row{
  padding:12px 14px 14px;
  border-top:1px solid #ffffff10;
  background:linear-gradient(180deg, #12151Cee, #0E1118);
}
.chat-composer{
  display:flex; align-items:center; gap:10px;
  padding:8px 8px 8px 10px;
  border-radius:14px;
  background:#0A0C10;
  box-shadow:inset 0 0 0 1px #ffffff14, 0 0 0 1px #FF5C3914;
}
.chat-composer__av{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-size:11px; font-weight:800; color:#111;
}
.chat-composer__av img{ width:100%; height:100%; object-fit:cover; display:block; }
.chat-composer input{
  flex:1; background:transparent; border:none; outline:none;
  padding:10px 4px; font-size:14px; color:var(--text);
  font-family:var(--font-body, inherit);
}
.chat-composer input::placeholder{ color:var(--text-faint); }
.chat-composer .btn-primary{ flex-shrink:0; padding:10px 16px; }
.chat-guest{ font-size:13px; color:var(--text-faint); margin:0; padding:8px; }
.chat-guest a{ color:var(--accent); font-weight:700; }

/* ===== KELİME OYUNU ===== */
.wordgame-shell .chat-shell__hash{
  font-size:18px;
  background:linear-gradient(145deg, #3DDC9733, #FF5C3922);
  box-shadow:inset 0 0 0 1px #3DDC9744, 0 0 18px #3DDC9722;
}
.wg-expected-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:700; color:#D5D9E2;
  background:linear-gradient(135deg, #FF5C3922, #3DDC9718);
  box-shadow:inset 0 0 0 1px #ffffff18;
}
.wg-expected-chip b{
  font-family:var(--font-display); font-size:18px; letter-spacing:.04em;
  color:#FFB59A; text-shadow:0 0 12px #FF5C3966;
  min-width:1.2em; text-align:center;
}
.wg-used{ color:var(--text-faint); font-weight:600; }
.wg-used i{ font-style:normal; color:var(--accent-2); font-family:var(--font-mono); }
.wg-rules{
  padding:10px 16px; font-size:12px; line-height:1.45; color:var(--text-muted);
  border-bottom:1px solid #ffffff0C;
  background:linear-gradient(90deg, #3DDC970C, transparent 70%);
}
.wg-rules b{ color:#EEF0F6; }
.wg-bot-av{
  background:linear-gradient(145deg, #FF5C39, #FF3D8A) !important;
  color:#fff !important;
  font-size:11px !important;
  box-shadow:0 0 0 2px #FF5C3955, 0 0 16px #FF5C3933 !important;
}
.wg-bot-name{ color:#FFB59A !important; }
.wg-bot-tag{
  font-size:9px; font-weight:900; letter-spacing:.08em;
  padding:2px 6px; border-radius:4px;
  color:#0A0C10; background:linear-gradient(135deg, #FFB59A, #FF5C39);
}
.wg-msg--bot .chat-bubble{
  background:linear-gradient(165deg, #2A1E24, #17131A);
  box-shadow:inset 0 0 0 1px #FF5C3933, 0 8px 20px #00000033;
}
.wg-ok{ margin-left:4px; font-size:13px; }
.wg-error{
  margin:0 14px 10px; padding:10px 12px; border-radius:10px;
  font-size:13px; color:#F47B7B;
  background:#ED424522; box-shadow:inset 0 0 0 1px #ED424555;
}

/* ===== EMOJİ BULMACA ===== */
.emojigame-shell .chat-shell__hash{
  background:linear-gradient(145deg, #FFC24B33, #FF3D8A22);
  box-shadow:inset 0 0 0 1px #FFC24B44, 0 0 18px #FFC24B22;
}
.eg-puzzle-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px;
  background:linear-gradient(90deg, #FFC24B0F, transparent 75%);
}
.eg-puzzle-label{
  font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:#FFC24B; flex-shrink:0;
}
.eg-puzzle-emojis{
  font-size:30px; line-height:1.2; letter-spacing:4px;
  padding:6px 14px; border-radius:12px;
  background:#00000044; box-shadow:inset 0 0 0 1px #FFC24B33;
  word-break:break-all;
  max-width:100%;
}
.eg-puzzle-info{ font-size:12px; color:var(--text-muted); min-width:0; }
.eg-puzzle-info b{ color:#EEF0F6; }
@media (max-width:620px){
  .eg-puzzle-bar{ padding:10px 12px; gap:8px; }
  .eg-puzzle-emojis{ font-size:24px; letter-spacing:3px; padding:5px 12px; }
  .eg-puzzle-info{ font-size:11px; width:100%; }
}

.emojigame-shell .eg-chip b, .eg-chip i{ font-style:normal; }

/* Kompakt satır: isim + yazı yan yana (kelime / sayı oyunu) */
.wordgame-shell .chat-messages,
.numbergame-shell .chat-messages{
  gap:6px;
}
.wordgame-shell .chat-msg,
.numbergame-shell .chat-msg{
  grid-template-columns:38px 1fr;
  gap:8px;
}
.wordgame-shell .chat-avatar,
.numbergame-shell .chat-avatar{
  width:32px; height:32px; margin-top:2px; font-size:10px;
}
.wordgame-shell .chat-av-stage,
.numbergame-shell .chat-av-stage{
  width:38px; height:38px;
}
.wordgame-shell .chat-av-crown,
.numbergame-shell .chat-av-crown{
  top:-4px; font-size:9px;
}
.wordgame-shell .chat-bubble,
.numbergame-shell .chat-bubble{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:8px;
  row-gap:2px;
  padding:5px 11px 6px;
  border-radius:11px 11px 11px 4px;
}
.wordgame-shell .chat-msg:hover .chat-bubble,
.numbergame-shell .chat-msg:hover .chat-bubble{
  transform:none;
}
.wordgame-shell .chat-meta,
.numbergame-shell .chat-meta{
  display:contents;
  margin:0;
}
.wordgame-shell .chat-name,
.numbergame-shell .chat-name{
  font-size:13px;
  flex-shrink:0;
}
.wordgame-shell .wg-bot-tag,
.numbergame-shell .wg-bot-tag,
.wordgame-shell .plat-mini-seal,
.numbergame-shell .plat-mini-seal,
.wordgame-shell .vip-mini-seal,
.numbergame-shell .vip-mini-seal{
  flex-shrink:0;
  transform:scale(.92);
  transform-origin:left center;
}
.wordgame-shell .chat-text,
.numbergame-shell .chat-text{
  order:5;
  flex:1 1 auto;
  min-width:8ch;
  font-size:13.5px;
  line-height:1.35;
  white-space:normal;
}
.wordgame-shell .chat-time,
.numbergame-shell .chat-time{
  order:10;
  margin-left:auto;
  align-self:center;
  font-size:10px;
  flex-shrink:0;
}

.numbergame-shell .chat-shell__hash{
  background:linear-gradient(145deg, #5865F233, #FF5C3922);
  box-shadow:inset 0 0 0 1px #5865F244, 0 0 18px #5865F222;
}
.ng-msg--win .chat-bubble{
  box-shadow:inset 0 0 0 1px #3DDC9755, 0 0 24px #3DDC9722, 0 8px 20px #00000033 !important;
  background:linear-gradient(165deg, #1A2A22, #121A16) !important;
}
.chat-composer input[type=number]{
  -moz-appearance:textfield;
  appearance:textfield;
}
.chat-composer input[type=number]::-webkit-outer-spin-button,
.chat-composer input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

@media (max-width:620px){
  .chat-shell{
    height:calc(100vh - 80px);
    height:calc(100dvh - 80px);
    min-height:0;
    gap:8px;
  }
  .chat-shell__head{ padding:10px 12px; flex-wrap:wrap; }
  /* iOS: input font 16px altındaysa odaklanınca sayfayı zoomlar */
  .chat-composer input{ font-size:16px; }
}

/* ===== MARKET / PROFILE / AUTH ===== */
.market-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px;}
.market-item{
  background:var(--bg-card); border-radius:var(--radius-md); padding:16px; text-align:center;
  box-shadow:inset 0 0 0 1px #ffffff08;
  transition:transform .15s, box-shadow .15s;
}
.market-item:hover{transform:translateY(-3px) rotate(-.4deg); box-shadow:var(--shadow);}
.market-item .m-icon{font-size:30px; margin-bottom:8px;}
.market-item .m-tag{display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:4px; margin-bottom:8px; background:var(--accent-dim); color:#A5ADFF;}
.market-item .m-name{font-size:14px; font-weight:700; margin-bottom:8px; min-height:34px;}
.market-item .m-price{font-family:var(--font-mono); color:var(--gold); margin-bottom:10px;}
.balance-bar{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.balance-chip{background:var(--bg-card); border-radius:10px; padding:12px 14px; display:flex; gap:10px; align-items:center; box-shadow:inset 0 0 0 1px #ffffff08;}
.balance-chip b{font-family:var(--font-mono);}
.balance-chip span{font-size:11px; color:var(--text-faint); text-transform:uppercase;}

.profile-head{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--bg-card); border-radius:var(--radius-lg);
  padding:22px; margin-bottom:18px; box-shadow:inset 0 0 0 1px #ffffff08;
  position:relative; overflow:hidden;
}
.profile-avatar{
  width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:28px; color:#111;
  box-shadow:0 0 0 3px var(--accent-dim);
}
.profile-name{font-family:var(--font-display); font-size:22px; font-weight:800; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.profile-meta-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.profile-meta-row .chip{background:var(--bg-surface); padding:5px 10px; border-radius:999px; font-size:12px; color:var(--text-muted);}
.profile-bio{margin-top:10px; color:var(--text-muted); font-size:14px; max-width:480px;}
.profile-stats{display:flex; gap:20px; margin-left:auto;}
.profile-stats .p-stat{text-align:center;}
.profile-stats .p-stat b{display:block; font-family:var(--font-mono); font-size:18px;}
.profile-stats .p-stat span{font-size:10px; color:var(--text-faint); text-transform:uppercase;}

.auth-wrap{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, #5865F244 0%, transparent 55%),
    var(--bg-deep);
}
.auth-card{
  width:100%; max-width:420px; background:var(--bg-side);
  border-radius:10px; padding:32px; box-shadow:var(--shadow);
}
.auth-card .logo{
  width:48px; height:48px; border-radius:16px;
  background:linear-gradient(145deg,#5865F2,#9B59B6); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:18px; margin-bottom:18px;
}
.auth-card h1{font-family:var(--font-display); font-size:22px; font-weight:800; margin-bottom:6px;}
.auth-card p.sub{color:var(--text-muted); font-size:14px; margin-bottom:22px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase;}
.field .help{font-size:11px; color:var(--text-faint); margin-top:5px;}
.field input[type=text],
.field input[type=password],
.field input[type=email],
.field input[type=url],
.field input[type=search],
.field input[type=number],
.field input[type=datetime-local],
.field textarea,
.field select{
  width:100%;
  background:var(--bg-rail);
  border:1px solid var(--line, #ffffff14);
  border-radius:10px;
  padding:11px 12px;
  font-size:15px;
  font-family:var(--font-body, inherit);
  color:var(--text);
  box-shadow:inset 0 1px 0 #ffffff08;
  transition:box-shadow .15s, border-color .15s, background .15s;
  -webkit-appearance:none;
  appearance:none;
}
/* Dosya seçici — appearance:none tıklamayı bozar, ayrı stil */
.field input[type=file]{
  width:100%;
  display:block;
  box-sizing:border-box;
  background:var(--bg-rail);
  border:1px solid var(--line, #ffffff14);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  font-family:var(--font-body, inherit);
  color:var(--text);
  cursor:pointer;
  box-shadow:inset 0 1px 0 #ffffff08;
}
.field input[type=file]::file-selector-button,
.field input[type=file]::-webkit-file-upload-button{
  margin-right:12px;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg, #FF5C39, #FF3D8A);
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.field input::placeholder,
.field textarea::placeholder{
  color:var(--text-faint);
  opacity:1;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 0 2px var(--accent-dim, #FF5C3933);
  background:#161922;
}
/* Chrome/Safari autofill beyaz arkaplanını engelle */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  box-shadow:0 0 0 1000px var(--bg-rail) inset !important;
  transition:background-color 99999s ease-out;
}
.field textarea{resize:vertical; min-height:70px;}
.auth-card .field input[type=password],
.auth-card .field input[type=email],
.auth-card .field input[type=text]{
  background:#0E1118;
  border-color:#ffffff16;
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.auth-foot{margin-top:16px; font-size:13px; color:var(--text-faint); text-align:center;}
.auth-foot a{color:var(--accent); font-weight:600;}
.pw-wrap{position:relative;}
.pw-wrap button{position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:11px; font-family:var(--font-mono);}

.notice{font-size:13px; padding:12px 14px; border-radius:8px; margin-bottom:14px;}
.notice.ok{background:var(--accent-2-dim); color:#3BA55D;}
.notice.err{background:var(--danger-dim); color:var(--danger);}
.note-box{background:#FEE75C18; color:var(--gold); font-size:13px; padding:12px 14px; border-radius:8px; margin-bottom:18px; line-height:1.5;}

/* ===== PROFİL TEMALARI (galeri önizlemesi — gerçek tema tasarımı aşağıda USER PROFILE bölümünde) ===== */
.theme-badge{
  position:absolute; top:14px; right:16px; font-family:var(--font-mono); font-size:10px;
  background:#00000066; backdrop-filter:blur(4px); padding:4px 10px; border-radius:20px; color:var(--text-muted);
  display:flex; align-items:center; gap:5px; z-index:2;
}

.theme-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.theme-card{border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-card);}
.theme-card .preview{height:120px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(160deg,#232428,#141517);}
.theme-card .preview .p-stage{position:relative; width:88px; height:88px;}
.theme-card .preview .p-avatar{position:absolute; inset:13%; border-radius:50%; background:linear-gradient(135deg,var(--accent-2),#1D9C82); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px; color:#06251F; z-index:1;}
.theme-card .preview .p-stage.frame-platinum .p-avatar{ inset:12%; }
.theme-card .preview .p-stage.frame-vip .p-avatar{ inset:12%; }
.theme-card .preview .p-frame{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; pointer-events:none;}
.theme-card[data-key="platinum"] .preview{ background:linear-gradient(160deg,#1A1C22,#050608); }
.theme-card[data-key="platinum"] .t-price{ color:#C8D0DC; }
.theme-card .body{padding:14px;}
.theme-card .t-name{font-size:13px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:6px;}
.theme-card .t-desc{font-size:11px; color:var(--text-faint); margin-bottom:10px; min-height:28px;}
.theme-card .t-price{font-family:var(--font-mono); font-size:12px; color:var(--gold); margin-bottom:10px;}
.theme-card .t-price.free{color:var(--accent-2);}

/* ===== ADMIN ===== */
.admin-app{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.admin-nav{background:var(--bg-rail); display:flex; flex-direction:column; padding:18px 0;}
.admin-brand{display:flex; align-items:center; gap:10px; padding:0 18px 18px; border-bottom:1px solid var(--line); margin-bottom:12px;}
.admin-brand .logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg,#5865F2,#9B59B6); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:900; font-size:14px;}
.admin-brand b{font-family:var(--font-display); font-size:13px;}
.admin-brand span{display:block; font-size:10px; color:var(--text-faint); text-transform:uppercase;}
.admin-section{padding:6px 12px;}
.admin-label{font-size:10px; letter-spacing:.06em; color:var(--text-faint); text-transform:uppercase; padding:10px 10px 6px; font-weight:700;}
.admin-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text-muted);}
.admin-item:hover{background:var(--bg-hover); color:var(--text);}
.admin-item.active{background:var(--accent-dim); color:#A5ADFF;}
.admin-item .ic{width:18px; text-align:center;}
.admin-back{margin-top:auto; padding:12px 18px 0; border-top:1px solid var(--line);}
.admin-back a{display:flex; gap:8px; font-size:12px; color:var(--text-faint); padding:12px 0 0;}
.admin-back a:hover{color:var(--accent);}
.admin-main{padding:28px 36px 60px; background:var(--bg-surface); overflow-y:auto;}
.page-head{margin-bottom:24px;}
.page-head h1{font-family:var(--font-display); font-size:22px; font-weight:800; margin-bottom:6px;}
.page-head p{color:var(--text-muted); font-size:13px;}
.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:28px;}
.stat-card{background:var(--bg-card); border-radius:var(--radius-md); padding:16px; box-shadow:inset 0 0 0 1px #ffffff08;}
.stat-card .lbl{font-size:10px; letter-spacing:.06em; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px; font-weight:700;}
.stat-card .val{font-family:var(--font-display); font-size:24px; font-weight:800;}
.stat-card .delta{font-size:11px; color:var(--accent-2); margin-top:4px;}
.panel{background:var(--bg-card); border-radius:var(--radius-lg); padding:22px; margin-bottom:22px; box-shadow:inset 0 0 0 1px #ffffff08;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px;}
.panel-head h3{font-size:15px; font-weight:700;}
.panel-head .hint{font-size:12px; color:var(--text-faint);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid #ffffff08; gap:12px;}
.toggle-row:last-child{border-bottom:none;}
.toggle-row .t-label{font-size:13px; font-weight:600;}
.toggle-row .t-desc{font-size:12px; color:var(--text-faint); margin-top:2px;}
.switch{position:relative; width:40px; height:22px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch .slider{position:absolute; inset:0; background:var(--line); border-radius:20px; cursor:pointer;}
.switch .slider::before{content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s;}
.switch input:checked + .slider{background:var(--accent-2);}
.switch input:checked + .slider::before{transform:translateX(18px);}
.list-row{display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-rail); border-radius:8px; margin-bottom:10px; flex-wrap:wrap;}
.list-row .r-icon{width:34px; height:34px; border-radius:8px; background:var(--bg-elevated); display:grid; place-items:center; flex-shrink:0;}
.list-row .r-body{flex:1; min-width:160px;}
.list-row .r-title{font-size:13px; font-weight:700;}
.list-row .r-sub{font-size:11px; color:var(--text-faint); font-family:var(--font-mono);}
.list-row .r-actions{display:flex; gap:6px;}
.list-row .r-actions a,.list-row .r-actions button{background:var(--bg-elevated); color:var(--text-muted); width:28px; height:28px; border-radius:6px; display:inline-grid; place-items:center; border:none;}
.list-row .r-actions a:hover{color:var(--danger);}
.add-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; padding-top:14px; border-top:1px dashed var(--line); margin-top:6px;}
.add-form .field{margin-bottom:0; flex:1; min-width:120px;}
.add-form .field.small{flex:none; width:90px;}
table{width:100%; border-collapse:collapse;}
th{text-align:left; font-size:10px; letter-spacing:.06em; color:var(--text-faint); text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--line); font-weight:700;}
td{padding:10px; border-bottom:1px solid #ffffff08; font-size:13px;}
tr:last-child td{border-bottom:none;}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600;}
.pill.on{background:var(--accent-2-dim); color:var(--accent-2);}
.pill.off{background:var(--line); color:var(--text-faint);}
select.role-select{background:var(--bg-rail); border:none; color:var(--text); border-radius:4px; padding:5px 8px; font-size:12px;}

/* ===== MOBİL ===== */
.admin-topbar{display:none;}
.nav-toggle{display:none;}
.mobile-backdrop{display:none;}

@media (max-width:1180px){
  .app,
  .app.no-right{grid-template-columns:72px 248px 1fr;}
  .right-panel{display:none;}
}
@media (max-width:820px){
  html,body{ overflow-x:hidden; }
  .content,.feed{ overflow-x:hidden; max-width:100%; width:100%; min-width:0; }
  /* iOS: 16px altı input odaklanınca sayfayı zoomlar / kaydırır */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="datetime-local"],
  input:not([type]),
  textarea,
  select{
    font-size:16px !important;
  }
  button, a, .nav-toggle, .icon-btn{ touch-action:manipulation; }
  /* .app.no-right masaüstü 3 kolonunu eziyordu (oyun/profil) — mobilde tek kolon */
  .app,
  .app.no-right{
    grid-template-columns:1fr !important;
    overflow:visible;
  }
  .server-rail{display:none !important;}
  .nav-toggle{
    display:grid; place-items:center; width:40px; height:40px; border-radius:8px;
    background:var(--bg-elevated); flex:none; position:relative; z-index:70;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  .mobile-backdrop{display:none; position:fixed; inset:0; background:#000000A0; z-index:45;}
  .app.nav-open .mobile-backdrop,.admin-app.nav-open .mobile-backdrop{display:block;}
  .channel-sidebar{
    display:flex !important; position:fixed; top:0; left:0; height:100%; height:100dvh;
    width:min(288px, 86vw); max-width:86vw; z-index:60;
    transform:translate3d(-105%,0,0); transition:transform .2s ease;
    overflow:hidden; -webkit-overflow-scrolling:touch;
    pointer-events:auto;
    box-shadow:none;
  }
  .app.nav-open .channel-sidebar{
    transform:translate3d(0,0,0);
    box-shadow:8px 0 32px #00000088;
  }
  .channel-sidebar .channel-list{ overscroll-behavior:contain; }
  .channel-sidebar .channel-item{ min-height:40px; touch-action:manipulation; }
  .topbar .sub{display:none;}
  .search{width:110px;}
  .feed{padding:12px;}
  .chat-shell,
  .wordgame-shell,
  .numbergame-shell{ width:100%; max-width:100%; min-width:0; }
  .chat-wrap{ min-width:0; }
  .post-card{ max-width:100%; overflow:hidden; }
  .post-head{ max-width:100%; }
  .plat-mini-seal, .vip-mini-seal{
    font-size:9px; padding:2px 7px; letter-spacing:.06em;
  }
  .post-who .uname .tag{ display:none; } /* kategori/kanal — satırı taşırıyordu */
  .card-spotlight__cta{flex-direction:column; align-items:stretch;}
  .composer-foot{padding-left:0;}
  .composer-foot .btn-primary{width:100%; margin-left:0;}
  .admin-app{grid-template-columns:1fr;}
  .admin-nav{display:none;}
  .admin-app.nav-open .admin-nav{display:flex !important; position:fixed; inset:0 auto 0 0; width:240px; z-index:50;}
  .admin-topbar{display:flex; align-items:center; gap:12px; height:48px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--bg-surface); position:sticky; top:0; z-index:20;}
  .profile-stats{margin-left:0; width:100%; justify-content:space-between;}
  .profile-head{flex-wrap:wrap;}
  .post-text,
  .post-media,
  .post-spotify,
  .react-bar,
  .comments-panel{ margin-left:0; max-width:100%; width:100%; }
  .post-media{ max-width:100%; width:100%; }
  .post-media img, .post-media video{ max-width:100%; height:auto; }
  .post-spotify{ max-width:100%; width:100%; }
  .post-spotify iframe{ max-width:100%; }
  .react-bar{ max-width:100%; }
}
@media (max-width:480px){
  .search,.icon-btn{display:none;}
  .field-row{grid-template-columns:1fr;}
}

/* ===================================================================== */
/* Kullanıcının Cursor'da tasarladığı Steam/Discord tarzı profil sistemi   */
/* ===================================================================== */
/* ===== USER PROFILE (Steam / Discord) ===== */
.uprofile{
  margin:-18px -18px 0;
  position:relative;
  --theme-accent:#5865F2;
  --theme-accent-2:#EB459E;
  --theme-glow:#EB459E66;
  --theme-card:#1E1F22;
}
.uprofile-ambience{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.amb-glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.22; animation:amb-drift 16s ease-in-out infinite alternate; }
.amb-glow--a{ width:420px; height:420px; left:-8%; top:18%; background:var(--theme-accent); }
.amb-glow--b{ width:360px; height:360px; right:-6%; top:55%; background:var(--theme-accent-2); animation-duration:22s; opacity:.14; }
.amb-dust{
  position:absolute; inset:0; opacity:.45; animation:dust-drift 40s linear infinite;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #ffffff55 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #ffffff44 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 30%, #ffffff33 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, #ffffff40 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 85%, #ffffff30 50%, transparent 51%);
}
@keyframes amb-drift{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(30px,-24px) scale(1.08);} }
@keyframes dust-drift{ to{ transform:translateY(-40px);} }
.uprofile-banner{
  position:relative; height:260px; overflow:hidden;
  border-radius:0 0 18px 18px; isolation:isolate;
}
.uprofile-banner__img{
  position:absolute; inset:-12%;
  background-size:cover; background-position:center;
  animation:banner-drift 22s ease-in-out infinite alternate;
  filter:saturate(1.15) brightness(.78) contrast(1.05);
}
@keyframes banner-drift{
  from{ transform:scale(1.05) translate(0,0); }
  to{ transform:scale(1.14) translate(-2%,1%); }
}
.uprofile-banner__fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.fx-noise{
  position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation:noise-shift 1.2s steps(3) infinite;
}
.fx-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 40%, transparent 20%, #000000aa 100%), linear-gradient(90deg, #00000088, transparent 22%, transparent 78%, #00000088);
}
.fx-grit{
  position:absolute; inset:0; opacity:.18; mix-blend-mode:soft-light;
  background:repeating-linear-gradient(0deg, transparent 0 2px, #ffffff06 2px 3px), repeating-linear-gradient(90deg, transparent 0 3px, #00000008 3px 4px);
}
.fx-orb{ position:absolute; border-radius:50%; filter:blur(44px); opacity:.5; animation:orb-float 10s ease-in-out infinite alternate; }
.fx-orb--1{ width:220px; height:220px; background:var(--theme-accent); left:6%; top:10%; }
.fx-orb--2{ width:170px; height:170px; background:var(--theme-accent-2); right:8%; top:5%; animation-duration:14s; }
.fx-orb--3{ width:130px; height:130px; background:var(--theme-accent); left:42%; bottom:-10%; animation-duration:8s; opacity:.28; }
@keyframes orb-float{ from{ transform:translateY(0) } to{ transform:translateY(-22px) } }
.fx-steam{ position:absolute; width:180px; height:120px; border-radius:50%; background:radial-gradient(ellipse, #ffffff28, transparent 70%); filter:blur(18px); opacity:.35; animation:steam-rise 9s ease-in-out infinite; }
.fx-steam--1{ left:12%; bottom:-30px; }
.fx-steam--2{ right:18%; bottom:-40px; width:220px; animation-delay:3s; animation-duration:12s; }
@keyframes steam-rise{ 0%{ transform:translateY(20px) scale(.9); opacity:0;} 30%{ opacity:.4;} 100%{ transform:translateY(-90px) scale(1.25); opacity:0;} }
.fx-scan{ position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-accent) 70%, #fff), transparent); animation:scan 5.5s linear infinite; opacity:.4; box-shadow:0 0 12px var(--theme-glow); }
@keyframes scan{ from{ top:-5% } to{ top:105% } }
.fx-sparkline{ position:absolute; left:-20%; right:-20%; top:35%; height:1px; background:linear-gradient(90deg, transparent, var(--theme-accent), transparent); opacity:0; filter:blur(1px); animation:sparkline 7s ease-in-out infinite; }
@keyframes sparkline{ 0%,70%,100%{ opacity:0; transform:translateX(-10%) scaleX(.6);} 78%{ opacity:.7; transform:translateX(0) scaleX(1);} 90%{ opacity:0; transform:translateX(15%) scaleX(.8);} }
.fx-sweep,.fx-stripes,.fx-p{ display:none; }
@keyframes noise-shift{ 0%{ transform:translate(0,0);} 33%{ transform:translate(-1%,1%);} 66%{ transform:translate(1%,-1%);} 100%{ transform:translate(0,0);} }
.uprofile-banner__fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--bg-surface) 40%, transparent) 70%, var(--bg-surface) 98%), linear-gradient(0deg, transparent 60%, #00000033 100%);
}

.uprofile-shell{ position:relative; z-index:1; padding:0 18px 48px; margin-top:-84px; }
.uprofile-hero{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:20px; align-items:end;
  margin-bottom:22px;
}
.uprofile-id{ min-width:0; padding-bottom:4px; }
.uprofile-name-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px;
}
.uprofile-name-row h1{
  font-family:var(--font-display); font-size:clamp(24px,3vw,34px);
  font-weight:900; letter-spacing:-.03em; line-height:1;
}
.frame-chip{
  font-size:10px; font-weight:800; text-transform:uppercase;
  background:#00000066; border:1px solid #ffffff22;
  padding:4px 8px; border-radius:999px; color:var(--text-muted);
}
.theme-chip{
  color:#fff; border-color:color-mix(in srgb, var(--theme-accent) 55%, #ffffff22);
  background:color-mix(in srgb, var(--theme-accent) 28%, #00000066);
  box-shadow:0 0 12px var(--theme-glow);
}
.uprofile-status{ color:var(--text-muted); font-size:14px; margin-bottom:12px; }

/* Avatar + frames */
.avatar-stage{
  position:relative;
  width:176px; height:176px;
  flex-shrink:0;
  overflow:visible;
  background:transparent;
  filter:drop-shadow(0 12px 28px #000000cc);
}
.avatar-stage::before{
  content:'';
  position:absolute;
  inset:10%;
  border-radius:50%;
  z-index:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 40%, #ffffff28), transparent 72%);
  filter:blur(7px);
  opacity:.9;
  animation:stage-backlight 3.5s ease-in-out infinite alternate;
}
.avatar-stage.frame-minecraft::before{ border-radius:6px; inset:12%; }
@keyframes stage-backlight{
  from{ opacity:.55; transform:scale(.96); }
  to{ opacity:1; transform:scale(1.05); }
}
.avatar-core{
  position:absolute;
  inset:13%;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:36px; color:#111;
  z-index:1;
  box-shadow:none;
  border:none;
  outline:none;
  overflow:hidden;
}
.avatar-frame-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:2;
  background:transparent !important;
  mix-blend-mode:normal;
  filter:drop-shadow(0 0 1px #ffffff66) drop-shadow(0 2px 6px #000000dd) drop-shadow(0 0 16px var(--theme-glow));
  animation:frame-glow 3.2s ease-in-out infinite;
}
@keyframes frame-glow{
  0%,100%{ filter:drop-shadow(0 0 1px #ffffff44) drop-shadow(0 2px 6px #000000dd) drop-shadow(0 0 10px var(--theme-glow)); }
  50%{ filter:drop-shadow(0 0 2px #ffffff77) drop-shadow(0 2px 6px #000000dd) drop-shadow(0 0 26px var(--theme-glow)); }
}
.frame-ring{
  position:absolute; inset:8%; border-radius:50%;
  z-index:2; pointer-events:none;
}
.frame-ring--gold{
  box-shadow:0 0 0 3px #FEE75C, 0 0 0 7px #B8860B55, 0 0 28px #FEE75C66;
  animation:gold-shine 2.8s ease-in-out infinite;
}
.frame-ring--neon{
  box-shadow:0 0 0 2px #5865F2, 0 0 0 5px #EB459E88, 0 0 30px #5865F2aa;
  animation:neon-flicker 2s ease-in-out infinite;
}
@keyframes gold-shine{
  0%,100%{ box-shadow:0 0 0 3px #FEE75C, 0 0 0 7px #B8860B55, 0 0 20px #FEE75C55; }
  50%{ box-shadow:0 0 0 3px #FFF3A0, 0 0 0 8px #B8860B77, 0 0 36px #FEE75Caa; }
}
@keyframes neon-flicker{
  0%,100%{ opacity:1 } 45%{ opacity:.85 } 50%{ opacity:1 } 55%{ opacity:.7 } 60%{ opacity:1 }
}
.frame-sparkles{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.frame-sparkles::before,.frame-sparkles::after{
  content:'?'; position:absolute; color:#FEE75C;
  font-size:12px; animation:spark 2s ease infinite;
}
.frame-sparkles::before{ top:0; right:8%; }
.frame-sparkles::after{ bottom:6%; left:2%; animation-delay:.6s; }
@keyframes spark{ 50%{ transform:scale(1.4); opacity:.4 } }
.avatar-online{
  position:absolute;
  right:2px; bottom:10px;
  z-index:4;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent-2);
  border:3px solid var(--bg-surface);
  box-shadow:0 0 0 2px #00000066;
}

/* Per-theme avatar insets — ray-measured under rim */
.avatar-stage.frame-pardy .avatar-core{ inset:14%; font-size:36px; }
.avatar-stage.frame-pardy .avatar-online{ right:-2px; bottom:20px; }
.avatar-stage.frame-cs2 .avatar-core{ inset:11.8%; }
.avatar-stage.frame-cs2 .avatar-frame-img{ animation:cs2-dash 4s linear infinite; }
.avatar-stage.frame-minecraft .avatar-core{
  inset:11%;
  border-radius:3px; font-size:30px;
  image-rendering:pixelated;
}
.avatar-stage.frame-minecraft .avatar-frame-img{
  animation:none;
  filter:drop-shadow(0 0 1px #ffffff44) drop-shadow(0 2px 6px #000) drop-shadow(0 4px 12px #000000aa);
  image-rendering:pixelated;
}
.avatar-stage.frame-minecraft .avatar-online{ border-radius:2px; right:6px; bottom:6px; }
.avatar-stage.frame-rust .avatar-core{ inset:11%; }
.avatar-stage.frame-rust .avatar-frame-img{ animation:rust-corrode 3.5s ease-in-out infinite; }
.avatar-stage.frame-fivem .avatar-core{ inset:9.5%; }
.avatar-stage.frame-fivem .avatar-frame-img{ animation:neon-breathe 2.4s ease-in-out infinite; }
.avatar-stage.frame-vip .avatar-core{ inset:11.8%; font-size:38px; }
.avatar-stage.frame-platinum .avatar-core{ inset:12.2%; font-size:38px; }
@keyframes cs2-dash{
  0%,100%{ filter:drop-shadow(0 0 1px #ffffff55) drop-shadow(0 2px 6px #000) drop-shadow(0 0 10px #F0B42888); }
  50%{ filter:drop-shadow(0 0 2px #ffffff77) drop-shadow(0 2px 6px #000) drop-shadow(0 0 24px #F0B428cc); }
}
@keyframes rust-corrode{
  0%,100%{ opacity:1; filter:drop-shadow(0 0 1px #ffffff44) drop-shadow(0 2px 6px #000) drop-shadow(0 0 10px #D3540088); }
  40%{ opacity:.94; }
  70%{ opacity:1; filter:drop-shadow(0 0 2px #ffffff55) drop-shadow(0 2px 6px #000) drop-shadow(0 0 20px #D35400bb); }
}
@keyframes neon-breathe{
  0%,100%{ filter:drop-shadow(0 0 1px #ffffff55) drop-shadow(0 2px 6px #000) drop-shadow(0 0 12px #00E5FF88); }
  50%{ filter:drop-shadow(0 0 2px #ffffff66) drop-shadow(0 2px 6px #000) drop-shadow(0 0 28px #00E5FFcc); }
}
@keyframes vip-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.level-bar{ max-width:360px; margin-bottom:14px; }
.level-bar__label{
  display:flex; justify-content:space-between;
  font-size:11px; font-weight:700; color:var(--text-faint); margin-bottom:5px;
}
.level-bar__track{
  height:8px; border-radius:999px; background:#00000055;
  overflow:hidden; box-shadow:inset 0 0 0 1px #ffffff10;
}
.level-bar__track i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--theme-accent), var(--theme-accent-2));
  background-size:200% 100%;
  animation:xp-flow 3s linear infinite;
}
@keyframes xp-flow{ to{ background-position:200% 0 } }
.theme-minecraft .level-bar__track{ border-radius:0; height:10px; }
.theme-minecraft .level-bar__track i{
  border-radius:0;
  background:repeating-linear-gradient(90deg, #3D8C40 0 8px, #2E6B30 8px 10px);
  animation:none;
}

.uprofile-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.uprofile-quickstats{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--theme-accent) 12%, #1E1F22), #15161a);
  border-radius:16px; padding:14px; min-width:168px; position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 28%, #ffffff0A), 0 12px 32px #00000055;
}
.uprofile-quickstats::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--theme-accent), transparent); opacity:.8; }
.uprofile-quickstats div{ text-align:center; padding:6px 8px; }
.uprofile-quickstats b{ display:block; font-family:var(--font-mono); font-size:17px; color:color-mix(in srgb, var(--theme-accent) 55%, #fff); }
.uprofile-quickstats span{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }

.uprofile-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px;
}
.pcard{
  position:relative;
  background:linear-gradient(165deg, color-mix(in srgb, var(--theme-accent) 8%, #232428) 0%, #1A1B1E 48%, #141517 100%);
  border-radius:16px; padding:18px 18px 16px; margin-bottom:14px; overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 22%, #ffffff0A), 0 10px 28px #00000055;
  transition:transform .18s ease, box-shadow .18s ease;
}
.pcard::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 45%), linear-gradient(120deg, #ffffff06, transparent 35%);
}
.pcard::after{
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-accent) 80%, #fff), transparent); opacity:.55;
}
.pcard:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 40%, #ffffff14), 0 16px 36px #00000066, 0 0 24px var(--theme-glow);
}
.pcard > *{ position:relative; z-index:1; }
.pcard-title{
  font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:color-mix(in srgb, var(--theme-accent) 45%, var(--text-faint));
  margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.pcard-title::before{
  content:''; width:18px; height:2px; border-radius:2px; background:var(--theme-accent); box-shadow:0 0 10px var(--theme-glow);
}
.pcard-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; }
.pcard-head .pcard-title{ margin-bottom:12px; }
.pcard-meta{ font-size:11px; color:var(--text-faint); }

.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.about-item{
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(145deg, #ffffff08, #00000022);
  box-shadow:inset 0 0 0 1px #ffffff0A; transition:background .15s, box-shadow .15s;
}
.about-item:hover{
  background:color-mix(in srgb, var(--theme-accent) 12%, #ffffff08);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 35%, #ffffff14);
}
.about-item span{ display:block; font-size:10px; color:var(--text-faint); text-transform:uppercase; margin-bottom:3px; letter-spacing:.06em; }
.about-item b{ font-size:13px; }
.about-bio{ font-size:14px; color:var(--text-muted); line-height:1.55; border-top:1px solid color-mix(in srgb, var(--theme-accent) 18%, #ffffff08); padding-top:12px; margin-top:4px; }

.game-list{ display:flex; flex-direction:column; gap:8px; }
.game-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px;
  background:linear-gradient(90deg, #00000033, #ffffff06);
  box-shadow:inset 0 0 0 1px #ffffff08;
  transition:background .14s, transform .14s, box-shadow .14s;
}
.game-row:hover{
  background:color-mix(in srgb, var(--theme-accent) 10%, #ffffff08);
  transform:translateX(3px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 30%, #ffffff10);
}
.game-row.is-fav{
  box-shadow:inset 3px 0 0 var(--theme-accent), inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 25%, #ffffff10);
  background:linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 14%, #00000033), #ffffff06);
}
.game-icon{
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--theme-accent) 25%, #404249), #1e1f22);
  display:grid; place-items:center; font-size:22px; flex-shrink:0;
  box-shadow:inset 0 0 0 1px #ffffff14, 0 4px 12px #00000055;
}
.game-info{ flex:1; min-width:0; }
.game-name{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; }
.fav-tag{
  font-size:9px; font-weight:800; text-transform:uppercase;
  background:color-mix(in srgb, var(--theme-accent) 18%, transparent);
  color:var(--theme-accent); padding:2px 6px; border-radius:4px;
}
.game-hours-bar{
  height:4px; border-radius:4px; background:#00000044; margin:6px 0 4px; overflow:hidden;
}
.game-hours-bar i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--theme-accent), var(--theme-accent-2));
}
.game-meta{ display:flex; gap:12px; font-size:11px; color:var(--text-faint); }

.gang-link{ display:block; border-radius:12px; overflow:hidden; margin-bottom:10px; }
.gang-link__banner{ height:56px; }
.gang-link__body{
  display:flex; gap:10px; align-items:center;
  padding:10px; background:var(--bg-surface);
}
.gang-link__icon{ font-size:24px; }
.gang-link__body strong{ display:block; font-family:var(--font-display); font-size:14px; }
.gang-link__body small{ color:var(--text-faint); font-size:11px; }
.gang-desc{ font-size:12px; color:var(--text-muted); line-height:1.45; }

.family-name{
  font-family:var(--font-display); font-size:16px; font-weight:800;
  margin-bottom:10px; color:var(--theme-accent);
  text-shadow:0 0 16px var(--theme-glow);
}
.family-list{ display:flex; flex-direction:column; gap:4px; }
.family-member{
  display:flex; align-items:center; gap:10px;
  padding:7px 6px; border-radius:8px; position:relative;
}
.family-member:hover{ background:var(--bg-hover); }
.fm-av{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--font-display); font-size:11px; font-weight:700; color:#111;
}
.family-member b{ display:block; font-size:13px; }
.family-member small{ font-size:11px; color:var(--text-faint); }
.fm-on{
  margin-left:auto; width:8px; height:8px; border-radius:50%;
  background:var(--accent-2); box-shadow:0 0 0 3px var(--accent-2-dim);
}

.badge-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ubadge{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px; border-radius:12px;
  background:linear-gradient(160deg, #ffffff0A, #00000033);
  box-shadow:inset 0 0 0 1px #ffffff0C;
  font-size:20px;
  transition:transform .15s, box-shadow .15s;
}
.ubadge img{
  width:38px; height:38px; object-fit:contain; display:block;
  filter:drop-shadow(0 3px 6px #00000088);
  transition:transform .15s;
}
.ubadge:hover img{ transform:scale(1.12); }
.ubadge:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 40%, #ffffff14), 0 0 14px var(--theme-glow); }
.ubadge span{ font-size:9px; font-weight:700; text-transform:uppercase; color:var(--text-faint); }
.ubadge--dark{ background:#2A1520; box-shadow:inset 0 0 0 1px #EB459E44; }
.ubadge--gold{ background:#2A2610; box-shadow:inset 0 0 0 1px #FEE75C44; }

/* Theme picker (edit profile) */
.theme-picker{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
}
.theme-opt{
  display:flex; flex-direction:column; gap:8px;
  padding:10px; border-radius:12px; background:var(--bg-rail);
  cursor:pointer; box-shadow:inset 0 0 0 1px #ffffff08;
  transition:box-shadow .15s, background .15s;
}
.theme-opt input{ position:absolute; opacity:0; pointer-events:none; }
.theme-opt.on,.theme-opt:has(input:checked){
  background:color-mix(in srgb, var(--theme-accent, var(--accent)) 16%, var(--bg-rail));
  box-shadow:inset 0 0 0 1px var(--theme-accent, var(--accent));
}
.theme-opt__preview{
  position:relative; width:72px; height:72px; margin:0 auto;
}
.theme-opt__av{
  position:absolute; inset:15%; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:#111; z-index:1;
}
.theme-opt__preview.frame-pardy .theme-opt__av{ inset:14%; }
.theme-opt__preview.frame-cs2 .theme-opt__av{ inset:11.8%; }
.theme-opt__preview.frame-minecraft .theme-opt__av{ border-radius:3px; inset:11%; }
.theme-opt__preview.frame-rust .theme-opt__av{ inset:11%; }
.theme-opt__preview.frame-fivem .theme-opt__av{ inset:9.5%; }
.theme-opt__preview.frame-vip .theme-opt__av{ inset:11.8%; }
.theme-opt__preview.frame-platinum .theme-opt__av{ inset:12.2%; }
.theme-opt__preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2;
}
.theme-opt__meta{ text-align:center; }
.theme-opt__meta b{ display:block; font-size:13px; font-weight:800; }
.theme-opt__meta small{ display:block; font-size:11px; color:var(--text-faint); margin-top:2px; }
.theme-opt--pardy{ --theme-accent:#EB459E; }
.theme-opt--cs2{ --theme-accent:#F0B428; }
.theme-opt--minecraft{ --theme-accent:#3D8C40; }
.theme-opt--rust{ --theme-accent:#D35400; }
.theme-opt--fivem{ --theme-accent:#00E5FF; }
.theme-opt--vip{ --theme-accent:#E8C547; }
.theme-opt--platinum{ --theme-accent:#C8D0DC; }

.frame-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.frame-opt{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:8px; background:var(--bg-rail);
  cursor:pointer; font-size:13px; font-weight:650; color:var(--text-muted);
  box-shadow:inset 0 0 0 1px #ffffff08;
}
.frame-opt input{ accent-color:var(--accent); }
.frame-opt.on,.frame-opt:has(input:checked){
  color:var(--text); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-dim);
}

.uprofile-posts .post-card{ margin-bottom:10px; }

/* ========== THEME PACKS ========== */
.theme-pardy{
  --theme-accent:#9B59B6;
  --theme-accent-2:#EB459E;
  --theme-glow:#EB459E88;
}
.theme-pardy .fx-orb--1{ background:#9B59B6; }
.theme-pardy .fx-orb--2{ background:#EB459E; }
.theme-pardy .fx-orb--3{ background:#5865F2; }
.theme-pardy .fx-scan{ opacity:.4; background:linear-gradient(90deg, transparent, #EB459E88, transparent); }

.theme-cs2{
  --theme-accent:#F0B428;
  --theme-accent-2:#1a1a1a;
  --theme-glow:#F0B42888;
}
.theme-cs2 .uprofile-banner__img{ filter:saturate(1.05) brightness(.7) contrast(1.1); }
.theme-cs2 .fx-orb--1{ background:#F0B428; opacity:.25; }
.theme-cs2 .fx-orb--2{ background:#3a3a3a; }
.theme-cs2 .fx-orb--3{ background:#F0B428; opacity:.2; }
.theme-cs2 .fx-stripes{
  display:block; position:absolute; inset:-20%;
  background:repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    #F0B42818 14px 22px
  );
  animation:hazard-drift 12s linear infinite;
}
.theme-cs2 .fx-sweep{
  display:block; position:absolute; top:0; bottom:0; width:35%;
  left:-40%;
  background:linear-gradient(90deg, transparent, #ffffff33, transparent);
  animation:flashbang 4.5s ease-in-out infinite;
}
.theme-cs2 .fx-p{ display:block; position:absolute; width:6px; height:6px; border-radius:50%; background:#F0B428; box-shadow:0 0 8px #F0B428; }
.theme-cs2 .fx-p--1{ left:20%; top:30%; animation:radar-blip 2.2s ease-out infinite; }
.theme-cs2 .fx-p--2{ left:70%; top:45%; animation:radar-blip 2.2s ease-out infinite .7s; }
.theme-cs2 .fx-p--3{ left:45%; top:60%; animation:radar-blip 2.2s ease-out infinite 1.2s; }
.theme-cs2 .fx-scan{ display:none; }
.theme-cs2 .avatar-online{ animation:alive-pulse 1.4s ease-in-out infinite; }
@keyframes hazard-drift{ to{ transform:translateX(40px); } }
@keyframes flashbang{
  0%,70%,100%{ opacity:0; transform:translateX(0); }
  75%{ opacity:1; }
  90%{ opacity:0; transform:translateX(280%); }
}
@keyframes radar-blip{
  0%{ transform:scale(.4); opacity:1; }
  100%{ transform:scale(3); opacity:0; }
}
@keyframes alive-pulse{
  0%,100%{ box-shadow:0 0 0 2px #00000066, 0 0 0 0 #23A55900; }
  50%{ box-shadow:0 0 0 2px #00000066, 0 0 0 6px #23A55944; }
}

.theme-minecraft{
  --theme-accent:#3D8C40;
  --theme-accent-2:#8B6914;
  --theme-glow:#3D8C4066;
}
.theme-minecraft .uprofile-banner__img{ filter:saturate(1.2) brightness(.8) contrast(1.05); }
.theme-minecraft .fx-orb--1{ background:#3D8C40; }
.theme-minecraft .fx-orb--2{ background:#8B6914; }
.theme-minecraft .fx-orb--3{ background:#5D8A3E; }
.theme-minecraft .fx-scan{ display:none; }
.theme-minecraft .fx-p{
  display:block; position:absolute; width:12px; height:12px;
  background:#3D8C40; image-rendering:pixelated;
  box-shadow:2px 0 0 #2E6B30 inset, 0 2px 0 #00000044;
  animation:block-hop 2.4s steps(4) infinite;
}
.theme-minecraft .fx-p--1{ left:15%; top:70%; background:#8B6914; animation-delay:0s; }
.theme-minecraft .fx-p--2{ left:40%; top:55%; animation-delay:.3s; }
.theme-minecraft .fx-p--3{ left:65%; top:75%; background:#5D4037; animation-delay:.6s; }
.theme-minecraft .fx-p--4{ left:80%; top:40%; animation-delay:.9s; }
.theme-minecraft .pcard{ border-radius:4px; }
.theme-minecraft .uprofile-quickstats{ border-radius:4px; }
@keyframes block-hop{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-18px); }
  100%{ transform:translateY(0); }
}

.theme-rust{
  --theme-accent:#D35400;
  --theme-accent-2:#1ABC9C;
  --theme-glow:#D3540088;
}
.theme-rust .uprofile-banner__img{ filter:saturate(1.15) brightness(.72) sepia(.15); }
.theme-rust .fx-orb--1{ background:#D35400; }
.theme-rust .fx-orb--2{ background:#1ABC9C; opacity:.3; }
.theme-rust .fx-orb--3{ background:#8B4513; }
.theme-rust .fx-sweep{
  display:block; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 80%, #D3540022, transparent 60%);
  animation:heat-haze 3s ease-in-out infinite alternate;
}
.theme-rust .fx-p{
  display:block; position:absolute; width:4px; height:4px; border-radius:50%;
  background:#ff6a00; box-shadow:0 0 6px #ff6a00;
  animation:ember-rise 3.5s linear infinite;
}
.theme-rust .fx-p--1{ left:25%; bottom:0; animation-duration:3.2s; }
.theme-rust .fx-p--2{ left:48%; bottom:0; animation-duration:4s; animation-delay:.5s; }
.theme-rust .fx-p--3{ left:70%; bottom:0; animation-duration:2.8s; animation-delay:1s; }
.theme-rust .fx-p--4{ left:58%; bottom:0; animation-duration:3.6s; animation-delay:1.5s; width:3px; height:3px; }
.theme-rust .fx-scan{ opacity:.2; }
@keyframes ember-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translateY(-180px) translateX(12px); opacity:0; }
}
@keyframes heat-haze{
  from{ opacity:.4; transform:scale(1); }
  to{ opacity:.7; transform:scale(1.05); }
}

.theme-fivem{
  --theme-accent:#00E5FF;
  --theme-accent-2:#1A237E;
  --theme-glow:#00E5FF88;
}
.theme-fivem .uprofile-banner__img{ filter:saturate(1.25) brightness(.65) hue-rotate(-10deg); }
.theme-fivem .fx-orb--1{ background:#00E5FF; opacity:.35; }
.theme-fivem .fx-orb--2{ background:#7C4DFF; opacity:.4; }
.theme-fivem .fx-orb--3{ background:#00BCD4; }
.theme-fivem .fx-p{
  display:block; position:absolute; width:8px; height:8px; border-radius:50%;
  background:#00E5FF; filter:blur(2px); opacity:.7;
  animation:bokeh-drift 8s ease-in-out infinite alternate;
}
.theme-fivem .fx-p--1{ left:18%; top:40%; width:14px; height:14px; }
.theme-fivem .fx-p--2{ left:55%; top:25%; background:#7C4DFF; animation-duration:10s; }
.theme-fivem .fx-p--3{ left:75%; top:55%; width:10px; height:10px; animation-duration:7s; }
.theme-fivem .fx-p--4{ left:35%; top:70%; background:#FF4081; width:6px; height:6px; }
.theme-fivem .fx-sweep{
  display:block; position:absolute; top:40%; height:3px; left:-30%; width:40%;
  background:linear-gradient(90deg, transparent, #00E5FFaa, transparent);
  box-shadow:0 0 12px #00E5FF;
  animation:city-bar 5s linear infinite;
}
.theme-fivem .fx-scan{ opacity:.25; background:linear-gradient(90deg, transparent, #00E5FF66, transparent); }
@keyframes bokeh-drift{
  from{ transform:translate(0,0); }
  to{ transform:translate(12px,-10px); }
}
@keyframes city-bar{
  from{ left:-40%; }
  to{ left:110%; }
}

/* ===== VIP PRESTIGE (paid tier exclusives) ===== */
.fx-vip-rays,.fx-vip-foil{ display:none; }
.vip-crown,.vip-aura,.vip-gems,.vip-seal,.vip-tagline{ display:none; }

.theme-vip{
  --theme-accent:#F0D060;
  --theme-accent-2:#FFF3A0;
  --theme-glow:#E8C547cc;
}
.theme-vip .uprofile-banner__img{
  filter:saturate(1.2) brightness(.62) contrast(1.12) sepia(.12);
}
.theme-vip .fx-orb--1{ background:#E8C547; opacity:.38; width:260px; height:260px; }
.theme-vip .fx-orb--2{ background:#FFF3A0; opacity:.28; }
.theme-vip .fx-orb--3{ background:#B8860B; opacity:.32; }
.theme-vip .fx-sweep{
  display:block; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 20%, #E8C54744, transparent 48%),
    radial-gradient(ellipse at 20% 80%, #FFF3A022, transparent 40%),
    radial-gradient(ellipse at 80% 60%, #B8860B33, transparent 42%);
  animation:vip-spotlight 5s ease-in-out infinite alternate;
}
.theme-vip .fx-vip-rays{
  display:block; position:absolute; inset:-20%;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0 8%, #E8C54718 9%, transparent 12%, transparent 28%, #FFF3A014 29%, transparent 32%, transparent 55%, #E8C54712 56%, transparent 60%);
  animation:vip-rays 28s linear infinite;
  mix-blend-mode:screen; opacity:.7;
}
.theme-vip .fx-vip-foil{
  display:block; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, #ffffff28 48%, #E8C54755 50%, #ffffff22 52%, transparent 70%);
  background-size:220% 100%;
  animation:vip-foil 7s ease-in-out infinite;
  mix-blend-mode:overlay; opacity:.55;
}
.theme-vip .fx-p{
  display:block; position:absolute; width:3px; height:3px; border-radius:50%;
  background:#FFF3A0; box-shadow:0 0 8px #E8C547, 0 0 14px #fff;
  animation:gold-dust 4s linear infinite;
}
.theme-vip .fx-p--1{ left:14%; top:82%; }
.theme-vip .fx-p--2{ left:38%; top:68%; animation-delay:.7s; animation-duration:5.2s; width:4px; height:4px; }
.theme-vip .fx-p--3{ left:62%; top:86%; animation-delay:1.4s; }
.theme-vip .fx-p--4{ left:78%; top:58%; animation-delay:.3s; animation-duration:3.8s; }
.theme-vip .fx-p--5{ left:28%; top:48%; animation-delay:2s; width:2px; height:2px; display:block; }
.theme-vip .fx-p--6{ left:88%; top:72%; animation-delay:2.5s; display:block; }
.theme-vip .fx-scan{
  height:56px; opacity:.22;
  background:linear-gradient(90deg, transparent, #E8C547aa, #fff8, #E8C547aa, transparent);
  animation:shimmer-streak 5.5s ease-in-out infinite;
}
.theme-vip .amb-glow--a{ opacity:.32; filter:blur(90px); }
.theme-vip .amb-glow--b{ opacity:.22; background:#FFF3A0; }

/* VIP name shimmer */
.theme-vip .vip-name{
  display:inline-block;
  background:linear-gradient(100deg, #B8860B 0%, #FFF3A0 28%, #E8C547 50%, #FFF8DC 72%, #B8860B 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important;
  animation:vip-name-shine 4s linear infinite;
  filter:drop-shadow(0 0 12px #E8C54788);
  font-size:clamp(26px,3.4vw,40px);
}
.theme-vip .vip-seal{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:900; letter-spacing:.12em;
  padding:5px 10px; border-radius:999px;
  color:#1a1408;
  background:linear-gradient(135deg, #FFF3A0, #E8C547 45%, #B8860B);
  box-shadow:0 0 0 1px #fff6, 0 0 18px #E8C547aa, 0 4px 12px #00000066;
  animation:vip-seal-pulse 2.4s ease-in-out infinite;
}
.theme-vip .vip-tagline{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#E8C547; margin:-2px 0 10px;
  text-shadow:0 0 12px #E8C54766;
}
.theme-vip .vip-tagline::before{ content:'✦ '; }

/* VIP avatar crown + aura + gems */
.theme-vip .vip-crown{
  display:grid; place-items:center;
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  z-index:5; width:36px; height:28px;
  font-size:22px; line-height:1; color:#E8C547;
  filter:drop-shadow(0 0 8px #E8C547) drop-shadow(0 4px 8px #000);
  animation:vip-crown-bob 2.8s ease-in-out infinite;
}
.theme-vip .vip-aura{
  display:block; position:absolute; inset:4%; border-radius:50%;
  z-index:0; pointer-events:none;
  border:1px solid #E8C54755;
  box-shadow:0 0 0 1px #fff2, 0 0 24px #E8C54766, inset 0 0 20px #E8C54722;
  animation:vip-aura-spin 14s linear infinite;
}
.theme-vip .vip-aura--slow{
  inset:-2%; opacity:.55;
  border-style:dashed; border-color:#FFF3A066;
  animation-duration:22s; animation-direction:reverse;
}
.theme-vip .vip-gems{ display:block; position:absolute; inset:0; z-index:3; pointer-events:none; }
.theme-vip .vip-gems i{
  position:absolute; width:7px; height:7px;
  background:linear-gradient(135deg,#fff,#E8C547);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 8px #E8C547;
  animation:vip-gem-twinkle 2.2s ease-in-out infinite;
}
.theme-vip .vip-gems i:nth-child(1){ top:2%; left:48%; }
.theme-vip .vip-gems i:nth-child(2){ top:48%; right:2%; animation-delay:.4s; }
.theme-vip .vip-gems i:nth-child(3){ bottom:4%; left:48%; animation-delay:.8s; }
.theme-vip .vip-gems i:nth-child(4){ top:48%; left:2%; animation-delay:1.2s; }
.theme-vip .frame-sparkles{ display:block; }
.theme-vip .frame-sparkles::before,.theme-vip .frame-sparkles::after{
  content:'✦'; color:#FFF3A0; font-size:14px;
  text-shadow:0 0 10px #E8C547;
}
.theme-vip .avatar-online--vip,
.theme-vip .avatar-online{
  background:linear-gradient(145deg,#FFF3A0,#E8C547);
  border-color:#1a1408;
  box-shadow:0 0 0 2px #E8C54788, 0 0 12px #E8C547;
  animation:vip-pip 1.8s ease-in-out infinite;
}
.theme-vip .avatar-frame-img{
  animation:vip-frame-glow 3s ease-in-out infinite;
}

/* VIP XP bar */
.theme-vip .level-bar--vip .level-bar__track{
  height:12px;
  background:linear-gradient(180deg,#1a1408,#000);
  box-shadow:inset 0 0 0 1px #E8C54755, 0 0 20px #E8C54744;
}
.theme-vip .level-bar--vip .level-bar__track i{
  background:linear-gradient(90deg,#8B6914,#E8C547,#FFF3A0,#E8C547,#B8860B);
  background-size:300% 100%;
  animation:vip-xp 2.4s linear infinite;
  box-shadow:0 0 16px #E8C547;
}
.theme-vip .level-bar--vip .level-bar__label span:first-child{ color:#E8C547; }

/* VIP holographic cards */
.theme-vip .pcard{
  background:
    linear-gradient(145deg, #2a2410 0%, #1a160c 40%, #12100a 100%);
  box-shadow:
    inset 0 0 0 1px #E8C54755,
    0 12px 32px #00000077,
    0 0 28px #E8C54722;
}
.theme-vip .pcard::before{
  background:
    linear-gradient(120deg, transparent 20%, #ffffff18 40%, #E8C54733 50%, #ffffff14 60%, transparent 80%),
    radial-gradient(ellipse at 0% 0%, #E8C54733, transparent 50%);
  background-size:220% 100%, auto;
  animation:vip-holo 6s ease-in-out infinite;
}
.theme-vip .pcard::after{
  height:2px; opacity:.9;
  background:linear-gradient(90deg, transparent, #FFF3A0, #E8C547, #FFF3A0, transparent);
  box-shadow:0 0 12px #E8C547;
}
.theme-vip .pcard:hover{
  box-shadow:
    inset 0 0 0 1px #FFF3A0aa,
    0 18px 40px #00000088,
    0 0 36px #E8C54766;
}
.theme-vip .uprofile-quickstats{
  background:linear-gradient(160deg, #3a3010, #1a1608);
  box-shadow:inset 0 0 0 1px #E8C54766, 0 12px 32px #00000066, 0 0 24px #E8C54733;
}
.theme-vip .uprofile-quickstats::before{
  height:3px;
  background:linear-gradient(90deg, transparent, #FFF3A0, #E8C547, #FFF3A0, transparent);
  box-shadow:0 0 10px #E8C547;
}
.theme-vip .uprofile-quickstats b{ color:#FFF3A0; text-shadow:0 0 10px #E8C54766; }
.theme-vip .game-row.is-fav{
  background:linear-gradient(90deg, #E8C54728, #ffffff08);
  box-shadow:inset 3px 0 0 #E8C547, inset 0 0 0 1px #E8C54744;
}
.theme-vip .ubadge--vip{
  background:linear-gradient(160deg, #4a3c10, #1a1408);
  box-shadow:inset 0 0 0 1px #E8C54788, 0 0 16px #E8C54744;
  color:#E8C547;
  animation:vip-seal-pulse 3s ease-in-out infinite;
}
.theme-vip .family-name{ color:#E8C547; text-shadow:0 0 18px #E8C54788; }
.theme-vip .btn-primary{
  background:linear-gradient(135deg, #E8C547, #B8860B);
  color:#1a1408; font-weight:800;
  box-shadow:0 0 20px #E8C54755;
}
.theme-vip .btn-primary:hover{ filter:brightness(1.08); box-shadow:0 0 28px #E8C54788; }

/* ===== PLATINUM ELITE (above VIP — obsidian / cold metal) ===== */
.fx-plat-rays,.fx-plat-foil{ display:none; }
.plat-crown,.plat-aura,.plat-gems,.plat-seal{ display:none; }

.theme-platinum{
  --theme-accent:#E8EEF5;
  --theme-accent-2:#9AA3B2;
  --theme-glow:#C8D0DCaa;
}
.theme-platinum .uprofile-banner__img{
  filter:saturate(.55) brightness(.42) contrast(1.2) grayscale(.35);
}
.theme-platinum .fx-orb--1{ background:#E8EEF5; opacity:.28; width:280px; height:280px; }
.theme-platinum .fx-orb--2{ background:#6A7384; opacity:.32; }
.theme-platinum .fx-orb--3{ background:#C8D0DC; opacity:.22; }
.theme-platinum .fx-sweep{
  display:block; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 15%, #ffffff22, transparent 42%),
    radial-gradient(ellipse at 15% 85%, #9AA3B228, transparent 40%),
    radial-gradient(ellipse at 85% 55%, #E8EEF518, transparent 45%),
    linear-gradient(180deg, #00000088 0%, transparent 40%, #000000aa 100%);
  animation:plat-spotlight 6s ease-in-out infinite alternate;
}
.theme-platinum .fx-plat-rays{
  display:block; position:absolute; inset:-25%;
  background:conic-gradient(from 20deg at 50% 50%, transparent 0 6%, #ffffff10 7%, transparent 10%, transparent 24%, #C8D0DC14 25%, transparent 28%, transparent 50%, #ffffff0C 51%, transparent 55%);
  animation:plat-rays 36s linear infinite;
  mix-blend-mode:screen; opacity:.85;
}
.theme-platinum .fx-plat-foil{
  display:block; position:absolute; inset:0;
  background:linear-gradient(125deg, transparent 25%, #ffffff18 46%, #C8D0DC44 50%, #ffffff14 54%, transparent 72%);
  background-size:240% 100%;
  animation:plat-foil 8s ease-in-out infinite;
  mix-blend-mode:overlay; opacity:.65;
}
.theme-platinum .fx-p{
  display:block; position:absolute; width:3px; height:3px; border-radius:50%;
  background:#E8EEF5; box-shadow:0 0 10px #fff, 0 0 16px #C8D0DC;
  animation:plat-dust 4.6s linear infinite;
}
.theme-platinum .fx-p--1{ left:12%; top:78%; }
.theme-platinum .fx-p--2{ left:36%; top:62%; animation-delay:.6s; width:4px; height:4px; }
.theme-platinum .fx-p--3{ left:58%; top:84%; animation-delay:1.2s; }
.theme-platinum .fx-p--4{ left:80%; top:52%; animation-delay:.2s; animation-duration:3.6s; }
.theme-platinum .fx-p--5{ left:24%; top:40%; animation-delay:1.8s; width:2px; height:2px; display:block; }
.theme-platinum .fx-p--6{ left:90%; top:70%; animation-delay:2.4s; display:block; }
.theme-platinum .fx-scan{
  height:64px; opacity:.28;
  background:linear-gradient(90deg, transparent, #9AA3B2aa, #fff8, #9AA3B2aa, transparent);
  animation:shimmer-streak 4.8s ease-in-out infinite;
}
.theme-platinum .amb-glow--a{ opacity:.28; filter:blur(100px); background:#C8D0DC; }
.theme-platinum .amb-glow--b{ opacity:.18; background:#E8EEF5; }

.theme-platinum .plat-name{
  display:inline-block;
  background:linear-gradient(100deg, #6A7384 0%, #E8EEF5 26%, #fff 48%, #C8D0DC 70%, #6A7384 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important;
  animation:plat-name-shine 3.6s linear infinite;
  filter:drop-shadow(0 0 14px #C8D0DC99);
  font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.03em;
}
.theme-platinum .plat-seal{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:900; letter-spacing:.14em;
  padding:6px 12px; border-radius:999px;
  color:#0A0B0E;
  background:linear-gradient(135deg, #fff, #C8D0DC 40%, #8A93A0 100%);
  box-shadow:0 0 0 1px #fff8, 0 0 22px #C8D0DCaa, 0 4px 14px #00000088;
  animation:plat-seal-pulse 2.2s ease-in-out infinite;
}
.theme-platinum .plat-crown{
  display:grid; place-items:center;
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  z-index:5; width:34px; height:28px;
  font-size:18px; line-height:1; color:#E8EEF5;
  filter:drop-shadow(0 0 10px #fff) drop-shadow(0 4px 10px #000);
  animation:plat-crown-bob 2.6s ease-in-out infinite;
}
.theme-platinum .plat-aura{
  display:block; position:absolute; inset:2%; border-radius:50%;
  z-index:0; pointer-events:none;
  border:1px solid #E8EEF555;
  box-shadow:0 0 0 1px #fff2, 0 0 28px #C8D0DC66, inset 0 0 24px #ffffff18;
  animation:plat-aura-spin 12s linear infinite;
}
.theme-platinum .plat-aura--slow{
  inset:-4%; opacity:.6;
  border-style:dotted; border-color:#9AA3B288;
  animation-duration:20s; animation-direction:reverse;
}
.theme-platinum .plat-gems{ display:block; position:absolute; inset:0; z-index:3; pointer-events:none; }
.theme-platinum .plat-gems i{
  position:absolute; width:8px; height:8px;
  background:linear-gradient(135deg,#fff,#9AA3B2);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 10px #fff;
  animation:plat-gem-twinkle 1.8s ease-in-out infinite;
}
.theme-platinum .plat-gems i:nth-child(1){ top:0%; left:48%; }
.theme-platinum .plat-gems i:nth-child(2){ top:24%; right:4%; animation-delay:.25s; }
.theme-platinum .plat-gems i:nth-child(3){ top:48%; right:0%; animation-delay:.5s; }
.theme-platinum .plat-gems i:nth-child(4){ bottom:2%; left:48%; animation-delay:.75s; }
.theme-platinum .plat-gems i:nth-child(5){ top:48%; left:0%; animation-delay:1s; }
.theme-platinum .plat-gems i:nth-child(6){ top:24%; left:4%; animation-delay:1.25s; }
.theme-platinum .frame-sparkles--plat{ display:block; }
.theme-platinum .frame-sparkles--plat::before,
.theme-platinum .frame-sparkles--plat::after{
  content:'◆'; color:#E8EEF5; font-size:12px;
  text-shadow:0 0 12px #fff;
}
.theme-platinum .avatar-online--plat,
.theme-platinum .avatar-online{
  background:linear-gradient(145deg,#fff,#9AA3B2);
  border-color:#0A0B0E;
  box-shadow:0 0 0 2px #C8D0DC88, 0 0 14px #E8EEF5;
  animation:plat-pip 1.6s ease-in-out infinite;
}
.theme-platinum .avatar-frame-img{
  animation:plat-frame-glow 2.8s ease-in-out infinite;
  filter:drop-shadow(0 0 12px #C8D0DC88);
}

.theme-platinum .level-bar--plat .level-bar__track{
  height:13px;
  background:linear-gradient(180deg,#0A0B0E,#000);
  box-shadow:inset 0 0 0 1px #C8D0DC66, 0 0 24px #C8D0DC44;
}
.theme-platinum .level-bar--plat .level-bar__track i{
  background:linear-gradient(90deg,#4A5160,#C8D0DC,#fff,#C8D0DC,#6A7384);
  background-size:300% 100%;
  animation:plat-xp 2s linear infinite;
  box-shadow:0 0 18px #E8EEF5;
}
.theme-platinum .level-bar--plat .level-bar__label span:first-child{ color:#E8EEF5; }

.theme-platinum .pcard{
  background:
    linear-gradient(145deg, #1A1C22 0%, #0C0D10 42%, #060708 100%);
  box-shadow:
    inset 0 0 0 1px #C8D0DC55,
    0 14px 36px #00000099,
    0 0 32px #C8D0DC22;
}
.theme-platinum .pcard::before{
  background:
    linear-gradient(120deg, transparent 15%, #ffffff20 38%, #C8D0DC44 50%, #ffffff18 62%, transparent 85%),
    radial-gradient(ellipse at 0% 0%, #ffffff22, transparent 48%);
  background-size:240% 100%, auto;
  animation:plat-holo 5s ease-in-out infinite;
}
.theme-platinum .pcard::after{
  height:2px; opacity:1;
  background:linear-gradient(90deg, transparent, #fff, #C8D0DC, #fff, transparent);
  box-shadow:0 0 14px #E8EEF5;
}
.theme-platinum .pcard:hover{
  box-shadow:
    inset 0 0 0 1px #E8EEF5aa,
    0 20px 44px #000000aa,
    0 0 40px #C8D0DC66;
}
.theme-platinum .uprofile-quickstats{
  background:linear-gradient(160deg, #2A2E38, #0C0D10);
  box-shadow:inset 0 0 0 1px #C8D0DC66, 0 12px 32px #00000077, 0 0 28px #C8D0DC33;
}
.theme-platinum .uprofile-quickstats::before{
  height:3px;
  background:linear-gradient(90deg, transparent, #fff, #C8D0DC, #fff, transparent);
  box-shadow:0 0 12px #E8EEF5;
}
.theme-platinum .uprofile-quickstats b{ color:#E8EEF5; text-shadow:0 0 12px #C8D0DC88; }
.theme-platinum .game-row.is-fav{
  background:linear-gradient(90deg, #C8D0DC28, #ffffff08);
  box-shadow:inset 3px 0 0 #E8EEF5, inset 0 0 0 1px #C8D0DC44;
}
.theme-platinum .ubadge--plat{
  background:linear-gradient(160deg, #2A2E38, #0A0B0E);
  box-shadow:inset 0 0 0 1px #E8EEF588, 0 0 18px #C8D0DC55;
  color:#E8EEF5;
  animation:plat-seal-pulse 2.6s ease-in-out infinite;
}
.theme-platinum .family-name{ color:#E8EEF5; text-shadow:0 0 20px #C8D0DCaa; }
.theme-platinum .btn-primary{
  background:linear-gradient(135deg, #E8EEF5, #8A93A0);
  color:#0A0B0E; font-weight:900;
  box-shadow:0 0 24px #C8D0DC66;
}
.theme-platinum .btn-primary:hover{ filter:brightness(1.1); box-shadow:0 0 32px #E8EEF588; }

@keyframes plat-rays{ to{ transform:rotate(360deg); } }
@keyframes plat-foil{
  0%{ background-position:130% 0; }
  100%{ background-position:-50% 0; }
}
@keyframes plat-name-shine{ to{ background-position:220% center; } }
@keyframes plat-seal-pulse{
  0%,100%{ box-shadow:0 0 0 1px #fff6, 0 0 16px #C8D0DC77, 0 4px 12px #0008; transform:scale(1); }
  50%{ box-shadow:0 0 0 1px #fff9, 0 0 28px #E8EEF5cc, 0 4px 12px #0008; transform:scale(1.05); }
}
@keyframes plat-crown-bob{
  0%,100%{ transform:translateX(-50%) translateY(0) rotate(0deg); }
  50%{ transform:translateX(-50%) translateY(-6px) rotate(8deg); }
}
@keyframes plat-aura-spin{ to{ transform:rotate(360deg); } }
@keyframes plat-gem-twinkle{
  0%,100%{ opacity:.35; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.15); }
}
@keyframes plat-pip{
  0%,100%{ box-shadow:0 0 0 2px #C8D0DC66, 0 0 8px #E8EEF5; }
  50%{ box-shadow:0 0 0 3px #C8D0DCaa, 0 0 16px #fff; }
}
@keyframes plat-frame-glow{
  0%,100%{ filter:drop-shadow(0 0 8px #C8D0DC66); }
  50%{ filter:drop-shadow(0 0 20px #E8EEF5aa); }
}
@keyframes plat-xp{ to{ background-position:300% 0; } }
@keyframes plat-holo{
  0%{ background-position:120% 0, 0 0; opacity:.55; }
  50%{ opacity:.9; }
  100%{ background-position:-40% 0, 0 0; opacity:.55; }
}
@keyframes plat-spotlight{
  from{ opacity:.75; transform:scale(1); }
  to{ opacity:1; transform:scale(1.04); }
}
@keyframes plat-dust{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  20%{ opacity:1; }
  100%{ transform:translateY(-70px) scale(.4); opacity:0; }
}

@keyframes vip-rays{ to{ transform:rotate(360deg); } }
@keyframes vip-foil{
  0%{ background-position:120% 0; }
  100%{ background-position:-40% 0; }
}
@keyframes vip-name-shine{ to{ background-position:220% center; } }
@keyframes vip-seal-pulse{
  0%,100%{ box-shadow:0 0 0 1px #fff6, 0 0 14px #E8C54777, 0 4px 12px #0006; transform:scale(1); }
  50%{ box-shadow:0 0 0 1px #fff8, 0 0 24px #E8C547cc, 0 4px 12px #0006; transform:scale(1.04); }
}
@keyframes vip-crown-bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(-5px); }
}
@keyframes vip-aura-spin{ to{ transform:rotate(360deg); } }
@keyframes vip-gem-twinkle{
  0%,100%{ opacity:.55; transform:scale(.85) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.25) rotate(20deg); }
}
@keyframes vip-pip{
  0%,100%{ box-shadow:0 0 0 2px #E8C54766, 0 0 8px #E8C54788; }
  50%{ box-shadow:0 0 0 4px #E8C54744, 0 0 18px #E8C547; }
}
@keyframes vip-frame-glow{
  0%,100%{ filter:drop-shadow(0 0 2px #fff6) drop-shadow(0 2px 6px #000) drop-shadow(0 0 14px #E8C54788); }
  50%{ filter:drop-shadow(0 0 3px #fff8) drop-shadow(0 2px 6px #000) drop-shadow(0 0 28px #E8C547cc); }
}
@keyframes vip-xp{ to{ background-position:300% 0; } }
@keyframes vip-holo{
  0%{ background-position:0% 0, 0 0; opacity:.85; }
  50%{ background-position:100% 0, 0 0; opacity:1; }
  100%{ background-position:200% 0, 0 0; opacity:.85; }
}
@keyframes vip-spotlight{
  from{ opacity:.65; }
  to{ opacity:1; }
}
@keyframes gold-dust{
  0%{ transform:translateY(0) scale(1); opacity:0; }
  18%{ opacity:1; }
  100%{ transform:translateY(-140px) translateX(22px) scale(.35); opacity:0; }
}
@keyframes shimmer-streak{
  0%{ top:-25%; opacity:0; }
  28%{ opacity:.28; }
  100%{ top:115%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .theme-vip .vip-crown,.theme-vip .vip-aura,.theme-vip .vip-gems i,
  .theme-vip .vip-name,.theme-vip .vip-seal,.theme-vip .fx-vip-rays,
  .theme-vip .fx-vip-foil,.theme-vip .pcard::before,
  .theme-platinum .plat-crown,.theme-platinum .plat-aura,.theme-platinum .plat-gems i,
  .theme-platinum .plat-name,.theme-platinum .plat-seal,.theme-platinum .fx-plat-rays,
  .theme-platinum .fx-plat-foil,.theme-platinum .pcard::before{ animation:none !important; }
}

/* Preview theme switcher */
.theme-switcher{
  position:sticky; top:8px; z-index:20;
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 10px; margin-bottom:12px;
  background:#00000088; backdrop-filter:blur(8px);
  border-radius:10px; box-shadow:inset 0 0 0 1px #ffffff14;
}
.theme-switcher button{
  border:0; cursor:pointer; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
  padding:6px 10px; border-radius:7px;
  background:#ffffff10; color:#fff; font-family:var(--font-display);
}
.theme-switcher button.on{
  background:#FEE75C;
  color:#111;
}


.theme-pardy .fx-p{ display:block; position:absolute; width:3px; height:3px; border-radius:50%; background:#EB459E; box-shadow:0 0 8px #EB459E; animation:pardy-mote 5s linear infinite; }
.theme-pardy .fx-p--1{ left:18%; top:70%; }
.theme-pardy .fx-p--2{ left:40%; top:55%; animation-delay:1s; }
.theme-pardy .fx-p--3{ left:62%; top:75%; animation-delay:2s; }
.theme-pardy .fx-p--4{ left:78%; top:40%; animation-delay:3s; }
.theme-pardy .fx-p--5{ left:28%; top:35%; animation-delay:1.5s; width:2px; height:2px; }
.theme-pardy .fx-p--6{ left:55%; top:25%; animation-delay:2.5s; }
@keyframes pardy-mote{ 0%{ transform:translateY(10px); opacity:0;} 20%{ opacity:1;} 100%{ transform:translateY(-100px) translateX(12px); opacity:0;} }
.theme-cs2 .fx-p--4,.theme-cs2 .fx-p--5{ display:block; position:absolute; border-radius:50%; background:#F0B428; box-shadow:0 0 10px #F0B428; animation:radar-blip 2.2s ease-out infinite; }
.theme-cs2 .fx-p--4{ left:80%; top:22%; width:5px; height:5px; animation-delay:1.6s; }
.theme-cs2 .fx-p--5{ left:30%; top:70%; width:4px; height:4px; animation-delay:2s; }
.theme-minecraft .fx-p--5,.theme-minecraft .fx-p--6{ display:block; position:absolute; image-rendering:pixelated; animation:block-hop 2.6s steps(5) infinite; box-shadow:inset -2px -2px 0 #00000055; }
.theme-minecraft .fx-p--5{ left:24%; top:40%; width:10px; height:10px; animation-delay:1.1s; background:#F0E68C; }
.theme-minecraft .fx-p--6{ left:70%; top:58%; width:10px; height:10px; animation-delay:1.4s; background:#3D8C40; }
.theme-rust .fx-p--5,.theme-rust .fx-p--6{ display:block; position:absolute; border-radius:50%; background:#ff6a00; box-shadow:0 0 8px #ff6a00; bottom:0; animation:ember-rise 3.8s linear infinite; }
.theme-rust .fx-p--5{ left:33%; width:2px; height:2px; animation-duration:4.5s; animation-delay:1.8s; }
.theme-rust .fx-p--6{ left:85%; width:4px; height:4px; animation-duration:3.4s; animation-delay:2.1s; }
.theme-fivem .fx-p--5,.theme-fivem .fx-p--6{ display:block; position:absolute; border-radius:50%; filter:blur(3px); animation:bokeh-drift 9s ease-in-out infinite alternate; }
.theme-fivem .fx-p--5{ left:66%; top:35%; width:6px; height:6px; background:#00E5FF; }
.theme-fivem .fx-p--6{ left:88%; top:70%; width:9px; height:9px; background:#7C4DFF; }
.theme-vip .fx-p--5{ left:28%; top:48%; animation-delay:2s; width:2px; height:2px; display:block; }
.theme-vip .fx-p--6{ left:88%; top:72%; animation-delay:2.5s; display:block; }

@media (prefers-reduced-motion: reduce){
  .uprofile-banner__img,
  .fx-orb,.fx-scan,.fx-sweep,.fx-stripes,.fx-p,.fx-steam,.fx-noise,.fx-sparkline,
  .avatar-frame-img,.frame-ring,.frame-sparkles::before,.frame-sparkles::after,
  .level-bar__track i,.level-bar__track::after,.theme-chip,.avatar-online,
  .amb-glow,.amb-dust{
    animation:none !important;
  }
}

@media (max-width:980px){
  .uprofile-grid{ grid-template-columns:1fr; }
  .uprofile-hero{ grid-template-columns:auto 1fr; }
  .uprofile-quickstats{ grid-column:1 / -1; grid-template-columns:repeat(4,1fr); }
  .theme-picker{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px){
  .uprofile{ margin:-14px -14px 0; }
  .uprofile-shell{ padding:0 14px 40px; }
  .uprofile-banner{ height:180px; }
  .avatar-stage{ width:132px; height:132px; }
  .avatar-stage.frame-pardy .avatar-core{ font-size:26px; }
  .avatar-stage.frame-vip .avatar-core{ font-size:28px; }
  .uprofile-quickstats{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .theme-picker{ grid-template-columns:1fr 1fr; }
}

/* ===== GANG PAGE — turf command board ===== */
.gangpage{
  --gang:#FF3D8A;
  margin:-6px 0 24px;
}
.gang-hero{
  position:relative; overflow:hidden;
  border-radius:20px; min-height:320px;
  isolation:isolate;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gang) 35%, #ffffff14),
    0 24px 56px #00000077,
    0 0 48px color-mix(in srgb, var(--gang) 22%, transparent);
  margin-bottom:14px;
}
.gang-hero__art{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  filter:saturate(1.2) brightness(.55) contrast(1.08);
  animation:gang-ken 24s ease-in-out infinite alternate;
}
@keyframes gang-ken{
  from{ transform:scale(1.02) translate(0,0); }
  to{ transform:scale(1.1) translate(-1.5%,1%); }
}
.gang-hero__fx{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.gh-noise{
  position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.gh-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 40%, transparent 5%, #000000aa 100%);
}
.gh-orb{
  position:absolute; border-radius:50%; filter:blur(52px); opacity:.45;
  animation:sfx-float 12s ease-in-out infinite alternate;
}
.gh-orb--1{ width:220px; height:220px; background:var(--gang); left:5%; top:15%; }
.gh-orb--2{ width:160px; height:160px; background:#fff; right:8%; top:10%; opacity:.18; animation-duration:16s; }
.gh-scan{
  position:absolute; left:0; right:0; height:2px; opacity:.35;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gang) 80%, #fff), transparent);
  animation:sfx-scan 7s linear infinite;
}
.gh-stripes{
  position:absolute; inset:0; opacity:.08;
  background:repeating-linear-gradient(-18deg, transparent, transparent 14px, #fff 14px, #fff 15px);
}
.gang-hero__shade{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(105deg, #08090CF5 0%, #08090CD0 42%, #08090C44 72%, transparent 100%),
    linear-gradient(0deg, #08090CF2 0%, transparent 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--gang) 18%, transparent), transparent 50%);
}
.gang-hero__body{ position:relative; z-index:3; padding:28px 28px 26px; max-width:640px; }
.gang-hero__badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.gang-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  color:#fff; background:#ffffff12;
  box-shadow:inset 0 0 0 1px #ffffff22;
}
.gang-pill--hot{
  color:#0A0B0F;
  background:linear-gradient(90deg, var(--gang), color-mix(in srgb, var(--gang) 60%, #fff));
  box-shadow:0 0 18px color-mix(in srgb, var(--gang) 40%, transparent);
}
.gang-pill--live{ color:#B8F5D4; background:#3DDC9722; box-shadow:inset 0 0 0 1px #3DDC9766; }
.gang-pill--live i{
  width:6px; height:6px; border-radius:50%; background:var(--accent-2);
  box-shadow:0 0 0 0 #3DDC9788; animation:ping 1.5s ease infinite; display:block;
}
.gang-hero__identity{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.gang-crest{
  width:72px; height:72px; border-radius:20px; flex-shrink:0;
  display:grid; place-items:center; font-size:34px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--gang) 55%, #1a1a1a), #0c0c0e);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gang) 50%, #fff3),
    0 10px 28px #0009,
    0 0 28px color-mix(in srgb, var(--gang) 35%, transparent);
}
.gang-hero__name{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(28px,4.5vw,46px); letter-spacing:-.04em; line-height:1.02;
  text-shadow:0 4px 28px #000c, 0 0 40px color-mix(in srgb, var(--gang) 40%, transparent);
}
.gang-hero__lead{ font-size:14px; color:var(--text-muted); margin-top:6px; }
.gang-hero__lead a{ color:color-mix(in srgb, var(--gang) 40%, #fff); font-weight:750; }
.gang-hero__lead a:hover{ text-decoration:underline; }
.gang-hero__desc{
  font-size:15px; line-height:1.55; color:#C9CDD6;
  max-width:46ch; margin:0 0 18px;
}
.gang-hero__cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.gang-btn-solid{
  background:linear-gradient(135deg, var(--gang), color-mix(in srgb, var(--gang) 55%, #000)) !important;
  box-shadow:0 2px 0 color-mix(in srgb, var(--gang) 45%, #000), 0 0 22px color-mix(in srgb, var(--gang) 35%, transparent) !important;
  border:none;
}

.gang-power{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr)) minmax(160px,1.4fr);
  gap:10px; margin-bottom:18px;
}
.gang-power__stat{
  padding:14px 14px 12px; border-radius:14px;
  background:linear-gradient(165deg, #1C212C, #12151C);
  box-shadow:inset 0 0 0 1px #ffffff0C, 0 8px 20px #00000033;
}
.gang-power__stat b{
  display:block; font-family:var(--font-mono); font-size:22px;
  color:color-mix(in srgb, var(--gang) 35%, #fff);
}
.gang-power__stat span{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint);
}
.gang-power__meter{
  padding:12px 14px; border-radius:14px;
  background:linear-gradient(165deg, color-mix(in srgb, var(--gang) 18%, #1C212C), #12151C);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gang) 30%, #ffffff10), 0 8px 20px #00000033;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
}
.gang-power__meter-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--text-muted);
}
.gang-power__meter-head b{ font-family:var(--font-mono); color:#fff; }
.gang-power__track{
  height:10px; border-radius:999px; overflow:hidden;
  background:#00000066; box-shadow:inset 0 0 0 1px #ffffff10;
}
.gang-power__track i{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, color-mix(in srgb, var(--gang) 70%, #000), var(--gang), #fff8);
  box-shadow:0 0 16px color-mix(in srgb, var(--gang) 55%, transparent);
}

.gang-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start;
}
.gang-panel{
  background:linear-gradient(165deg, #1C212C 0%, #13161E 100%);
  border-radius:16px; padding:14px;
  box-shadow:inset 0 0 0 1px #ffffff0C, 0 10px 28px #00000044;
  margin-bottom:14px; position:relative; overflow:hidden;
}
.gang-panel::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gang) 70%, #fff), transparent);
  opacity:.55;
}
.gang-panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px;
}
.gang-panel__head h2{
  font-family:var(--font-display); font-size:13px; font-weight:800; letter-spacing:.04em;
}
.gang-panel__head span{ font-size:11px; color:var(--text-faint); font-weight:700; }

.gang-leader__row{
  display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center;
  padding:10px; border-radius:14px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--gang) 16%, transparent), #00000033);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gang) 28%, #ffffff10);
  transition:transform .15s var(--ease), box-shadow .15s;
}
.gang-leader__row:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gang) 45%, #ffffff14), 0 10px 24px #0006;
}
.gang-leader__av{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:#111;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--gang) 55%, transparent), 0 0 18px color-mix(in srgb, var(--gang) 30%, transparent);
  overflow:hidden;
}
.gang-leader__crown{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-style:normal; font-size:12px; filter:drop-shadow(0 2px 4px #0008);
}
.gang-leader__info strong{ display:block; font-size:15px; font-weight:800; }
.gang-leader__info small{ color:var(--text-faint); font-size:12px; }
.gang-leader__pts{ font-family:var(--font-mono); font-size:12px; color:color-mix(in srgb, var(--gang) 40%, #fff); }

.gang-media{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px;
}
.gang-media__cell{
  position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:#0a0a0c; box-shadow:inset 0 0 0 1px #ffffff12;
}
.gang-media__cell img,.gang-media__cell video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s var(--ease);
}
.gang-media__cell:hover img,.gang-media__cell:hover video{ transform:scale(1.06); }
.gang-media__play{
  position:absolute; inset:0; margin:auto; width:36px; height:36px;
  border-radius:50%; display:grid; place-items:center;
  background:#00000099; color:#fff; font-size:12px;
  backdrop-filter:blur(6px); box-shadow:0 0 0 1px #ffffff22;
}

.gang-panel--feed{ padding-bottom:8px; }
.gang-panel--feed .post-card{ margin-bottom:10px; }
.gang-empty{ margin:8px 0 4px; }

.gang-roster{ display:flex; flex-direction:column; gap:2px; max-height:420px; overflow-y:auto; }
.gang-roster__item{
  display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center;
  padding:8px 6px; border-radius:10px;
  transition:background .14s, transform .14s;
}
.gang-roster__item:hover{ background:var(--bg-hover); transform:translateX(2px); }
.gang-roster__item.is-boss{
  background:linear-gradient(90deg, color-mix(in srgb, var(--gang) 14%, transparent), transparent);
  box-shadow:inset 2px 0 0 var(--gang);
}
.gang-roster__av{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; position:relative; overflow:hidden;
  font-family:var(--font-display); font-size:11px; font-weight:800; color:#111;
  box-shadow:0 0 0 2px #ffffff14;
}
.gang-roster__on{
  position:absolute; right:-1px; bottom:-1px;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent-2); border:2px solid #13161E;
}
.gang-roster__meta{ min-width:0; }
.gang-roster__meta strong{
  display:block; font-size:13px; font-weight:750;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gang-roster__meta small{ font-size:11px; color:var(--text-faint); }
.gang-roster__pts{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); }

.gang-rivals{ display:flex; flex-direction:column; gap:6px; }
.gang-rival{
  display:grid; grid-template-columns:28px 28px 1fr; gap:8px; align-items:center;
  padding:8px; border-radius:12px;
  background:#ffffff06; box-shadow:inset 0 0 0 1px #ffffff0A;
  transition:background .14s, transform .14s;
}
.gang-rival:hover{ background:#ffffff0C; transform:translateY(-1px); }
.gang-rival.is-self{
  background:linear-gradient(120deg, color-mix(in srgb, var(--gang) 18%, transparent), #00000022);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gang) 40%, #ffffff14);
}
.gang-rival__rank{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-align:center; }
.gang-rival__icon{
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; font-size:14px;
  background:color-mix(in srgb, var(--rival, #888) 25%, #1a1a1a);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rival, #888) 40%, transparent);
}
.gang-rival__info strong{ display:block; font-size:12px; font-weight:750; }
.gang-rival__info small{ display:block; font-size:10px; color:var(--text-faint); margin:2px 0 5px; }
.gang-rival__bar{
  display:block; height:4px; border-radius:999px; overflow:hidden; background:#00000055;
}
.gang-rival__bar i{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--rival, #888), #fff8);
}

.gang-panel--tip{
  background:linear-gradient(160deg, color-mix(in srgb, var(--gang) 12%, #1C212C), #10131A);
}
.gang-panel--tip h3{
  font-family:var(--font-display); font-size:12px; margin-bottom:6px;
  color:color-mix(in srgb, var(--gang) 45%, #fff);
}
.gang-panel--tip p{ font-size:12px; line-height:1.5; color:var(--text-muted); }

.gang-cta-hint{
  display:block; width:100%; margin-top:8px;
  font-size:12px; color:var(--text-faint);
}
.gang-apps{ display:flex; flex-direction:column; gap:10px; }
.gang-app{
  display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center;
  padding:10px; border-radius:14px;
  background:#ffffff06; box-shadow:inset 0 0 0 1px #ffffff0C;
}
.gang-app__info strong{ display:block; font-size:13px; font-weight:750; }
.gang-app__info small{ display:block; font-size:11px; color:var(--text-faint); margin-top:2px; }
.gang-app__info p{ margin:6px 0 0; font-size:12px; color:var(--text-muted); line-height:1.4; }
.gang-app__actions{ display:flex; flex-direction:column; gap:6px; }

.gang-modal{
  border:none; padding:0; background:transparent; max-width:min(480px, calc(100vw - 28px));
}
.gang-modal::backdrop{ background:#05060Acc; backdrop-filter:blur(8px); }
.gang-modal__card{
  background:linear-gradient(165deg, #1C212C, #12151C);
  border-radius:18px; padding:18px 18px 16px;
  box-shadow:inset 0 0 0 1px #ffffff14, 0 24px 60px #00000088;
}
.gang-modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.gang-modal__head h3{
  font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:.02em;
}
.gang-modal__lead{
  font-size:13px; color:var(--text-muted); line-height:1.45; margin-bottom:14px;
}
.gang-modal__actions{
  display:flex; justify-content:flex-end; gap:8px; margin-top:8px;
}

@media (max-width:980px){
  .gang-layout{ grid-template-columns:1fr; }
  .gang-power{ grid-template-columns:repeat(2,1fr); }
  .gang-power__meter{ grid-column:1 / -1; }
  .gang-media{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:620px){
  .gang-hero__body{ padding:22px 18px 20px; }
  .gang-hero__identity{ align-items:flex-start; }
  .gang-crest{ width:60px; height:60px; font-size:28px; border-radius:16px; }
  .gang-media{ grid-template-columns:repeat(2,1fr); }
  .gang-power{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .gang-hero__art,.gh-orb,.gh-scan{ animation:none !important; }
}

/* ============ BÖCÜKLERİM — fighter select ============ */
.broster{ margin:8px 0 36px; }
.broster__head{
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end;
  justify-content:space-between; margin-bottom:18px;
}
.broster__kicker{
  margin:0 0 4px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.broster__head h1{
  margin:0; font-family:var(--font-display); font-size:clamp(28px, 4vw, 40px);
  font-weight:800; letter-spacing:-.02em; line-height:1.05;
}
.broster__chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.broster__chip{
  font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.7);
  padding:7px 12px; border-radius:999px; background:#ffffff0c; box-shadow:inset 0 0 0 1px #ffffff14;
}
.broster__chip b{ color:#F0A81C; margin-right:4px; }
.broster__stage{
  display:grid; grid-template-columns:minmax(220px, 1.05fr) minmax(260px, 1fr);
  gap:0; border-radius:24px; overflow:hidden;
  background:#0a0c12;
  box-shadow:inset 0 0 0 1px #ffffff14, 0 20px 48px #00000066;
}
@media (max-width:820px){ .broster__stage{ grid-template-columns:1fr; } }
.broster__arena{
  position:relative; min-height:380px;
  display:flex; align-items:flex-end; justify-content:center;
  padding:40px 20px 32px;
  background:
    radial-gradient(ellipse at 50% 88%, #FF5C3928, transparent 55%),
    radial-gradient(ellipse at 70% 20%, #F0A81C14, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 27px, #ffffff05 27px 28px),
    linear-gradient(180deg, #12151d 0%, #07080c 100%);
}
.broster__walk{
  width:min(300px, 78vw); height:min(300px, 78vw);
  background-color:transparent;
  background-image:var(--walk);
  background-repeat:no-repeat;
  background-size:400% 100%;
  animation:brosterWalk .55s steps(1) infinite;
  filter:drop-shadow(0 22px 28px #000a);
  image-rendering:auto;
  transform:scale(1.08);
  transform-origin:center bottom;
}
.broster__walk--sm{ width:140px; height:140px; transform:scale(1.05); }
@keyframes brosterWalk{
  0%{ background-position:0% 0; }
  25%{ background-position:33.333% 0; }
  50%{ background-position:66.666% 0; }
  75%{ background-position:100% 0; }
  100%{ background-position:0% 0; }
}
@media (prefers-reduced-motion: reduce){
  .broster__walk{ animation:none; background-position:0 0; }
}
.broster__live{
  position:absolute; top:14px; right:14px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#3BF08B; background:#3BF08B1a; box-shadow:inset 0 0 0 1px #3BF08B44;
  padding:5px 10px; border-radius:999px;
}
.broster__focus{
  padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(165deg, #12151c 0%, #0a0c11 100%);
  border-left:1px solid #ffffff10;
}
@media (max-width:820px){ .broster__focus{ border-left:0; border-top:1px solid #ffffff10; } }
.broster__title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.broster__title-row h2{
  margin:0; font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-.01em;
}
.broster__rar{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:8px; background:#ffffff10; color:rgba(255,255,255,.7);
}
.broster__rar.rar-uncommon,
.broster__rar.rarity-uncommon{ color:#3DDC97; background:#3DDC9718; }
.broster__rar.rar-rare,
.broster__rar.rarity-rare{ color:#5B9CFF; background:#5B9CFF18; }
.broster__rar.rar-epic,
.broster__rar.rarity-epic{ color:#FF5C39; background:#FF5C3918; }
.broster__rar.rar-legendary,
.broster__rar.rarity-legendary{ color:#F0A81C; background:#F0A81C18; }
.broster__meta{ margin:0; font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.5); }
.broster__xp{ height:7px; border-radius:99px; background:#ffffff12; overflow:hidden; }
.broster__xp i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#FF5C39,#F0A81C); }
.broster__xp-lab{ margin:0; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.42); }
.broster__stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:2px;
}
.broster__stats span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  color:rgba(255,255,255,.45); text-align:center;
  padding:8px 4px; border-radius:12px; background:#ffffff08; box-shadow:inset 0 0 0 1px #ffffff0e;
}
.broster__stats b{ display:block; margin-top:2px; font-size:15px; color:#fff; font-weight:800; }
.broster__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.broster__actions form{ margin:0; }
.broster__nick{ display:flex; gap:8px; margin:4px 0 0; }
.broster__nick input{
  flex:1; min-width:0; padding:8px 12px; border-radius:10px;
  border:1px solid #ffffff18; background:#00000050; color:inherit; font-size:13px;
}
.broster__strip{
  display:flex; gap:10px; overflow-x:auto; padding:14px 2px 4px;
  scrollbar-width:thin;
}
.broster__thumb{
  flex:0 0 auto; width:120px; height:120px; border-radius:18px; text-decoration:none;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:#0c0e14; box-shadow:inset 0 0 0 1px #ffffff14;
  transition:transform .15s ease, box-shadow .15s ease;
  overflow:hidden;
}
.broster__thumb:hover{ transform:translateY(-2px); }
.broster__thumb.is-on{ box-shadow:inset 0 0 0 2px #FF5C39, 0 0 18px #FF5C3933; }
.broster__thumb.is-live::after{
  content:''; position:absolute; top:8px; right:8px; width:7px; height:7px;
  border-radius:50%; background:#3BF08B; box-shadow:0 0 8px #3BF08B; z-index:2;
}
.broster__thumb-walk{
  width:112px; height:112px;
  background-color:transparent;
  background-image:var(--walk); background-repeat:no-repeat; background-size:400% 100%;
  animation:brosterWalk .55s steps(1) infinite;
}
.broster__thumb em{
  position:absolute; left:8px; bottom:6px; z-index:2;
  font-style:normal; font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,.7);
  text-shadow:0 1px 3px #000c;
}
.broster__empty{
  padding:48px 24px; text-align:center; border-radius:22px;
  background:linear-gradient(160deg,#141820,#0a0c12); box-shadow:inset 0 0 0 1px #ffffff12;
}
.broster__empty h2{ margin:0 0 8px; font-family:var(--font-display); font-size:24px; }
.broster__empty p{ margin:0 0 16px; color:rgba(255,255,255,.5); }

.bshop{ margin:0 0 40px; }
.bshop__head{ margin-bottom:14px; }
.bshop__head h2{
  margin:0 0 4px; font-family:var(--font-display); font-size:22px; font-weight:800;
}
.bshop__head p{ margin:0; color:rgba(255,255,255,.48); font-size:13px; }
.bshop__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px;
}
.bshop__card{
  border-radius:18px; overflow:hidden;
  background:#0c0e14; box-shadow:inset 0 0 0 1px #ffffff12;
  display:flex; flex-direction:column;
}
.bshop__art{
  height:150px; display:flex; align-items:center; justify-content:center;
  padding:10px 8px 4px;
  background:
    radial-gradient(circle at 50% 100%, #ffffff10, transparent 55%),
    #090b10;
}
.bshop__body{
  padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1;
}
.bshop__body b{ font-family:var(--font-display); font-size:16px; }
.bshop__body > span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.bshop__body em{
  font-style:normal; font-size:12px; color:rgba(255,255,255,.48); line-height:1.4;
  flex:1; margin-bottom:4px;
}
.bshop__body form{ margin:0; }
.bshop__body .btn-primary, .bshop__body .btn-ghost{ width:100%; }

/* legacy pet cards (admin / diğer sayfalar) */
.pet-gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;
}
.pet-card{
  border-radius:16px; overflow:hidden;
  background:linear-gradient(170deg, #ffffff08, #00000040);
  box-shadow:inset 0 0 0 1px #ffffff10;
  transition:transform .18s, box-shadow .18s;
}
.pet-card:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px #ffffff22, 0 12px 28px #00000066; }
.pet-card--active{ box-shadow:inset 0 0 0 1.5px var(--accent, #4FE6C4), 0 0 22px #4FE6C433; }
.pet-card__stage{
  position:relative; height:150px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 80%, #4FE6C412, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 23px, #ffffff05 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, #ffffff05 23px 24px),
    #0b0d12;
}
.pet-card__stage img{
  max-height:96px; max-width:130px; object-fit:contain;
  transition:transform .2s;
}
.pet-card:hover .pet-card__stage img{ transform:scale(1.12) translateY(-3px); }
.pet-card__live{
  position:absolute; top:10px; right:10px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.12em;
  color:#3BF08B; background:#3BF08B1a; border:1px solid #3BF08B44;
  padding:3px 8px; border-radius:20px;
  animation:petLivePulse 1.6s ease-in-out infinite;
}
@keyframes petLivePulse{ 50%{ opacity:.55; } }
.pet-card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.pet-card__name{
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.pet-card__beh{
  font-family:var(--font-mono); font-size:9px; font-weight:600; color:var(--text-muted);
  background:#ffffff0c; padding:3px 8px; border-radius:8px; white-space:nowrap;
}
.pet-card__desc{ font-size:12px; color:var(--text-muted); line-height:1.45; min-height:34px; }
.pet-card__price{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:#F0A81C; }
.pet-card__skin-badge{
  position:absolute; top:10px; left:10px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; font-weight:700;
  color:#F0A81C; background:#F0A81C1a; border:1px solid #F0A81C44;
  padding:3px 8px; border-radius:20px;
}
.pet-skins{ margin-top:4px; padding-top:10px; border-top:1px solid #ffffff10; }
.pet-skins__title{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  color:var(--text-muted); margin-bottom:8px; text-transform:uppercase;
}
.pet-skins__row{ display:flex; flex-wrap:wrap; gap:8px; }
.pet-skin{ margin:0; }
.pet-skin__btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:64px; padding:6px 4px; border-radius:12px; cursor:pointer;
  background:#ffffff08; border:1px solid #ffffff14; color:var(--text-muted);
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  transition:border-color .15s, background .15s, transform .15s;
}
.pet-skin__btn:hover:not(:disabled){ border-color:#ffffff33; background:#ffffff12; transform:translateY(-1px); }
.pet-skin__btn:disabled{ opacity:.45; cursor:not-allowed; }
.pet-skin__btn img{ width:40px; height:40px; object-fit:contain; }
.pet-skin--on .pet-skin__btn{
  border-color:var(--accent, #4FE6C4); color:var(--accent, #4FE6C4);
  background:color-mix(in srgb, var(--accent, #4FE6C4) 12%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent, #4FE6C4) 30%, transparent);
}
.pet-skin--locked .pet-skin__btn span{ color:#F0A81C; }
.pet-skins__hint{ font-size:11px; color:var(--text-faint); margin:6px 0 0; }
.pet-card__lvl{
  position:absolute; bottom:10px; left:10px;
  font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:.06em;
  color:#fff; background:#00000088; border:1px solid #ffffff22;
  padding:3px 8px; border-radius:8px;
}
.pet-rpg{ display:flex; flex-direction:column; gap:4px; }
.pet-rpg__xp{
  height:6px; border-radius:99px; background:#ffffff12; overflow:hidden;
}
.pet-rpg__xp i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, #4FE6C4, #3BF08B);
}
.pet-rpg__meta{ font-family:var(--font-mono); font-size:10px; color:var(--text-muted); line-height:1.35; }
.pet-rpg__actions{ display:flex; flex-direction:column; gap:6px; }
.pet-nick{ display:flex; gap:6px; margin:0; }
.pet-nick input{
  flex:1; min-width:0; padding:6px 10px; border-radius:8px;
  border:1px solid #ffffff18; background:#00000040; color:inherit; font-size:12px;
}
.pstat{ display:flex; flex-direction:column; gap:6px; margin:6px 0 2px; }
.pstat__row{
  display:grid; grid-template-columns:36px 1fr 64px; gap:8px; align-items:center;
}
.pstat__row b{
  font-family:var(--font-mono); font-size:12px; font-weight:800; text-align:right;
}
.pstat__track{
  height:8px; border-radius:2px; background:#ffffff10; overflow:hidden;
}
.pstat__track i{
  display:block; height:100%; border-radius:2px;
  background:#22c55e; box-shadow:0 0 8px #22c55e55;
}
.pstat__row em{
  font-style:normal; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.04em; color:#fff; text-align:left;
}

/* ============ ECO / KART KASASI / PAZAR / CÜZDAN / COLISEUM ============ */
.eco-hero{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end;
  margin:4px 0 22px; padding:22px 4px 20px;
  border-bottom:1px solid #ffffff10;
}
.eco-hero h1{
  margin:0; font-family:var(--font-display, Unbounded, sans-serif);
  font-size:clamp(1.45rem, 3.2vw, 2rem); font-weight:800; letter-spacing:-.02em; line-height:1.15;
}
.eco-hero__copy p{ margin:8px 0 0; max-width:42ch; color:var(--text-muted); font-size:14px; line-height:1.5; }
.eco-kicker{
  margin:0 0 6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#F0A81C; font-weight:700;
}
.eco-hero__bal{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.eco-chip{
  display:flex; align-items:baseline; gap:8px; padding:10px 14px; border-radius:14px;
  background:#0a0c10; box-shadow:inset 0 0 0 1px #ffffff14;
}
.eco-chip b{ font-size:16px; font-weight:800; }
.eco-chip em{ font-style:normal; font-size:11px; color:var(--text-muted); }
.eco-link{ font-size:13px; font-weight:700; color:var(--accent, #4FE6C4); text-decoration:none; }
.eco-link:hover{ text-decoration:underline; }
.eco-section{ margin:28px 0; }
.eco-section__head{ margin-bottom:14px; }
.eco-section__head h2{ margin:0; font-size:15px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.eco-section__head p{ margin:4px 0 0; font-size:13px; color:var(--text-muted); }
.eco-muted{ font-size:13px; color:var(--text-muted); }
.eco-panel{
  padding:18px; border-radius:18px;
  background:linear-gradient(165deg, #ffffff08, #00000038);
  box-shadow:inset 0 0 0 1px #ffffff12;
}
.eco-panel__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; gap:10px; }
.eco-panel__head h2{ margin:0; font-size:16px; font-weight:800; }
.eco-panel__head span{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.eco-sub{ margin:18px 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.eco-split{ display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .eco-split{ grid-template-columns:1fr; } }
.eco-form{ display:flex; flex-direction:column; gap:12px; }
.eco-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-muted); }
.eco-form input, .eco-form select, .eco-form textarea{
  padding:10px 12px; border-radius:12px; border:1px solid #ffffff18;
  background:#080a0e; color:inherit; font-size:13px;
}
.eco-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.eco-timeline{ display:flex; flex-direction:column; gap:8px; }
.eco-timeline__row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  background:#ffffff05; box-shadow:inset 0 0 0 1px #ffffff0a;
}
.eco-timeline__row img{ width:36px; height:36px; object-fit:contain; }
.eco-timeline__row div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.eco-timeline__row b{ font-size:13px; }
.eco-timeline__row span{ font-size:11px; color:var(--text-muted); }
.eco-timeline__row time{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); }

/* Böcük MVP hub — arena foyer */
.bmast{
  position:relative; overflow:hidden; border-radius:24px; margin:0 0 22px;
  min-height:220px; display:flex; align-items:flex-end;
  background:
    linear-gradient(115deg, #07090ecc 0%, #07090eaa 42%, #07090e66 100%),
    var(--bmast-art) center 35% / cover no-repeat;
  box-shadow:inset 0 0 0 1px #ffffff14, 0 24px 50px #00000055;
}
.bmast__veil{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 40%, transparent 0%, #050608ee 75%);
  pointer-events:none;
}
.bmast__glow{
  position:absolute; width:280px; height:280px; right:8%; top:-40px;
  background:radial-gradient(circle, #FF5C3933, transparent 70%);
  filter:blur(8px); pointer-events:none; animation:bmastPulse 5s ease-in-out infinite;
}
@keyframes bmastPulse{ 50%{ opacity:.55; transform:scale(1.08); } }
.bmast__inner{ position:relative; z-index:2; padding:28px 28px 26px; max-width:520px; }
.bmast__brand{
  margin:0 0 8px; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.22em; color:#FF5C39;
}
.bmast__title{
  margin:0; font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.6rem, 8vw, 4.2rem); line-height:.92; letter-spacing:-.03em;
  text-shadow:0 4px 0 #00000066;
}
.bmast__lead{
  margin:12px 0 0; font-size:15px; color:rgba(255,255,255,.72); max-width:28ch; line-height:1.45;
}
.bmast__meta{
  display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:18px;
  font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.55);
}
.bmast__meta b{ color:#fff; font-weight:800; margin-right:4px; }
.bmast__live{
  color:#3DDC97 !important; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
}
.bmast__float{
  position:absolute; right:4%; bottom:12px; z-index:2;
  display:flex; align-items:flex-end; gap:4px; pointer-events:none;
}
.bmast__float img{
  width:72px; height:72px; object-fit:contain;
  filter:drop-shadow(0 12px 18px #000a);
  animation:bmastFloat 3.6s ease-in-out infinite;
}
.bmast__float img:nth-child(2){ width:88px; height:88px; animation-delay:.4s; }
.bmast__float img:nth-child(3){ animation-delay:.8s; }
@keyframes bmastFloat{ 50%{ transform:translateY(-8px); } }
@media (max-width:720px){
  .bmast__float{ display:none; }
  .bmast{ min-height:190px; }
  .bmast__inner{ padding:22px 18px 20px; }
}

.bdeck{
  display:grid; grid-template-columns:minmax(240px, 0.95fr) 1.35fr; gap:16px;
  margin:0 0 28px; align-items:stretch;
}
@media (max-width:900px){ .bdeck{ grid-template-columns:1fr; } }

.bdeck__hero{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:420px; border-radius:22px; overflow:hidden; text-decoration:none; color:#fff;
  background: #0a0c12 var(--hero-bg) center 40% / cover no-repeat;
  box-shadow:inset 0 0 0 1px #ffffff18, 0 18px 40px #00000055;
  transition:transform .2s ease, box-shadow .2s ease;
}
.bdeck__hero:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px #FF5C3966, 0 22px 48px #FF5C3922; }
.bdeck__hero-dim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #05060833 0%, #050608aa 45%, #050608f5 100%);
}
.bdeck__hero-copy{ position:relative; z-index:2; padding:22px 22px 24px; }
.bdeck__hero-copy h2{
  margin:8px 0 6px; font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.8rem, 4vw, 2.4rem); letter-spacing:.06em;
}
.bdeck__hero-copy p{ margin:0; font-size:14px; color:rgba(255,255,255,.7); max-width:28ch; }
.bdeck__hero-copy small{
  display:block; margin-top:10px; font-family:var(--font-mono); font-size:10px;
  color:rgba(255,255,255,.45); letter-spacing:.04em;
}
.bdeck__cta{
  display:inline-block; margin-top:16px; font-family:var(--font-display);
  font-weight:800; font-size:12px; letter-spacing:.12em; color:#FF5C39;
}
.bdeck__tag{
  display:inline-block; font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#FFB59A;
  padding:4px 9px; border-radius:99px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

.bdeck__squares{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.bsq{
  position:relative; aspect-ratio:1 / 1; border-radius:20px; overflow:hidden;
  text-decoration:none; color:#fff;
  background:#0c0e14; box-shadow:inset 0 0 0 1px #ffffff14;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bsq:hover{ transform:translateY(-3px) scale(1.01); box-shadow:inset 0 0 0 1px #ffffff33, 0 16px 36px #0008; }
.bsq__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .3s ease;
}
.bsq:hover .bsq__bg{ transform:scale(1.06); }
.bsq__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #05060855 0%, #050608cc 48%, #050608f2 100%);
}
.bsq__txt{
  position:relative; z-index:2; height:100%; padding:16px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
}
.bsq__txt b{
  font-family:var(--font-display); font-size:17px; font-weight:800; letter-spacing:.02em;
}
.bsq__txt em{ font-style:normal; font-size:12px; color:rgba(255,255,255,.58); line-height:1.35; }
.bsq--gold{ box-shadow:inset 0 0 0 1px #F0A81C44; }
.bsq--gold .bdeck__tag{ color:#F0A81C; background:#F0A81C1a; box-shadow:inset 0 0 0 1px #F0A81C44; }
.bsq--coin{ box-shadow:inset 0 0 0 1px #3DDC9744; }
@media (max-width:520px){
  .bdeck__squares{ grid-template-columns:1fr 1fr; gap:10px; }
  .bdeck__hero{ min-height:340px; }
  .bdeck__hero-sprites img{ width:84px; height:84px; }
  .bsq__txt b{ font-size:14px; }
}

.bstrip{
  margin:0 0 28px; padding:14px 16px; border-radius:16px;
  background:linear-gradient(165deg, #ffffff08, #00000040);
  box-shadow:inset 0 0 0 1px #ffffff12;
}
.bstrip__label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:10px;
}
.bstrip__row{ display:flex; align-items:center; gap:14px; }
.bstrip__row img{ width:48px; height:48px; object-fit:contain; }
.bstrip__row div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bstrip__row b{ font-size:14px; }
.bstrip__row span{ font-size:12px; color:var(--text-muted); }
.bstrip__row strong{
  font-family:var(--font-display); font-size:18px; color:var(--accent-2);
}

.mvp-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--text-muted); text-decoration:none;
  padding:6px 12px; border-radius:99px; background:#ffffff08;
  box-shadow:inset 0 0 0 1px #ffffff12; margin-bottom:12px;
}
.mvp-back:hover{ color:#fff; background:#ffffff12; }

@media (prefers-reduced-motion: reduce){
  .bmast__glow, .bmast__float img{ animation:none !important; }
}

/* CS tarzı kasa — keep following rules */
.pet-case{ margin:0 0 28px; }
.case-stage{
  position:relative; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #F0A81C18, transparent 55%),
    linear-gradient(180deg, #141820, #07090d);
  box-shadow:inset 0 0 0 1px #ffffff14, 0 20px 50px #00000066;
  padding:22px 0 18px;
}
.case-viewport{
  position:relative; height:148px; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.case-track{
  position:absolute; left:0; top:0; height:100%;
  display:flex; align-items:center; gap:10px; padding:0 0 0 8px;
  will-change:transform;
}
.case-marker{
  position:absolute; left:50%; top:6px; bottom:6px; width:3px; z-index:5;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #F0A81C, #ff5c39);
  box-shadow:0 0 18px #F0A81C99;
  border-radius:2px; pointer-events:none;
}
.case-marker::before, .case-marker::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent;
}
.case-marker::before{ top:-2px; border-top:9px solid #F0A81C; }
.case-marker::after{ bottom:-2px; border-bottom:9px solid #ff5c39; }
.case-card{
  flex:0 0 112px; width:112px; height:132px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:linear-gradient(165deg, #1a1f2a, #0b0d12);
  box-shadow:inset 0 0 0 1px #ffffff16;
  position:relative; overflow:hidden;
}
.case-card img{ width:64px; height:64px; object-fit:contain; z-index:1; }
.case-card__name{
  z-index:1; font-size:10px; font-weight:700; text-align:center; padding:0 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.case-card__rar{ z-index:1; font-family:var(--font-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; opacity:.75; }
.case-card.rarity-uncommon{ box-shadow:inset 0 0 0 1px #3BF08B55; }
.case-card.rarity-rare{ box-shadow:inset 0 0 0 1px #4EA8F066; }
.case-card.rarity-epic{ box-shadow:inset 0 0 0 1px #B57BFF66; }
.case-card.rarity-legendary{ box-shadow:inset 0 0 0 1px #F0A81C88, 0 0 20px #F0A81C33; }
.case-card--win.is-landed{
  transform:scale(1.06);
  box-shadow:inset 0 0 0 2px #fff, 0 0 28px #F0A81C66;
  transition:transform .25s ease, box-shadow .25s ease;
}
.case-controls{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:16px 0 8px; }
.case-btn{
  position:relative; min-width:180px; padding:16px 28px 14px; border:0; border-radius:999px;
  font-family:var(--font-display, Unbounded, sans-serif); font-weight:800; font-size:14px;
  letter-spacing:.04em; cursor:pointer; color:#fff;
  transition:transform .15s, filter .15s, opacity .15s;
}
.case-btn:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.08); }
.case-btn:disabled{ opacity:.45; cursor:not-allowed; }
.case-btn__tag{
  display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.85; margin-bottom:4px; font-weight:600;
}
.case-btn--daily{ background:linear-gradient(180deg, #3a3f4a, #1c2028); box-shadow:inset 0 0 0 1px #ffffff22, 0 8px 24px #0008; }
.case-btn--pack{ background:linear-gradient(180deg, #e8a020, #c45a12); box-shadow:0 10px 28px #F0A81C44, inset 0 1px 0 #ffd27a66; }
.case-btn--ad{
  background:linear-gradient(180deg, #2a5f4a, #16382c);
  box-shadow:inset 0 0 0 1px #3DDC9744, 0 8px 24px #0008;
  display:none;
}
html.ntmon-native .case-btn--ad{ display:inline-flex; }
.case-btn--ad small{ opacity:.75; font-weight:500; margin-left:.35rem; }
/* Native banner: içerik alta yapışmasın */
html.ntmon-has-banner body,
html.ntmon-has-banner .app-shell,
html.ntmon-has-banner .content {
  padding-bottom: 64px;
}
.case-result{
  text-align:center; margin:18px auto 0; max-width:320px; padding:20px;
  border-radius:18px; background:#0a0c10; box-shadow:inset 0 0 0 1px #ffffff16;
  animation:cardRevealIn .4s ease;
}
.case-result img{ width:96px; height:96px; object-fit:contain; margin:8px 0; }
.case-result h3{ margin:0 0 4px; font-size:18px; }
.case-result p{ margin:0; font-size:13px; color:var(--text-muted); }
.case-result__badge{
  display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:800; padding:4px 10px; border-radius:99px;
  background:#ffffff10;
}
.case-result.rarity-legendary{ box-shadow:inset 0 0 0 1px #F0A81C66, 0 0 40px #F0A81C22; }
.case-result.rarity-legendary .case-result__badge,
.case-card.rarity-legendary .case-card__rar{ color:#F0A81C; }
.case-result.rarity-epic .case-result__badge,
.case-card.rarity-epic .case-card__rar{ color:#B57BFF; }
.case-result.rarity-rare .case-result__badge,
.case-card.rarity-rare .case-card__rar{ color:#4EA8F0; }
.case-result.rarity-uncommon .case-result__badge,
.case-card.rarity-uncommon .case-card__rar{ color:#3BF08B; }
@keyframes cardRevealIn{ from{ opacity:0; transform:scale(.94) translateY(8px); } to{ opacity:1; transform:none; } }
.pet-case.is-spinning .case-btn{ pointer-events:none; }

.drop-grid{ display:flex; flex-direction:column; gap:8px; }
.drop-tile{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px;
  background:#ffffff05; box-shadow:inset 0 0 0 1px #ffffff0c;
}
.drop-tile img{ width:40px; height:40px; object-fit:contain; }
.drop-tile div{ flex:1; display:flex; flex-direction:column; gap:2px; }
.drop-tile b{ font-size:13px; }
.drop-tile span{ font-size:11px; color:var(--text-muted); }
.drop-tile strong{ font-family:var(--font-mono); font-size:13px; }
.drop-tile.rarity-uncommon strong{ color:#3BF08B; }
.drop-tile.rarity-rare strong{ color:#4EA8F0; }
.drop-tile.rarity-epic strong{ color:#B57BFF; }
.drop-tile.rarity-legendary strong{ color:#F0A81C; }

/* Pazar vitrin */
.mkt-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:14px;
}
.mkt-card{
  border-radius:16px; overflow:hidden;
  background:linear-gradient(170deg, #161a22, #0a0c10);
  box-shadow:inset 0 0 0 1px #ffffff12;
  display:flex; flex-direction:column;
}
.mkt-card__art{
  position:relative; height:120px; display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 80%, #ffffff08, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 18px, #ffffff04 18px 19px);
}
.mkt-card__art img{ max-height:78px; max-width:100px; object-fit:contain; }
.mkt-card__rar{
  position:absolute; top:8px; left:8px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; background:#00000088; color:#fff;
}
.mkt-card.rarity-legendary{ box-shadow:inset 0 0 0 1px #F0A81C55; }
.mkt-card.rarity-epic{ box-shadow:inset 0 0 0 1px #B57BFF55; }
.mkt-card.rarity-rare{ box-shadow:inset 0 0 0 1px #4EA8F055; }
.mkt-card__body{ padding:12px; display:flex; flex-direction:column; gap:6px; }
.mkt-card__body b{ font-size:13px; }
.mkt-card__meta{ font-size:11px; color:var(--text-muted); }
.mkt-card__price{ font-family:var(--font-mono); font-weight:800; font-size:13px; color:#F0A81C; }
.mkt-mine{ display:flex; flex-direction:column; gap:8px; }
.mkt-mine__row{
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; background:#ffffff06;
}
.mkt-mine__row img{ width:36px; height:36px; object-fit:contain; }
.mkt-mine__row div{ flex:1; display:flex; flex-direction:column; gap:2px; }
.mkt-mine__row b{ font-size:12px; }
.mkt-mine__row span{ font-size:11px; color:var(--text-muted); }

/* Cüzdan */
.wallet-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.wallet-card{
  padding:20px; border-radius:18px;
  background:linear-gradient(160deg, #ffffff0a, #00000040);
  box-shadow:inset 0 0 0 1px #ffffff14;
  display:flex; flex-direction:column; gap:8px;
}
.wallet-card--coin{ box-shadow:inset 0 0 0 1px #F0A81C44; }
.wallet-card__lbl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.wallet-card__val{ font-size:22px; font-weight:800; }
.uprofile-wallet-link{
  display:block; margin-top:4px; font-size:11px; font-weight:700; color:var(--accent, #4FE6C4); text-decoration:none;
}

/* Coliseum / Meydan — PixelTap canlı düello */
.ptap{
  margin:0 0 28px; border-radius:22px; overflow:hidden;
  background:#07080c; box-shadow:inset 0 0 0 1px #ffffff12, 0 24px 60px #00000066;
}
.ptap__hint{
  margin:0; padding:10px 16px; font-size:13px; color:var(--text-muted);
  border-bottom:1px solid #ffffff0c; background:#00000040;
}
.ptap__hint b{ color:#FFB59A; }
.ptap__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ptap__top{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center;
  padding:12px 14px; background:#00000088; border-bottom:1px solid #ffffff10;
}
.ptap__top h1{
  margin:0; text-align:center; font-family:var(--font-display, Unbounded, sans-serif);
  font-size:14px; font-weight:800; letter-spacing:.2em;
}
.ptap__back{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  color:#fff; text-decoration:none; background:#ffffff10;
}
.ptap__quota{
  font-family:var(--font-mono); font-size:11px; padding:6px 10px; border-radius:99px;
  background:#ffffff10; color:var(--text-muted);
}
.ptap__empty{ padding:40px 20px; text-align:center; }
.ptap__bars{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:14px 16px 8px;
}
.ptap__side--r{ text-align:right; }
.ptap__side--r .ptap__bar{ direction:rtl; }
.ptap__names{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px;
}
.ptap__side--r .ptap__names{ flex-direction:row-reverse; }
.ptap__names b{ font-size:12px; letter-spacing:.04em; }
.ptap__names span{ font-family:var(--font-mono); font-size:11px; color:#a78bfa; }
.ptap__bar{
  height:8px; border-radius:99px; background:#1a1228; overflow:hidden;
  box-shadow:inset 0 0 0 1px #ffffff10;
}
.ptap__bar i{
  display:block; height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg, #7c3aed, #c084fc);
  box-shadow:0 0 12px #a78bfa88;
  transition:width .35s ease;
}
.ptap__bar i.is-low{ background:linear-gradient(90deg, #dc2626, #f97316); box-shadow:0 0 12px #ef444488; }
.ptap__bar i.is-crit{ background:linear-gradient(90deg, #7f1d1d, #ef4444); animation:hpPulse .45s ease infinite; }
@keyframes hpPulse{ 50%{ filter:brightness(1.35); } }
.ptap__energy{ margin-top:4px; font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }

.ptap__arena{
  position:relative; margin:8px 14px; border-radius:18px; min-height:220px;
  background:
    radial-gradient(ellipse at 50% 80%, #0e3a3a55, transparent 55%),
    linear-gradient(180deg, #0c1520, #061018);
  box-shadow:inset 0 0 0 1.5px #7c3aed66, 0 0 40px #7c3aed22;
  overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ptap__countdown{
  position:absolute; top:14px; left:0; right:0; text-align:center; z-index:3;
  font-family:var(--font-display, Unbounded, sans-serif); font-weight:900; font-size:18px;
  letter-spacing:.08em; color:#c084fc; text-shadow:0 0 20px #7c3aed88;
  min-height:1.2em;
}
.ptap__fighters{
  position:relative; z-index:2; width:100%; max-width:480px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  padding:28px 8% 22px;
}
.ptap__unit{
  display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; min-width:0;
  transition:transform .2s ease, filter .2s ease;
  min-height:150px; justify-content:flex-end;
}
.ptap__unit img{
  width:min(42vw, 130px); height:min(42vw, 130px); object-fit:contain;
  filter:drop-shadow(0 10px 16px #000a);
}
.ptap__unit[data-unit="def"] img{ transform:scaleX(-1); }
.ptap__unit b{ font-size:12px; text-align:center; min-height:1.2em; }
.ptap__wait{
  width:min(42vw, 130px); height:min(42vw, 130px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display, Unbounded, sans-serif);
  font-size:13px; font-weight:600; letter-spacing:.12em;
  text-transform:lowercase; color:#ffffff33;
  border:1px dashed #ffffff18; border-radius:18px;
  background:#ffffff05;
}
.ptap__unit.is-empty .ptap__wait{ display:flex; }
.ptap__unit:not(.is-empty) .ptap__wait{ display:none; }
.ptap__vs{ opacity:.4; font-weight:800; font-size:13px; align-self:center; margin-bottom:40px; }
.ptap__unit.is-strike{ animation:ptapStrike .35s ease; }
.ptap__unit[data-unit="atk"].is-strike{ animation:ptapStrikeL .35s ease; }
.ptap__unit[data-unit="def"].is-strike{ animation:ptapStrikeR .35s ease; }
@keyframes ptapStrikeL{ 40%{ transform:translateX(22px) scale(1.06); } }
@keyframes ptapStrikeR{ 40%{ transform:translateX(-22px) scale(1.06); } }
.ptap__unit.is-hurt{
  animation:ptapHurt .4s ease;
  filter:saturate(1.4);
}
@keyframes ptapHurt{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); filter:brightness(1.2) sepia(1) hue-rotate(-50deg) saturate(6); }
  40%{ transform:translateX(6px); filter:brightness(.9) sepia(1) hue-rotate(-50deg) saturate(8); }
  60%{ transform:translateX(-4px); filter:brightness(1.1) sepia(1) hue-rotate(-40deg) saturate(5); }
}
.ptap__blood{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4;
  transition:opacity .15s;
}
.ptap__blood.is-on{ opacity:1; animation:bloodFlash .32s ease; }
.ptap__blood.is-atk{ background:radial-gradient(circle at 22% 55%, #ff000088, transparent 45%); }
.ptap__blood.is-def{ background:radial-gradient(circle at 78% 55%, #ff000088, transparent 45%); }
@keyframes bloodFlash{
  0%{ opacity:0; }
  30%{ opacity:1; }
  100%{ opacity:0; }
}
.ptap__float{
  position:absolute; z-index:5; top:42%;
  font-family:var(--font-display, Unbounded, sans-serif); font-weight:900; font-size:22px;
  color:#ff4d4d; text-shadow:0 2px 0 #000, 0 0 12px #ff000088;
  animation:floatDmg .7s ease forwards; pointer-events:none;
}
.ptap__float.is-atk{ left:18%; }
.ptap__float.is-def{ right:18%; }
.ptap__float.is-crit{ color:#ffd166; font-size:26px; }
@keyframes floatDmg{
  0%{ opacity:0; transform:translateY(8px) scale(.8); }
  20%{ opacity:1; transform:translateY(0) scale(1.1); }
  100%{ opacity:0; transform:translateY(-36px) scale(1); }
}

.ptap__stats{ padding:8px 18px 4px; }
.ptap__stats h2{ margin:0 0 12px; font-size:15px; font-weight:800; }
.ptap__stat{
  display:grid; grid-template-columns:40px 1fr 40px; gap:8px; align-items:center;
  margin-bottom:10px; font-family:var(--font-mono); font-size:12px; font-weight:700;
}
.ptap__stat-bars{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px;
}
.ptap__stat-bars em{
  font-style:normal; font-size:10px; color:var(--text-muted); text-align:center;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.ptap__stat-bars i{
  display:block; height:8px; border-radius:99px; justify-self:end; width:50%;
  background:linear-gradient(90deg, #22c55e, #4ade80);
  transition:width .3s ease;
}
.ptap__stat-bars i.is-r{ justify-self:start; background:linear-gradient(90deg, #4ade80, #22c55e); }

.ptap__actions{ padding:12px 18px 8px; display:flex; justify-content:center; }
.ptap__fight{
  width:min(100%, 420px); border:0; cursor:pointer;
  padding:16px 24px; border-radius:999px;
  font-family:var(--font-display, Unbounded, sans-serif);
  font-weight:900; font-size:17px; letter-spacing:.18em; color:#fff;
  background:linear-gradient(180deg, #e85a4a, #b01e28 60%, #8a1218);
  box-shadow:0 12px 28px #b01e2866, inset 0 1px 0 #ffb0a855;
  transition:transform .15s, filter .15s, opacity .15s;
}
.ptap__fight:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.06); }
.ptap__fight:disabled{ opacity:.4; cursor:not-allowed; }
.ptap__log{
  text-align:center; min-height:1.4em; margin:0 16px 10px;
  font-family:var(--font-mono); font-size:12px; color:#c084fc;
}
.ptap__pickers{ padding:0 14px 12px; display:flex; flex-direction:column; gap:12px; }
.ptap__pick-lbl{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;
}
.ptap__strip{ display:flex; gap:8px; overflow-x:auto; }
.ptap__thumb{
  flex:0 0 auto; width:72px; height:72px; border-radius:16px; border:0; cursor:pointer;
  background:#0a0c12; box-shadow:inset 0 0 0 1px #ffffff14; padding:4px;
  overflow:hidden;
}
.ptap__thumb img{ width:100%; height:100%; object-fit:contain; background:transparent; }
.ptap__thumb.is-on{ box-shadow:inset 0 0 0 2px #a78bfa, 0 0 14px #7c3aed55; }
.ptap.is-fighting .ptap__thumb{ pointer-events:none; opacity:.55; }
.ptap__defend{ padding:12px 14px 16px; border-top:1px solid #ffffff0c; background:#00000050; }
.ptap__defend-on{ display:flex; align-items:center; gap:12px; }
.ptap__defend-on img{ width:40px; height:40px; object-fit:contain; }
.ptap__defend-on b{ display:block; font-size:13px; }
.ptap__defend-on span{ font-size:11px; color:var(--text-muted); }
.ptap__defend-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ptap__defend-form select{
  flex:1; min-width:140px; padding:8px 12px; border-radius:10px;
  border:1px solid #ffffff18; background:#0b0d12; color:inherit;
}
.ptap__result{
  margin:0 14px 16px; padding:16px; border-radius:16px; text-align:center;
  display:flex; flex-direction:column; gap:6px;
}
.ptap__result.is-win{ background:#14532d44; box-shadow:inset 0 0 0 1px #22c55e55; }
.ptap__result.is-lose{ background:#450a0a44; box-shadow:inset 0 0 0 1px #ef444455; }
.ptap__result b{ font-family:var(--font-display, Unbounded, sans-serif); letter-spacing:.14em; font-size:18px; }
.ptap__result span{ font-size:12px; color:var(--text-muted); }

@media (max-width:640px){
  .ptap__bars{ gap:10px; padding:12px; }
  .ptap__arena{ min-height:190px; }
  .ptap__unit img{ width:96px; height:96px; }
  .ptap__stat{ grid-template-columns:32px 1fr 32px; font-size:11px; }
}

.coliseum{
  margin:0 0 28px; border-radius:22px; overflow:hidden;
  background:#0a0b0f; box-shadow:inset 0 0 0 1px #ffffff12, 0 24px 60px #00000055;
}
.coliseum__top{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center;
  padding:12px 14px; background:#00000066; border-bottom:1px solid #ffffff10;
}
.coliseum__top h1{
  margin:0; text-align:center; font-family:var(--font-display, Unbounded, sans-serif);
  font-size:15px; font-weight:800; letter-spacing:.18em;
}
.coliseum__back{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  color:#fff; text-decoration:none; background:#ffffff10; font-size:16px;
}
.coliseum__quota{
  font-family:var(--font-mono); font-size:11px; padding:6px 10px; border-radius:99px;
  background:#ffffff10; color:var(--text-muted);
}
.coliseum__empty{ padding:40px 20px; text-align:center; }
.coliseum__hud{
  display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center;
  padding:14px 14px 8px; position:relative; z-index:2;
}
.coliseum__fighter{ display:flex; align-items:center; gap:10px; min-width:0; }
.coliseum__fighter--right{ flex-direction:row-reverse; text-align:right; }
.coliseum__fighter--right .coliseum__info{ align-items:flex-end; }
.coliseum__avatar{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:#12151c; box-shadow:inset 0 0 0 2px #ffffff22, 0 0 0 3px #00000055;
  display:grid; place-items:center; overflow:hidden;
}
.coliseum__avatar img{ width:40px; height:40px; object-fit:contain; }
.coliseum__info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.coliseum__info b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coliseum__info span{ font-size:11px; color:var(--text-muted); }
.coliseum__pills{ display:flex; flex-wrap:wrap; gap:4px; }
.pill{
  font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:.04em;
  padding:3px 8px; border-radius:99px;
}
.pill--power{ background:#1d3d28; color:#5dff9a; }
.pill--rating{ background:#3a1518; color:#ff8a8a; border-radius:8px; }
.coliseum__vs{
  font-family:var(--font-display, Unbounded, sans-serif); font-weight:900; font-size:14px;
  opacity:.35; letter-spacing:.08em;
}
.coliseum__stage{
  position:relative; height:min(42vw, 280px); min-height:200px;
  background:
    linear-gradient(180deg, #0a0c1288 0%, #0a0c12cc 100%),
    var(--arena-bg) center 40% / cover no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
.coliseum__stage-dim{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 70%, transparent 20%, #050608ee 85%);
  pointer-events:none;
}
.coliseum__timer{
  position:relative; z-index:2; margin-top:12px;
  font-family:var(--font-display, Unbounded, sans-serif); font-weight:900; font-size:28px;
  letter-spacing:.08em; text-shadow:0 2px 0 #000, 0 0 20px #000;
}
.coliseum__sprites{
  position:relative; z-index:2; width:100%; max-width:520px;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 10% 18px; pointer-events:none;
}
.coliseum__sprite{
  width:min(38%, 150px); height:auto; max-height:140px; object-fit:contain;
  filter:drop-shadow(0 12px 18px #000000aa);
  transition:transform .25s ease;
}
.coliseum__sprite--def{ transform:scaleX(-1); }
.coliseum__stage.is-clash .coliseum__sprite--atk{ animation:clashL .45s ease; }
.coliseum__stage.is-clash .coliseum__sprite--def{ animation:clashR .45s ease; }
@keyframes clashL{ 40%{ transform:translateX(18px) scale(1.05); } }
@keyframes clashR{ 40%{ transform:scaleX(-1) translateX(18px) scale(1.05); } }
.coliseum__attack{ padding:8px 18px 16px; display:flex; justify-content:center; }
.coliseum__atk-btn{
  width:min(100%, 420px); border:0; cursor:pointer;
  padding:18px 24px; border-radius:999px;
  font-family:var(--font-display, Unbounded, sans-serif);
  font-weight:900; font-size:18px; letter-spacing:.2em; color:#fff;
  background:linear-gradient(180deg, #e85a4a 0%, #b01e28 55%, #8a1218 100%);
  box-shadow:
    0 12px 32px #b01e2866,
    inset 0 1px 0 #ffb0a866,
    inset 0 -2px 0 #5c0a10;
  transition:transform .15s, filter .15s, opacity .15s;
}
.coliseum__atk-btn:hover:not(:disabled){ transform:translateY(-2px) scale(1.01); filter:brightness(1.06); }
.coliseum__atk-btn:disabled{ opacity:.4; cursor:not-allowed; }
.coliseum__pickers{ padding:0 14px 14px; display:flex; flex-direction:column; gap:12px; }
.coliseum__pick-lbl{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;
}
.coliseum__strip{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.coliseum__thumb{
  flex:0 0 auto; width:56px; height:56px; border-radius:14px; border:0; cursor:pointer;
  background:#12151c; box-shadow:inset 0 0 0 1px #ffffff14; padding:6px;
}
.coliseum__thumb img{ width:100%; height:100%; object-fit:contain; }
.coliseum__thumb.is-on{ box-shadow:inset 0 0 0 2px #F0A81C, 0 0 16px #F0A81C44; }
.coliseum__defend{
  padding:12px 14px 16px; border-top:1px solid #ffffff0c; background:#00000040;
}
.coliseum__defend-on{ display:flex; align-items:center; gap:12px; }
.coliseum__defend-on img{ width:40px; height:40px; object-fit:contain; }
.coliseum__defend-on b{ display:block; font-size:13px; }
.coliseum__defend-on span{ font-size:11px; color:var(--text-muted); }
.coliseum__defend-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.coliseum__defend-form select{
  flex:1; min-width:140px; padding:8px 12px; border-radius:10px;
  border:1px solid #ffffff18; background:#0b0d12; color:inherit;
}

.battle-modal{
  border:0; padding:0; max-width:420px; width:calc(100% - 32px);
  background:transparent; color:inherit;
}
.battle-modal::backdrop{ background:#000000cc; backdrop-filter:blur(4px); }
.battle-modal__inner{
  padding:22px; border-radius:20px; background:#10141c;
  box-shadow:inset 0 0 0 1px #ffffff18, 0 24px 60px #000;
}
.battle-modal__inner.is-win{ box-shadow:inset 0 0 0 1px #3BF08B55, 0 24px 60px #000; }
.battle-modal__inner.is-lose{ box-shadow:inset 0 0 0 1px #ff6b6b44, 0 24px 60px #000; }
.battle-modal__inner h2{
  margin:0 0 14px; text-align:center; font-family:var(--font-display, Unbounded, sans-serif);
  letter-spacing:.16em; font-size:20px;
}
.battle-modal__vs{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:14px;
}
.battle-modal__vs img{ width:56px; height:56px; object-fit:contain; display:block; margin:0 auto 4px; }
.battle-modal__vs b{ display:block; text-align:center; font-size:12px; }
.battle-modal__vs span{ opacity:.4; font-weight:800; }
.battle-modal__log{
  max-height:180px; overflow:auto; margin:0 0 16px; padding-left:18px;
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
}
.battle-modal__inner form{ text-align:center; }

.arena-board{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.arena-board__row{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px;
  background:#ffffff06; box-shadow:inset 0 0 0 1px #ffffff0c;
}
.arena-board__rank{ font-family:var(--font-mono); font-weight:800; font-size:13px; width:36px; color:#F0A81C; }
.arena-board__img{ width:40px; height:40px; object-fit:contain; }
.arena-board__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.arena-board__info b{ font-size:13px; }
.arena-board__info span{ font-size:11px; color:var(--text-muted); }
.arena-board__score{ text-align:right; font-family:var(--font-mono); }
.arena-board__score b{ display:block; font-size:14px; color:var(--accent, #4FE6C4); }
.arena-board__score span{ font-size:10px; color:var(--text-muted); }
.arena-board__empty{ padding:16px; color:var(--text-muted); font-size:13px; }

@media (max-width:640px){
  .coliseum__hud{ grid-template-columns:1fr; gap:12px; }
  .coliseum__vs{ display:none; }
  .coliseum__fighter--right{ flex-direction:row; text-align:left; }
  .coliseum__fighter--right .coliseum__info{ align-items:flex-start; }
  .coliseum__timer{ font-size:22px; }
  .case-btn{ min-width:140px; flex:1; }
}

/* Ekranda gezen böcük — önizleme ile aynı walk cycle */
.pardy-pet{
  position:fixed !important;
  left:0; top:auto !important; bottom:48px !important;
  z-index:9000 !important;
  width:64px !important; height:64px !important;
  cursor:pointer; pointer-events:auto;
  background:transparent !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  overflow:hidden !important;
  transform:none !important;
}
.pardy-pet img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; display:block !important;
  background:transparent !important; border:0 !important;
}
.pardy-pet__sprite{
  width:100% !important;
  height:100% !important;
  background-color:transparent !important;
  background-repeat:no-repeat !important;
  pointer-events:none;
  transform-origin:center bottom;
}
/* ntmonlar.php .broster__walk ile aynı keyframes */
.pardy-pet__sprite.is-walking{
  animation:brosterWalk .55s steps(1) infinite;
}
@media (max-width:640px){
  .pardy-pet{ width:52px !important; height:52px !important; bottom:56px !important; }
}
@media (prefers-reduced-motion: reduce){
  .pardy-pet__sprite.is-walking{ animation:none; background-position:0% 0; }
}

/* ============ ARKADAŞLAR + ÖZEL MESAJ (DM) ============ */
.fr-count{
  display:inline-block; min-width:20px; text-align:center;
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  background:var(--accent-dim, #FF5C3922); color:var(--accent, #FF5C39);
  border-radius:20px; padding:2px 8px; margin-left:6px; vertical-align:1px;
}
.fr-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.fr-row{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(160deg, #ffffff07, #00000030);
  box-shadow:inset 0 0 0 1px #ffffff0E;
  border-radius:14px; padding:10px 14px;
}
.fr-av{
  position:relative; width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#fff; overflow:visible; text-decoration:none;
}
.fr-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.fr-on{
  position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%;
  background:#3BF08B; border:2px solid #12141c;
}
.fr-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fr-name{ font-weight:800; font-size:14px; color:var(--text); text-decoration:none; }
.fr-name:hover{ text-decoration:underline; }
.fr-sub{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Zil bildirimi */
.notif-wrap{ position:relative; }
.notif-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  background:#ED4245; color:#fff; border-radius:20px; padding:0 4px;
  box-shadow:0 0 0 2px #12141c;
}
.notif-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:300;
  width:320px; max-height:420px; overflow:auto;
  background:#161923; border-radius:14px;
  box-shadow:0 18px 44px #000000AA, inset 0 0 0 1px #ffffff14;
  padding:8px;
}
.notif-panel__head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); padding:8px 10px 10px;
}
.notif-panel__head a{ color:var(--accent, #FF5C39); text-decoration:none; letter-spacing:.05em; }
.notif-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px; border-radius:10px; background:#ffffff06; margin-bottom:6px;
}
.notif-item__av{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; color:#fff; text-decoration:none;
}
.notif-item__av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.notif-item__ic{ font-size:20px; line-height:34px; }
.notif-item__body p{ font-size:13px; line-height:1.4; margin:0 0 6px; color:var(--text); }
.notif-item__actions{ display:flex; gap:6px; }
.notif-empty{ padding:18px 12px; text-align:center; font-size:13px; color:var(--text-muted); }

/* Yan menü DM baloncukları */
.dm-dock{ padding:4px 8px 8px; border-top:1px solid #ffffff0C; }
.dm-bub{
  position:relative; display:flex; align-items:center;
  border-radius:12px; transition:background .12s;
}
.dm-bub:hover{ background:#ffffff08; }
.dm-bub__link{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  padding:7px 26px 7px 8px; text-decoration:none; color:inherit;
}
.dm-bub__av{
  position:relative; width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; color:#fff;
}
.dm-bub__av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.dm-bub__on{
  position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%;
  background:#3BF08B; border:2px solid #12141c;
}
.dm-bub__info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dm-bub__info b{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-bub__info small{ font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-bub__badge{
  min-width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  background:#ED4245; color:#fff; border-radius:20px; padding:0 5px; flex:0 0 auto;
}
.dm-bub__close{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border:0; border-radius:50%;
  background:transparent; color:var(--text-faint, #666);
  font-size:14px; line-height:1; cursor:pointer; opacity:0;
  transition:opacity .12s, background .12s;
}
.dm-bub:hover .dm-bub__close{ opacity:1; }
.dm-bub__close:hover{ background:#ED424533; color:#F47B7B; }

/* DM sohbet ekranı */
.dm-head-av{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; text-decoration:none;
}
.dm-head-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.dm-messages{ display:flex; flex-direction:column; gap:6px; }
.dm-msg{ display:flex; }
.dm-msg--mine{ justify-content:flex-end; }
.dm-bubble{
  max-width:72%; padding:9px 12px; border-radius:14px 14px 14px 4px;
  background:#ffffff0C; box-shadow:inset 0 0 0 1px #ffffff0A;
}
.dm-msg--mine .dm-bubble{
  border-radius:14px 14px 4px 14px;
  background:color-mix(in srgb, var(--accent, #FF5C39) 22%, #1a1d28);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent, #FF5C39) 30%, transparent);
}
.dm-text{ font-size:14px; line-height:1.45; word-break:break-word; }
.dm-time{
  display:block; margin-top:3px; text-align:right;
  font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint, #777);
}

/* ============ NT PAROLA (takımlı kelime oyunu) ============ */
.cg-lobby{ display:flex; flex-direction:column; gap:22px; }
.cg-lobby--v2{ gap:18px; }

/* --- Kahraman: kırmızı-mavi cephe hattı --- */
.cg-hero{
  position:relative; overflow:hidden; border-radius:20px;
  padding:44px 34px 110px; background:#0B0D14;
  box-shadow:inset 0 0 0 1px #ffffff12, 0 18px 48px #00000066;
}
.cg-hero__field{ position:absolute; inset:0; pointer-events:none; }
.cg-hero__field--red{
  background:
    radial-gradient(60% 120% at 0% 50%, #ED424530 0%, transparent 60%),
    linear-gradient(105deg, #ED42451C 0%, transparent 46%);
}
.cg-hero__field--blue{
  background:
    radial-gradient(60% 120% at 100% 50%, #4E7BEC30 0%, transparent 60%),
    linear-gradient(-105deg, #4E7BEC1C 0%, transparent 46%);
}
.cg-hero__scan{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(#ffffff05 1px, transparent 1px),
    linear-gradient(90deg, #ffffff05 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 90% at 50% 30%, #000 30%, transparent 100%);
          mask-image:radial-gradient(80% 90% at 50% 30%, #000 30%, transparent 100%);
}
.cg-hero__inner{ position:relative; text-align:center; }
.cg-hero__tag{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:3px; color:#FFC46B; padding:5px 14px; border-radius:20px;
  background:#FFB02E14; box-shadow:inset 0 0 0 1px #FFB02E33;
}
.cg-hero__title{
  margin:16px 0 10px; font-size:clamp(34px, 6vw, 58px); font-weight:900;
  letter-spacing:4px; line-height:1;
  background:linear-gradient(90deg, #FF8A8C 12%, #fff 50%, #8FB0FF 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cg-hero__title em{ font-style:normal; }
.cg-hero__sub{ margin:0 auto; color:var(--text-muted); font-size:14px; line-height:1.65; max-width:560px; }
.cg-hero__sub b{ color:#FFC46B; }
.cg-hero__cta{ margin-top:18px; display:inline-flex; }
.cg-hero__cards{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; gap:14px; pointer-events:none;
}
.cg-hero--split{ padding:34px 30px; }
.cg-hero__grid{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr;
  gap:30px; align-items:center;
}
.cg-hero__inner--left{ text-align:left; }
.cg-hero__inner--left .cg-hero__sub{ margin:0; max-width:none; }
.cg-hero__cards--inline{
  position:static; transform:none; margin-top:26px; justify-content:flex-start;
}
.cg-hero__panel{
  position:relative; border-radius:16px; padding:20px 20px 22px;
  background:linear-gradient(170deg, #14182399, #0E111Ac9);
  box-shadow:inset 0 0 0 1px #ffffff14, 0 12px 34px #00000055;
  backdrop-filter:blur(6px);
}
.cg-hero__create{ display:flex; flex-direction:column; gap:14px; }
.cg-hero__create h3{ margin:0; font-size:16px; letter-spacing:.4px; }
.cg-hero__panel-msg{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; padding:18px 6px; }
.cg-hero__panel-ico{ font-size:36px; color:#FFC46B; filter:drop-shadow(0 4px 14px #FFB02E44); }
.cg-hero__panel-msg h3{ margin:0; font-size:16px; }
.cg-hero__panel-msg p{ margin:0; font-size:13px; color:var(--text-muted); }
.cg-hero__panel-btns{ display:flex; gap:10px; }
.cg-hero__create .cg-deck-pick{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.cg-hero__create .cg-deck{ position:relative; }
.cg-hero__create .cg-deck__card{ width:100%; height:72px; }
.cg-hero__create .cg-deck__ico{ font-size:22px; }
.cg-hero__create .cg-deck__name{ font-size:11.5px; }
.cg-hero__create .cg-create__go{ align-self:stretch; text-align:center; justify-content:center; }
.cg-hero__create .cg-create__pass small{ font-size:11px; }
@media (max-width:900px){
  .cg-hero__grid{ grid-template-columns:1fr; }
  .cg-hero__inner--left{ text-align:center; }
  .cg-hero__cards--inline{ justify-content:center; }
}
.cg-mini{
  width:86px; height:58px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:800; font-size:12px; letter-spacing:1px;
  box-shadow:0 10px 24px #00000088, inset 0 0 0 1px #ffffff1A;
  animation:cgMiniFloat 5s ease-in-out infinite;
}
.cg-mini--red{ background:linear-gradient(160deg,#B33234,#7E1F21); color:#FFD9DA; transform:rotate(-7deg); }
.cg-mini--blue{ background:linear-gradient(160deg,#3557B8,#22397E); color:#D9E4FF; transform:rotate(5deg); animation-delay:1.2s; }
.cg-mini--black{ background:linear-gradient(160deg,#15151B,#000); font-size:19px; color:#F47B7B; transform:rotate(-3deg); animation-delay:2.1s; box-shadow:0 10px 24px #000000AA, inset 0 0 0 1px #ED424544; }
.cg-mini--neutral{ background:linear-gradient(160deg,#4A4E58,#33363E); color:#C9CCD4; transform:rotate(8deg); animation-delay:3s; }
@keyframes cgMiniFloat{ 50%{ translate:0 -6px; } }
@media (max-width:640px){
  .cg-hero{ padding:34px 18px 86px; }
  .cg-mini{ width:64px; height:44px; font-size:10px; }
}

/* --- Parola v2: briefing masası --- */
.cg-hero--v2{
  padding:36px 32px;
  background:
    radial-gradient(90% 80% at 8% 20%, #8B1E2218 0%, transparent 55%),
    radial-gradient(90% 80% at 92% 80%, #1E3F9A18 0%, transparent 55%),
    linear-gradient(165deg, #12151c 0%, #0a0c10 100%);
  box-shadow:inset 0 0 0 1px #ffffff10, 0 24px 60px #00000070;
}
.cg-hero__glow{ position:absolute; inset:auto; pointer-events:none; border-radius:50%; filter:blur(40px); opacity:.55; }
.cg-hero__glow--red{ width:220px; height:220px; left:-40px; top:-60px; background:#ED4245; }
.cg-hero__glow--blue{ width:240px; height:240px; right:-50px; bottom:-80px; background:#4E7BEC; }
.cg-hero--v2 .cg-hero__brand{
  margin:0 0 12px;
  font-family:var(--font-mono); font-size:11px; font-weight:800;
  letter-spacing:.28em; color:#E8C98A;
}
.cg-hero--v2 .cg-hero__title{
  margin:0 0 22px;
  font-family:var(--font-display), Georgia, serif;
  font-size:clamp(32px, 5.2vw, 52px);
  font-weight:800; letter-spacing:-.02em; line-height:1.05;
  background:none; -webkit-background-clip:unset; background-clip:unset;
  color:#F4EFE4;
}
.cg-hero--v2 .cg-hero__title em{
  font-style:normal;
  background:linear-gradient(90deg, #F47B7B, #9BB6FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cg-hero__sample{
  display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
}
.cg-sample{
  min-width:88px; min-height:58px; padding:10px 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  font-family:var(--font-display), Georgia, serif;
  font-weight:800; font-size:13px; letter-spacing:.04em;
  box-shadow:0 6px 0 #00000040, 0 10px 18px #00000055;
  transform:rotate(-2deg);
}
.cg-sample:nth-child(2){ transform:rotate(2.5deg); }
.cg-sample:nth-child(3){ transform:rotate(-1.5deg); }
.cg-sample:nth-child(4){ transform:rotate(3deg); }
.cg-sample--sealed{
  background:linear-gradient(165deg, #F3EBD4, #D9CBA8);
  color:#1C1812;
  border:1px solid #B9A888;
  box-shadow:0 5px 0 #A89268, 0 10px 18px #00000055;
}
.cg-sample--red{
  background:linear-gradient(165deg, #C93A3C, #7A1A1C);
  color:#FFF0F0; border:1px solid #E07072;
}
.cg-sample--blue{
  background:linear-gradient(165deg, #3F6FD0, #1B3A86);
  color:#EEF3FF; border:1px solid #7AA0F0;
}
.cg-sample--black{
  background:linear-gradient(165deg, #1A1A1E, #050506);
  color:#F47B7B; border:1px solid #ED424566; font-size:18px;
}
.cg-hero--v2 .cg-hero__panel{
  border-radius:18px;
  background:linear-gradient(175deg, rgba(22,26,36,.92), rgba(10,12,18,.96));
  box-shadow:inset 0 0 0 1px #ffffff16, 0 16px 40px #00000066;
}
@media (max-width:900px){
  .cg-hero--v2{ padding:28px 18px; }
  .cg-hero__sample{ justify-content:center; }
}

/* --- Görev adımları --- */
.cg-steps{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-top:14px; }
@media (max-width:1000px){ .cg-steps{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .cg-steps{ grid-template-columns:1fr; } }
.cg-step{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:16px 14px 14px; border-radius:14px; overflow:hidden;
  background:linear-gradient(170deg, #ffffff09, #ffffff03);
  box-shadow:inset 0 0 0 1px #ffffff0E;
  transition:transform .15s, box-shadow .15s;
}
.cg-step:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px #ffffff22, 0 10px 22px #00000055; }
.cg-step__num{
  position:absolute; top:6px; right:10px;
  font-family:var(--font-mono); font-size:26px; font-weight:900; color:#ffffff0F;
}
.cg-step__ico{ font-size:22px; color:#FFC46B; }
.cg-step--danger .cg-step__ico{ color:#F47B7B; }
.cg-step--power .cg-step__ico{ color:#7BD4F4; }
.cg-step b{ display:block; font-size:13.5px; margin-bottom:3px; }
.cg-step small{ display:block; font-size:11.5px; line-height:1.5; color:var(--text-muted); }
.cg-step--danger{ box-shadow:inset 0 0 0 1px #ED424533; background:linear-gradient(170deg, #ED42450D, #ffffff03); }
.cg-step--power{ box-shadow:inset 0 0 0 1px #FFB02E30; background:linear-gradient(170deg, #FFB02E0C, #ffffff03); }

/* --- Oda kurma: operasyon paneli --- */
.cg-create{
  border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg, #171B28, #10131C);
  box-shadow:inset 0 0 0 1px #ffffff10;
}
.cg-create__head{
  padding:18px 22px 4px;
}
.cg-create__head h3{ margin:0 0 4px; font-size:17px; }
.cg-create__head p{ margin:0; font-size:12.5px; color:var(--text-muted); }
.cg-create__body{ padding:16px 22px 20px; display:flex; flex-direction:column; gap:16px; }
.cg-create__name span, .cg-create__decks > span{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--text-muted);
}
.cg-create__name input{ width:100%; }
/* Oyun girdileri: koyu tema (tarayıcı varsayılan beyazı kalmasın) */
.cg-create__name input, .cg-clue-form input, .cg-clue-form select{
  background:#0E1118; border:1px solid #ffffff16; border-radius:10px;
  padding:11px 14px; font-size:14px; color:var(--text, #E8EAF0);
  -webkit-appearance:none; appearance:none;
}
.cg-create__name input::placeholder, .cg-clue-form input::placeholder{ color:var(--text-faint, #666); }
.cg-create__name input:focus, .cg-clue-form input:focus, .cg-clue-form select:focus{
  outline:none; border-color:color-mix(in srgb, var(--accent,#FF5C39) 55%, transparent);
  box-shadow:0 0 0 2px var(--accent-dim, #FF5C3933);
}
.cg-clue-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px;
}
/* İskambil gibi deste seçimi */
.cg-deck-pick{ display:flex; gap:10px; flex-wrap:wrap; }
.cg-deck input{ position:absolute; opacity:0; pointer-events:none; }
.cg-deck__card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:118px; height:88px; border-radius:14px; cursor:pointer; text-align:center;
  background:linear-gradient(165deg, #222738, #171B26);
  box-shadow:inset 0 0 0 1px #ffffff14, 0 3px 8px #00000044;
  transition:transform .15s, box-shadow .15s;
}
.cg-deck__card:hover{ transform:translateY(-3px) rotate(-1deg); }
.cg-deck__ico{ font-size:26px; color:#FFC46B; }
.cg-deck__name{ font-size:12px; font-weight:700; padding:0 8px; }
.cg-deck input:checked + .cg-deck__card{
  transform:translateY(-3px);
  background:linear-gradient(165deg, color-mix(in srgb, var(--accent,#FF5C39) 24%, #222738), #171B26);
  box-shadow:inset 0 0 0 2px var(--accent, #FF5C39), 0 6px 16px color-mix(in srgb, var(--accent,#FF5C39) 30%, transparent);
}
.cg-create__go{ align-self:flex-start; padding:11px 26px; }
.cg-login-hint{ color:var(--text-muted); }

/* --- Aktif odalar --- */
.cg-room-list{ display:flex; flex-direction:column; gap:10px; }
.cg-room-list__head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px;
}
.cg-room-list__head h3{ margin:0; font-size:16px; }
.cg-room-list__head span{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.cg-room-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:16px;
  background:linear-gradient(110deg, #ffffff0A, #ffffff04 55%, #4E7BEC08);
  box-shadow:inset 0 0 0 1px #ffffff10;
  transition:transform .15s, box-shadow .15s;
}
.cg-room-card:hover{ transform:translateX(3px); box-shadow:inset 0 0 0 1px #ffffff22, 0 8px 22px #00000040; }
.cg-room-card.is-playing{ opacity:.6; }
@media (max-width:640px){
  .cg-room-card{ flex-wrap:wrap; }
  .cg-room-card__info{ min-width:0; flex:1; }
  .cg-room-card__act{ width:100%; justify-content:flex-end; }
  .cg-join-form{ flex:1; justify-content:flex-end; }
  .cg-join-form input[type=password]{ flex:1; max-width:180px; }
}
.cg-room-card__deck{
  width:44px; height:44px; flex:0 0 auto; border-radius:12px; font-size:21px;
  display:flex; align-items:center; justify-content:center; color:#FFC46B;
  background:#ffffff0A; box-shadow:inset 0 0 0 1px #ffffff10;
}
.cg-room-card__info{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.cg-room-card__info strong{ font-size:14.5px; }
.cg-room-card__meta{ font-size:12px; color:var(--text-muted); }
.cg-room-card__count{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-muted); flex:0 0 auto; }
.cg-room-card__count b{ color:var(--text, #E8EAF0); }
.cg-room-card__act{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.cg-status{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  padding:5px 11px; border-radius:20px; letter-spacing:.4px;
}
.cg-status i{ width:6px; height:6px; border-radius:50%; }
.cg-status--open{ background:#3BA55D1E; color:#59CE7E; }
.cg-status--open i{ background:#59CE7E; box-shadow:0 0 8px #59CE7E; animation:cgPulse 1.8s infinite; }
.cg-status--live{ background:#ED42451E; color:#F47B7B; }
.cg-status--live i{ background:#F47B7B; box-shadow:0 0 8px #F47B7B; }
.cg-status--full{ background:#F0A81C1E; color:#F0A81C; }
.cg-status--full i{ background:#F0A81C; box-shadow:0 0 8px #F0A81C; }
.cg-room-card.is-full{ opacity:.92; }
.cg-lock{ font-size:12px; opacity:.9; color:#FFC46B; }
.cg-join-form{ display:flex; align-items:center; gap:8px; }
.cg-join-form input[type=password]{
  width:130px; background:#0E1118; border:1px solid #ffffff16; border-radius:9px;
  padding:8px 11px; font-size:12.5px; color:var(--text, #E8EAF0);
}
.cg-join-form input[type=password]:focus{
  outline:none; border-color:color-mix(in srgb, var(--accent,#FF5C39) 55%, transparent);
}
/* Oda kurarken şifre alanı */
.cg-create__pass span em{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--text-faint,#666); }
.cg-create__pass small{ display:block; margin-top:7px; font-size:11.5px; color:var(--text-muted); }
/* Şifre kapısı */
.cg-passgate{ display:flex; justify-content:center; padding:40px 0; }
.cg-passgate__card{
  width:100%; max-width:400px; padding:34px 28px; border-radius:20px; text-align:center;
  background:
    radial-gradient(120% 70% at 50% 0%, #FFB02E14 0%, transparent 60%),
    linear-gradient(170deg, #171B28, #10131C);
  box-shadow:inset 0 0 0 1px #FFB02E2E, 0 18px 44px #00000066;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.cg-passgate__lock{ font-size:42px; color:#FFC46B; filter:drop-shadow(0 6px 16px #FFB02E44); }
.cg-passgate__card h3{ margin:0; font-size:19px; }
.cg-passgate__card p{ margin:0; font-size:13px; line-height:1.6; color:var(--text-muted); }
.cg-passgate__card form{ display:flex; flex-direction:column; gap:10px; width:100%; }
.cg-passgate__card input[type=password]{
  width:100%; text-align:center; letter-spacing:2px;
  background:#0E1118; border:1px solid #ffffff16; border-radius:11px;
  padding:12px 14px; font-size:15px; color:var(--text, #E8EAF0);
}
.cg-passgate__card input[type=password]:focus{
  outline:none; border-color:color-mix(in srgb, var(--accent,#FF5C39) 55%, transparent);
  box-shadow:0 0 0 2px var(--accent-dim, #FF5C3933);
}
.cg-passgate__back{ font-size:12.5px; color:var(--text-muted); }
.cg-passgate__back:hover{ color:#fff; }

/* ============ ŞAKAMATİK ============ */
.sk-page{ display:flex; flex-direction:column; gap:18px; }
.sk-hero{
  position:relative; overflow:hidden; border-radius:20px; padding:40px 30px;
  background:
    radial-gradient(70% 120% at 15% 0%, #8E44AD33 0%, transparent 55%),
    radial-gradient(70% 120% at 85% 100%, #FF5C3926 0%, transparent 55%),
    #0B0D14;
  box-shadow:inset 0 0 0 1px #ffffff12, 0 18px 48px #00000066;
  text-align:center;
}
.sk-hero__tag{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:3px; color:#D9A6FF; padding:5px 14px; border-radius:20px;
  background:#8E44AD22; box-shadow:inset 0 0 0 1px #8E44AD55;
}
.sk-hero h2{
  margin:14px 0 10px; font-size:clamp(28px, 5vw, 44px); font-weight:900; letter-spacing:1px;
}
.sk-hero h2 em{
  font-style:normal;
  background:linear-gradient(90deg, #D9A6FF, #FF8A6B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sk-hero p{ margin:0 auto; color:var(--text-muted); font-size:14px; line-height:1.7; max-width:560px; }
.sk-hero p b{ color:#FF8A6B; }
.sk-stats{ display:flex; gap:14px; justify-content:center; margin-top:22px; }
.sk-stat{
  min-width:130px; padding:12px 20px; border-radius:14px;
  background:#ffffff08; box-shadow:inset 0 0 0 1px #ffffff14;
  display:flex; flex-direction:column; gap:2px;
}
.sk-stat b{ font-size:24px; }
.sk-stat span{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); }
.sk-stat--mine{ box-shadow:inset 0 0 0 1px #FF5C3955; background:#FF5C390E; }
.sk-stat--mine b{ color:#FF8A6B; }

.sk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width:900px){ .sk-grid{ grid-template-columns:1fr; } }
.sk-card__count{
  align-self:flex-start; font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  color:#FF8A6B; background:#FF5C3914; padding:5px 12px; border-radius:12px;
  box-shadow:inset 0 0 0 1px #FF5C3933;
}
.sk-card{
  position:relative; border-radius:18px; padding:24px 22px;
  background:linear-gradient(165deg, #171B28, #10131C);
  box-shadow:inset 0 0 0 1px #ffffff12;
  display:flex; flex-direction:column; gap:12px;
}
.sk-card__badge{
  position:absolute; top:16px; right:16px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:800; letter-spacing:2px;
  color:#59CE7E; background:#59CE7E1A; padding:4px 10px; border-radius:10px;
  box-shadow:inset 0 0 0 1px #59CE7E44;
}
.sk-card__badge--soon{ color:#9AA0AE; background:#ffffff0C; box-shadow:inset 0 0 0 1px #ffffff1e; }
.sk-card__ico{ font-size:34px; }
.sk-card h3{ margin:0; font-size:17px; }
.sk-card p{ margin:0; font-size:13px; line-height:1.65; color:var(--text-muted); }
.sk-card--soon{ opacity:.62; }
.sk-card__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-muted); }
.sk-card__steps b{ color:#FF8A6B; }
.sk-card__link{ display:flex; gap:8px; margin-top:4px; }
.sk-card__link input{
  flex:1; min-width:0; background:#0E1118; border:1px solid #ffffff16; border-radius:10px;
  padding:10px 12px; font-size:12px; color:var(--text-muted); font-family:var(--font-mono);
}
.sk-card__try{ font-size:12.5px; color:var(--text-muted); }
.sk-card__try:hover{ color:#fff; }
.sk-card__login{ font-size:13px !important; }

.sk-board{
  border-radius:18px; padding:20px 22px;
  background:linear-gradient(165deg, #171B28, #10131C);
  box-shadow:inset 0 0 0 1px #ffffff12;
  display:flex; flex-direction:column; gap:8px;
}
.sk-board h3{ margin:0 0 6px; font-size:15px; }
.sk-board__row{
  display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:11px;
  background:#ffffff06;
}
.sk-board__row.is-me{ box-shadow:inset 0 0 0 1px #FF5C3955; background:#FF5C390E; }
.sk-board__rank{ width:32px; text-align:center; font-size:15px; }
.sk-board__row b{ flex:1; font-size:14px; }
.sk-board__count{ font-size:12.5px; color:var(--text-muted); }

.sk-note{ font-size:12.5px; color:var(--text-muted); line-height:1.6; text-align:center; margin:4px 0 0; }

/* Oda */
.cg-room{ display:flex; flex-direction:column; gap:14px; }
.cg-room__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-radius:14px;
  background:linear-gradient(90deg, #ffffff08, #ffffff04);
  box-shadow:inset 0 0 0 1px #ffffff0C;
}
.cg-room__title{ display:flex; align-items:center; gap:12px; min-width:0; }
.cg-room__title small{ display:block; color:var(--text-muted); font-size:11.5px; }
.cg-back{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:#ffffff0C; color:var(--text-muted); text-decoration:none;
  flex:0 0 auto; font-size:16px;
}
.cg-back:hover{ background:#ffffff18; color:#fff; }
.cg-leave{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; }
@keyframes cgPulse{ 50%{ opacity:.55; } }

/* ===== SVG ikon seti (emoji yerine) ===== */
.cg-ic{
  width:1em; height:1em; flex:0 0 auto;
  display:inline-block; vertical-align:-.125em;
  pointer-events:none; user-select:none;
}
.cg-ic--sm{ width:.85em; height:.85em; }
.cg-room__key{
  width:34px; height:34px; flex:0 0 auto; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px; color:#FFC46B;
  background:linear-gradient(160deg,#FFB02E1E,#FFB02E08);
  box-shadow:inset 0 0 0 1px #FFB02E33;
}
.cg-lock .cg-ic{ vertical-align:-.08em; }

/* ===== SKORBORD: kırmızı blok · dairesel süre · mavi blok ===== */
.cg-sb{ display:flex; align-items:stretch; gap:12px; }
.cg-sb__team{
  flex:1; min-width:0; display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:16px;
  background:linear-gradient(180deg,#ffffff06,#ffffff02);
  box-shadow:inset 0 0 0 1px #ffffff0C;
  transition:box-shadow .25s, background .25s, opacity .25s;
  opacity:.62;
}
.cg-sb__team--red{
  background:radial-gradient(130% 100% at 0% 50%, #ED424516 0%, transparent 65%), linear-gradient(180deg,#ffffff05,#ffffff02);
  box-shadow:inset 0 0 0 1px #ED424538;
}
.cg-sb__team--blue{
  justify-content:flex-end; text-align:right;
  background:radial-gradient(130% 100% at 100% 50%, #4E7BEC16 0%, transparent 65%), linear-gradient(180deg,#ffffff05,#ffffff02);
  box-shadow:inset 0 0 0 1px #4E7BEC38;
}
.cg-sb__team.is-turn{ opacity:1; }
.cg-sb__team--red.is-turn{ box-shadow:inset 0 0 0 1px #ED4245AA, 0 0 22px #ED424522; }
.cg-sb__team--blue.is-turn{ box-shadow:inset 0 0 0 1px #4E7BECAA, 0 0 22px #4E7BEC22; }
.cg-sb__emblem{
  width:40px; height:40px; border-radius:13px; flex:0 0 auto; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  background:#00000040; box-shadow:inset 0 0 0 1px #ffffff12;
}
.cg-sb__team--red .cg-sb__emblem{ color:#F47B7B; box-shadow:inset 0 0 0 1px #ED424555; }
.cg-sb__team--blue .cg-sb__emblem{ color:#7BA9F4; box-shadow:inset 0 0 0 1px #4E7BEC55; }
.cg-sb__info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cg-sb__info--right{ align-items:flex-end; }
.cg-sb__info small{
  font-family:var(--font-mono); font-size:9.5px; font-weight:800; letter-spacing:2.5px;
  color:var(--text-muted);
}
.cg-sb__team--red .cg-sb__info small{ color:#F47B7B; }
.cg-sb__team--blue .cg-sb__info small{ color:#7BA9F4; }
.cg-sb__num{ display:flex; align-items:baseline; gap:7px; }
.cg-sb__num b{ font-family:var(--font-mono); font-weight:900; font-size:26px; line-height:1; color:var(--text,#E8EAF0); }
.cg-sb__num span{ font-size:10px; color:var(--text-muted); white-space:nowrap; }
.cg-sb__turn{
  margin-left:auto; flex:0 0 auto; visibility:hidden;
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:1.5px;
  padding:4px 9px; border-radius:9px;
  animation:cgPulse 1.4s infinite;
}
.cg-sb__team--blue .cg-sb__turn{ margin-left:0; margin-right:auto; }
.cg-sb__team--red .cg-sb__turn{ color:#FFD7D7; background:#ED424530; box-shadow:inset 0 0 0 1px #ED424566; }
.cg-sb__team--blue .cg-sb__turn{ color:#D7E4FF; background:#4E7BEC30; box-shadow:inset 0 0 0 1px #4E7BEC66; }
.cg-sb__mid{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.cg-sb__phase{
  font-family:var(--font-mono); font-size:8.5px; font-weight:800; letter-spacing:2px;
  color:var(--text-muted); white-space:nowrap;
}
/* Dairesel geri sayım: --p (0-100) konik halkayı doldurur */
.cg-timer{
  position:relative; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#00000045; box-shadow:inset 0 0 0 1px #ffffff10;
  color:#8B8F98;
}
.cg-timer::before{
  content:''; position:absolute; inset:2px; border-radius:50%;
  background:conic-gradient(currentColor calc(var(--p,0)*1%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  transition:background .3s;
}
.cg-timer i{
  font-style:normal; font-family:var(--font-mono); font-weight:900; font-size:16px;
  color:var(--text,#E8EAF0);
}
.cg-timer--red{ color:#F47B7B; }
.cg-timer--blue{ color:#7BA9F4; }
.cg-timer.is-low{ color:#ED4245; }
.cg-timer.is-low i{ color:#F47B7B; animation:cgPulse 1s infinite; }
@media (max-width:640px){
  .cg-sb{ gap:8px; }
  .cg-sb__team{ padding:9px 10px; gap:8px; }
  .cg-sb__emblem{ width:30px; height:30px; font-size:15px; border-radius:10px; }
  .cg-sb__num b{ font-size:20px; }
  .cg-sb__num span{ display:none; }
  .cg-sb__turn{ display:none; }
  .cg-sb__phase{ display:none; }
  .cg-timer{ width:46px; height:46px; }
  .cg-timer i{ font-size:13px; }
}

/* Lobi: savaş odası */
.cg-vs-banner{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:14px 0 4px; user-select:none;
}
.cg-vs-banner__side{
  font-family:var(--font-mono); font-weight:900; font-size:clamp(17px, 3vw, 26px); letter-spacing:6px;
}
.cg-vs-banner__side--red{ color:#F47B7B; text-shadow:0 0 24px #ED424566; }
.cg-vs-banner__side--blue{ color:#7BA9F4; text-shadow:0 0 24px #4E7BEC66; }
.cg-vs-banner__badge{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:900; font-size:14px; color:#FFC46B;
  background:radial-gradient(circle at 32% 28%, #2A2416, #14110A);
  box-shadow:inset 0 0 0 1px #FFB02E44, 0 0 24px #FFB02E22;
  transform:rotate(-8deg);
}
.cg-teams{ display:grid; grid-template-columns:1fr .85fr 1fr; gap:14px; }
@media (max-width:900px){ .cg-teams{ grid-template-columns:1fr; } }
.cg-team{
  position:relative; overflow:hidden;
  padding:18px; border-radius:18px; display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, #ffffff07, #ffffff03);
  box-shadow:inset 0 0 0 1px #ffffff0C;
}
.cg-team--red{
  box-shadow:inset 0 0 0 1px #ED424545;
  background:
    radial-gradient(120% 60% at 50% 0%, #ED424518 0%, transparent 60%),
    linear-gradient(180deg, #ffffff05, #ffffff02);
}
.cg-team--blue{
  box-shadow:inset 0 0 0 1px #4E7BEC45;
  background:
    radial-gradient(120% 60% at 50% 0%, #4E7BEC18 0%, transparent 60%),
    linear-gradient(180deg, #ffffff05, #ffffff02);
}
.cg-team__head{ display:flex; align-items:center; gap:10px; }
.cg-team__head--center{ justify-content:center; }
.cg-team__emblem{
  width:36px; height:36px; border-radius:11px; font-size:19px;
  display:flex; align-items:center; justify-content:center;
  background:#00000040; box-shadow:inset 0 0 0 1px #ffffff14;
}
.cg-team--red .cg-team__emblem{ color:#F47B7B; box-shadow:inset 0 0 0 1px #ED424555; }
.cg-team--blue .cg-team__emblem{ color:#7BA9F4; box-shadow:inset 0 0 0 1px #4E7BEC55; }
.cg-team h4{ margin:0; font-size:15px; letter-spacing:.4px; }
.cg-team__roles{ display:flex; flex-direction:column; gap:12px; }
.cg-role{
  padding:12px; border-radius:14px; display:flex; flex-direction:column; gap:8px;
  background:#00000030; box-shadow:inset 0 0 0 1px #ffffff0A;
}
.cg-role__label{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:2px; color:var(--text-muted);
}
.cg-role__label .cg-ic{ font-size:13px; }
.cg-role__list{ display:flex; flex-direction:column; gap:6px; min-height:34px; }
.cg-role__btn{
  align-self:flex-start; border:0; cursor:pointer;
  font-size:11.5px; font-weight:700; padding:7px 13px; border-radius:9px;
  background:#ffffff0E; color:var(--text-muted);
  box-shadow:inset 0 0 0 1px #ffffff14;
  transition:background .12s, color .12s, transform .12s;
}
.cg-role__btn:hover{ background:#ffffff1C; color:#fff; transform:translateY(-1px); }
.cg-team--red .cg-role__btn:hover{ box-shadow:inset 0 0 0 1px #ED4245AA; }
.cg-team--blue .cg-role__btn:hover{ box-shadow:inset 0 0 0 1px #4E7BECAA; }
.cg-team__list{ display:flex; flex-direction:column; gap:6px; min-height:52px; }
.cg-empty-slot{ margin:0; font-size:11.5px; color:var(--text-faint,#666); font-style:italic; }
.cg-empty-slot .cg-ic{ color:#59CE7E; margin-right:4px; }
.cg-hint{ margin:0; font-size:12px; color:var(--text-muted); line-height:1.6; text-align:center; }
.cg-hint b{ color:#FFC46B; }
.cg-invite{
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;
  padding:12px; border-radius:14px;
  background:#00000030; box-shadow:inset 0 0 0 1px #ffffff0A;
}
.cg-invite span{ font-size:11.5px; color:var(--text-muted); }
.cg-invite__btn{
  border:0; cursor:pointer; font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:10px;
  background:#ffffff10; color:var(--text, #E8EAF0);
  box-shadow:inset 0 0 0 1px #ffffff18;
  transition:background .12s;
  user-select:none;
}
.cg-invite__btn em{ font-style:normal; }
.cg-invite__btn:hover{ background:#ffffff1E; }
.cg-start-btn{
  width:100%; padding:13px 0; font-size:15px; letter-spacing:1px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.cg-chip{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px;
  background:#ffffff0A; font-size:13px; box-shadow:inset 0 0 0 1px #ffffff08;
}
.cg-chip.is-me{ box-shadow:inset 0 0 0 1px var(--accent, #FF5C39); background:color-mix(in srgb, var(--accent,#FF5C39) 10%, #ffffff08); }
.cg-chip__av{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; color:#fff;
}
.cg-chip__role, .cg-chip__owner{ font-size:12px; display:inline-flex; align-items:center; }
.cg-chip__role{ color:#7BD4F4; }
.cg-chip__owner{ color:#FFC46B; }
/* "Odanın En İyisi" rozeti: en çok doğru kart açan oyuncu */
.cg-chip.is-best{ box-shadow:inset 0 0 0 1px #FFB02E66, 0 0 14px #FFB02E22; }
.cg-chip__best{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:9px; font-weight:800; letter-spacing:1px;
  color:#1A1200; background:linear-gradient(120deg, #FFC46B, #FFB02E);
  padding:2px 7px; border-radius:8px; white-space:nowrap;
  box-shadow:0 2px 8px #FFB02E44;
}
.cg-chip__best .cg-ic{ width:10px; height:10px; fill:currentColor; }
.cg-best-chip{
  display:inline-flex; align-items:center; gap:4px; margin-left:8px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.6px;
  color:#FFC46B; background:#FFB02E14; padding:3px 10px; border-radius:12px;
  box-shadow:inset 0 0 0 1px #FFB02E33;
}
.cg-finish__best{
  margin-top:14px; padding:10px 18px; border-radius:12px; font-size:13.5px;
  color:#FFC46B; background:#FFB02E12; box-shadow:inset 0 0 0 1px #FFB02E33;
}
.cg-finish__best b{ color:#fff; }

/* Oyun tahtası */
.cg-statusbar{
  position:relative; overflow:hidden;
  padding:14px 18px; border-radius:14px; font-size:14px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:linear-gradient(90deg, #ffffff09, #ffffff04);
  box-shadow:inset 0 0 0 1px #ffffff0C;
}
.cg-statusbar::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.cg-statusbar--red{ box-shadow:inset 0 0 0 1px #ED424540; }
.cg-statusbar--red::before{ background:linear-gradient(#F47B7B,#B33234); box-shadow:0 0 14px #ED4245AA; }
.cg-statusbar--blue{ box-shadow:inset 0 0 0 1px #4E7BEC40; }
.cg-statusbar--blue::before{ background:linear-gradient(#7BA9F4,#3557B8); box-shadow:0 0 14px #4E7BECAA; }
.cg-clue-chip{
  font-family:var(--font-mono); font-weight:800; font-size:14.5px;
  padding:6px 14px; border-radius:22px;
  background:linear-gradient(135deg,#FFB02E22,#FF5C3922); color:#FFC46B;
  box-shadow:inset 0 0 0 1px #FFB02E3A, 0 0 18px #FFB02E14;
}
.cg-freeze{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#7BD4F4; }
.cg-clue-chip{ display:inline-flex; align-items:center; gap:7px; }
.cg-best-chip .cg-ic{ fill:#FFC46B33; }

/* Tahmin fazı: ipucu kelimesi + istenen kart sayısı büyük panelde */
.cg-statusbar--big{ padding:16px 20px; gap:18px; }
.cg-cluebig{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 18px; border-radius:14px;
  background:linear-gradient(135deg,#FFB02E1C,#FF5C3914);
  box-shadow:inset 0 0 0 1px #FFB02E42, 0 0 26px #FFB02E14;
}
.cg-cluebig__label{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10px; font-weight:800; letter-spacing:2px;
  color:#FFC46B;
}
.cg-cluebig__label .cg-ic{ font-size:14px; }
.cg-cluebig__word{
  font-family:var(--font-mono); font-weight:900; font-size:clamp(20px, 3.4vw, 28px);
  letter-spacing:1px; color:#fff; text-transform:uppercase;
  text-shadow:0 0 22px #FFB02E55;
}
.cg-cluebig__count{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:5px 13px; border-radius:11px;
  background:#FFB02E22; box-shadow:inset 0 0 0 1px #FFB02E4D;
}
.cg-cluebig__count b{ font-family:var(--font-mono); font-weight:900; font-size:22px; line-height:1; color:#FFC46B; }
.cg-cluebig__count small{ font-size:10px; color:#FFC46BCC; letter-spacing:.5px; }
.cg-cluebig__side{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.cg-cluebig__side > b{ font-size:14.5px; }
.cg-guessleft{ font-size:12px; color:var(--text-muted); }
.cg-guessleft b{ color:var(--text,#E8EAF0); font-family:var(--font-mono); }
@media (max-width:640px){
  .cg-statusbar--big{ padding:12px 14px; gap:10px; }
  .cg-cluebig{ width:100%; justify-content:center; padding:9px 12px; gap:10px; }
  .cg-cluebig__side{ width:100%; align-items:center; text-align:center; }
}

/* "Geç" butonu: tahmincinin sırayı devretme aksiyonu */
.cg-pass-btn{
  border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px; border-radius:13px;
  font-weight:800; font-size:14px; letter-spacing:.4px;
  color:var(--text,#E8EAF0);
  background:linear-gradient(160deg,#ffffff10,#ffffff05);
  box-shadow:inset 0 0 0 1px #ffffff1C, 0 4px 12px #00000040;
  transition:background .15s, box-shadow .15s, transform .12s;
  user-select:none;
}
.cg-pass-btn .cg-ic{ font-size:16px; color:#FFC46B; }
.cg-pass-btn small{ font-size:10.5px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
.cg-pass-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(160deg,#FFB02E24,#FF5C3916);
  box-shadow:inset 0 0 0 1px #FFB02E66, 0 6px 16px #00000055, 0 0 18px #FFB02E1E;
}
.cg-pass-btn:active{ transform:translateY(0); }
.cg-board{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:9px;
  perspective:900px;
}
@media (max-width:640px){ .cg-board{ gap:5px; } }
.cg-card{
  position:relative; min-height:70px; padding:9px 7px; border:0; border-radius:13px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    linear-gradient(160deg,#262C3E,#191D2A);
  box-shadow:inset 0 1px 0 #ffffff14, inset 0 0 0 1px #ffffff10, 0 3px 8px #00000055;
  color:var(--text, #E8EAF0); font-weight:700; font-size:13px; cursor:default;
  transition:transform .15s, box-shadow .15s, opacity .2s;
}
/* Kapalı kartın deseni: köşe süsü */
.cg-card::after{
  content:''; position:absolute; inset:5px; border-radius:9px; pointer-events:none;
  box-shadow:inset 0 0 0 1px #ffffff07;
}
.cg-card__word{ word-break:break-word; line-height:1.2; text-shadow:0 1px 2px #00000088; }
.cg-card.is-clickable{ cursor:pointer; }
.cg-card.is-clickable:hover{
  transform:translateY(-3px) rotateX(6deg) scale(1.04);
  box-shadow:inset 0 0 0 1px var(--accent,#FF5C39), 0 10px 20px #00000077, 0 0 16px color-mix(in srgb, var(--accent,#FF5C39) 30%, transparent);
}
/* Anlatıcı görünümü: renk kenarlık + hafif iç ışıma, kart kapalı kalır */
.cg-card--peek.cg-card--red{ box-shadow:inset 0 0 0 2px #ED4245AA, inset 0 0 20px #ED424518, 0 3px 8px #00000055; }
.cg-card--peek.cg-card--blue{ box-shadow:inset 0 0 0 2px #4E7BECAA, inset 0 0 20px #4E7BEC18, 0 3px 8px #00000055; }
.cg-card--peek.cg-card--neutral{ box-shadow:inset 0 0 0 2px #8B8F9877, 0 3px 8px #00000055; }
.cg-card--peek.cg-card--black{ box-shadow:inset 0 0 0 2px #000, inset 0 0 18px #000000EE, 0 3px 8px #00000055; }
/* Açılan kartlar: çevrilme animasyonu */
@keyframes cgFlip{
  0%{ transform:rotateY(90deg) scale(.9); opacity:.4; }
  100%{ transform:rotateY(0) scale(1); opacity:1; }
}
.cg-card.is-open{ cursor:default; animation:cgFlip .4s ease-out; }
.cg-card.is-open::after{ box-shadow:inset 0 0 0 1px #ffffff14; }
.cg-card.is-open.cg-card--red{ background:linear-gradient(160deg,#C13537,#7E1F21); box-shadow:inset 0 1px 0 #ffffff22, inset 0 0 0 1px #FF9C9E44, 0 3px 10px #ED424522; }
.cg-card.is-open.cg-card--blue{ background:linear-gradient(160deg,#3B5FC4,#22397E); box-shadow:inset 0 1px 0 #ffffff22, inset 0 0 0 1px #9CBBFF44, 0 3px 10px #4E7BEC22; }
.cg-card.is-open.cg-card--neutral{ background:linear-gradient(160deg,#4E525C,#33363E); color:#B7BAC2; opacity:.8; }
.cg-card.is-open.cg-card--black{
  background:linear-gradient(160deg,#101014,#000); color:#F47B7B;
  box-shadow:inset 0 0 0 1px #ED424566, 0 0 26px #ED424544;
  animation:cgFlip .4s ease-out, cgDoom 1.6s ease-in-out .4s;
}
@keyframes cgDoom{ 0%,100%{ box-shadow:inset 0 0 0 1px #ED424566, 0 0 26px #ED424544; } 50%{ box-shadow:inset 0 0 0 2px #ED4245, 0 0 44px #ED424599; } }
.cg-card__power{
  position:absolute; top:5px; right:7px; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  color:#FFC46B;
  filter:drop-shadow(0 0 7px #FFC46BAA);
  animation:cgMiniFloat 2.4s ease-in-out infinite;
}
.cg-card__power--freeze{ color:#7BD4F4; filter:drop-shadow(0 0 7px #7BD4F4AA); }
.cg-card__power--extra{ color:#FFD84D; filter:drop-shadow(0 0 7px #FFD84DAA); }
.cg-card__power--radar{ color:#59CE7E; filter:drop-shadow(0 0 7px #59CE7EAA); }

/* ===== NT Parola operasyon konsolu (yeni tahta UI) ===== */
.cg-ops{ display:flex; flex-direction:column; gap:14px; }
.cg-ops__rail{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center;
  padding:10px 12px; border-radius:16px;
  background:linear-gradient(180deg, #141820, #0E1118);
  border:1px solid #ffffff12;
}
.cg-ops__team{
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px;
  background:#ffffff06; min-width:0;
}
.cg-ops__team small{ display:block; font-size:10px; letter-spacing:.12em; color:var(--text-faint); font-weight:800; }
.cg-ops__team b{ font-family:var(--font-display); font-size:22px; line-height:1; color:#fff; }
.cg-ops__team--red{ border-left:3px solid #FF4D57; }
.cg-ops__team--blue{ border-right:3px solid #4D8CFF; justify-content:flex-end; text-align:right; }
.cg-ops__team--blue .cg-ops__dot{ order:3; }
.cg-ops__dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.cg-ops__team--red .cg-ops__dot{ background:#FF4D57; box-shadow:0 0 10px #FF4D5788; }
.cg-ops__team--blue .cg-ops__dot{ background:#4D8CFF; box-shadow:0 0 10px #4D8CFF88; }
.cg-ops__team.is-turn{ background:#ffffff10; box-shadow:inset 0 0 0 1px #ffffff18; }
.cg-ops__team em{
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:.08em;
  padding:3px 7px; border-radius:999px; background:#53FC1822; color:#53FC18;
}
.cg-ops__clock{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.cg-ops__phase{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); letter-spacing:.08em; }

.cg-ops__clue{
  padding:14px 16px; border-radius:16px;
  background:linear-gradient(135deg, #1a1510, #12151c);
  border:1px solid #FFB02E44;
  box-shadow:0 0 24px #FFB02E14;
}
.cg-ops__clue-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin-bottom:10px; }
.cg-ops__clue-head strong{ font-family:var(--font-display); color:#FFC46B; font-size:14px; }
.cg-ops__clue-head span{ font-size:12px; color:var(--text-faint); }
.cg-ops__clue-row{ display:flex; flex-wrap:wrap; gap:8px; }
.cg-ops__clue-row input{
  flex:1 1 180px; min-height:44px; padding:0 14px; border-radius:10px;
  border:1px solid #ffffff22; background:#0B0D12; color:#fff; font-size:15px; font-weight:700;
}
.cg-ops__clue-row select{
  min-height:44px; padding:0 12px; border-radius:10px;
  border:1px solid #ffffff22; background:#0B0D12; color:#fff; font-weight:700;
}
.cg-ops__clue-hint{ margin:8px 0 0; font-size:11.5px; color:var(--text-faint); }

.cg-ops__banner{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  padding:12px 14px; border-radius:14px; background:#ffffff08; border:1px solid #ffffff10;
}
.cg-ops__banner.is-red{ border-color:#FF4D5744; background:#FF4D5710; }
.cg-ops__banner.is-blue{ border-color:#4D8CFF44; background:#4D8CFF10; }
.cg-ops__banner p{ margin:0; flex:1 1 200px; color:#fff; font-size:14px; }
.cg-ops__cluechip{
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px;
  background:#0B0D12; border:1px solid #FFB02E55;
}
.cg-ops__cluechip span{ font-size:10px; letter-spacing:.1em; color:#FFC46B; font-weight:800; }
.cg-ops__cluechip b{ font-family:var(--font-display); font-size:18px; color:#fff; }
.cg-ops__cluechip i{ font-style:normal; font-family:var(--font-mono); font-size:16px; color:#53FC18; font-weight:800; }
.cg-ops__meta{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:13px; color:var(--text-muted); }
.cg-ops__meta strong{ color:#fff; }
.cg-ops__freeze{ color:#7BD4F4; font-weight:700; }
.cg-ops__best{ color:#FFC46B; font-weight:700; }

.cg-ops__legend{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:11px; color:var(--text-faint);
}
.cg-ops__lg{ padding:3px 9px; border-radius:999px; font-weight:800; letter-spacing:.04em; color:#fff; }
.cg-ops__lg--red{ background:#C13537; }
.cg-ops__lg--blue{ background:#3B5FC4; }
.cg-ops__lg--neutral{ background:#5A5F6A; }
.cg-ops__lg--black{ background:#111; box-shadow:inset 0 0 0 1px #FF4D57; }
.cg-ops__legend em{ font-style:normal; margin-left:4px; }

.cg-ops__board{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px;
  padding:16px; border-radius:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, #2f5a3a 0%, transparent 55%),
    linear-gradient(180deg, #1a3a28 0%, #102418 100%);
  box-shadow:
    inset 0 0 0 1px #ffffff12,
    inset 0 0 40px #00000055,
    0 18px 40px #00000066;
}
@media (max-width:640px){
  .cg-ops__board{ gap:6px; padding:10px; }
  .cg-ops__rail{ grid-template-columns:1fr; }
  .cg-ops__clock{ order:-1; }
}
.cg-ops__empty{ grid-column:1/-1; text-align:center; color:#c9d4c8; padding:24px; }

/* Codenames tarzı fiziksel kelime kartları */
.cg-tile{
  position:relative; min-height:78px; padding:12px 8px; border:0; border-radius:8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display), Georgia, "Times New Roman", serif;
  font-weight:800; font-size:clamp(11px, 1.6vw, 15px);
  letter-spacing:.03em; text-transform:uppercase; color:#1C1812; cursor:default;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.cg-tile__word{
  word-break:break-word; line-height:1.15;
  text-shadow:none; position:relative; z-index:1;
}
.cg-tile.is-sealed{
  color:#1C1812;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(165deg, #F4EBD6 0%, #E2D2B0 55%, #D2C09A 100%);
  border:1px solid #B79F78;
  box-shadow:
    0 1px 0 #fff6 inset,
    0 5px 0 #A89268,
    0 10px 16px #00000055;
}
.cg-tile.is-sealed::before{
  content:''; position:absolute; inset:5px; border-radius:5px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(120,90,50,.18);
}
.cg-tile.is-key{
  color:#1C1812;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(165deg, #F4EBD6 0%, #E2D2B0 55%, #D2C09A 100%);
  box-shadow:0 1px 0 #fff6 inset, 0 5px 0 #A89268, 0 10px 16px #00000055;
}
.cg-tile.is-key.is-red{ box-shadow:inset 0 0 0 3px #C13537, 0 5px 0 #A89268, 0 10px 16px #00000055; }
.cg-tile.is-key.is-blue{ box-shadow:inset 0 0 0 3px #3B5FC4, 0 5px 0 #A89268, 0 10px 16px #00000055; }
.cg-tile.is-key.is-neutral{ box-shadow:inset 0 0 0 3px #8A8070, 0 5px 0 #A89268, 0 10px 16px #00000055; }
.cg-tile.is-key.is-black{
  color:#2A1010;
  box-shadow:inset 0 0 0 3px #111, inset 0 0 18px #00000055, 0 5px 0 #A89268, 0 10px 16px #00000055;
}
.cg-tile.is-open.is-red{
  color:#fff; border:1px solid #E07072;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(165deg, #C13537, #5C1214);
  box-shadow:0 1px 0 #ffffff22 inset, 0 4px 0 #3A0C0E, 0 8px 14px #ED424533;
}
.cg-tile.is-open.is-blue{
  color:#fff; border:1px solid #7AA0F0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(165deg, #3B5FC4, #15265A);
  box-shadow:0 1px 0 #ffffff22 inset, 0 4px 0 #0E1A40, 0 8px 14px #4D8CFF33;
}
.cg-tile.is-open.is-neutral{
  color:#5A5348; border:1px solid #A89878; opacity:.88;
  background:linear-gradient(165deg, #D8CFB8, #B8A888);
  box-shadow:0 3px 0 #8A7A58, 0 6px 12px #00000044;
}
.cg-tile.is-open.is-black{
  color:#FF6B6B; border:1px solid #ED4245;
  background:linear-gradient(165deg, #15151A, #000);
  box-shadow:0 0 0 2px #ED424566 inset, 0 0 22px #FF4D5744, 0 4px 0 #000;
}
.cg-tile.is-pick{ cursor:pointer; }
.cg-tile.is-pick:hover{
  transform:translateY(-4px) scale(1.03);
  filter:brightness(1.05);
  box-shadow:
    0 1px 0 #fff8 inset,
    0 8px 0 #8A7450,
    0 14px 22px #00000066,
    0 0 0 2px #E8C98A;
}
.cg-tile.is-open{ transform:none; }
.cg-tile__pow{
  position:absolute; top:5px; right:7px; font-size:13px; z-index:2;
  filter:drop-shadow(0 1px 2px #0008);
}

.cg-ops__guess{ display:flex; justify-content:flex-end; }
.cg-ops__pass{
  border:1px solid #ffffff22; background:#ffffff08; color:#fff; border-radius:12px;
  padding:12px 18px; font-weight:700; cursor:pointer;
}
.cg-ops__pass:hover{ border-color:#FF4D57; background:#FF4D5718; }

/* İpucu formu: anlatıcı konsolu */
.cg-clue-form{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:14px 16px; border-radius:14px;
  background:linear-gradient(90deg, #FFB02E0C, #ffffff04);
  box-shadow:inset 0 0 0 1px #FFB02E2A;
}
.cg-clue-form input{ flex:1 1 220px; }
.cg-clue-form select{ width:76px; }
.cg-guess-actions{ display:flex; justify-content:flex-end; }

/* Bitiş */
.cg-finish{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:12px 0; }
.cg-finish__card{
  position:relative; overflow:hidden;
  width:100%; max-width:480px; padding:32px 26px; border-radius:20px; text-align:center;
  background:#ffffff07; box-shadow:inset 0 0 0 1px #ffffff10;
  animation:cgFlip .5s ease-out;
}
.cg-finish__card h3{ margin:10px 0 8px; font-size:23px; letter-spacing:.5px; }
.cg-finish__card p{ margin:0; color:var(--text-muted); font-size:14px; }
.cg-finish__trophy{ font-size:52px; color:#FFC46B; filter:drop-shadow(0 6px 18px #FFB02E55); animation:cgMiniFloat 3s ease-in-out infinite; }
.cg-finish__best{ display:flex; align-items:center; justify-content:center; gap:7px; }
.cg-finish--red{
  box-shadow:inset 0 0 0 1px #ED424566;
  background:radial-gradient(120% 80% at 50% 0%, #ED424522 0%, transparent 65%), #ffffff05;
}
.cg-finish--blue{
  box-shadow:inset 0 0 0 1px #4E7BEC66;
  background:radial-gradient(120% 80% at 50% 0%, #4E7BEC22 0%, transparent 65%), #ffffff05;
}

/* Olay akışı */
.cg-log{
  max-height:220px; overflow:auto; display:flex; flex-direction:column; gap:4px;
  padding:12px 14px; border-radius:14px;
  background:#00000033; box-shadow:inset 0 0 0 1px #ffffff0A;
  font-size:12.5px; color:var(--text-muted);
}
.cg-log__row b{ color:var(--text, #E8EAF0); }
.cg-log__row--red{ border-left:2px solid #ED424588; padding-left:8px; }
.cg-log__row--blue{ border-left:2px solid #4E7BEC88; padding-left:8px; }
.cg-log__row--finish{ color:#FFC46B; font-weight:700; }
.cg-log__row--power{ color:#7BD4F4; }

/* ==========================================================================
   NT-SPORT — e-spor takım sayfası + lig merkezi
   ========================================================================== */
.psp-team{ display:flex; flex-direction:column; gap:18px; }

/* --- takım hero --- */
.psp-hero{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); min-height:300px; display:flex; align-items:flex-end;
  isolation:isolate;
}
.psp-hero__art{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.05); z-index:-3;
}
.psp-hero__shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, #0b0d1200 0%, #0b0d12CC 62%, #0b0d12F2 100%);
}
.psp-hero__fx{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.psp-hero__grid{
  position:absolute; inset:0; opacity:.25;
  background-image:linear-gradient(#ffffff10 1px, transparent 1px), linear-gradient(90deg, #ffffff10 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, transparent 0%, #000 45%, transparent 100%);
}
.psp-hero__beam{
  position:absolute; top:-40%; left:-10%; width:60%; height:180%;
  background:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--team, #FF3D8A) 26%, transparent) 50%, transparent 70%);
  transform:rotate(8deg); filter:blur(8px);
}
.psp-hero__body{ position:relative; padding:26px 26px 24px; width:100%; display:flex; flex-direction:column; gap:14px; }
.psp-hero__badges{ display:flex; gap:8px; flex-wrap:wrap; }
.psp-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.14em;
  padding:5px 12px; border-radius:999px; color:#fff;
  background:#00000066; border:1px solid #ffffff2E; backdrop-filter:blur(6px);
}
.psp-pill--brand{ background:linear-gradient(135deg, var(--team, #FF3D8A), color-mix(in srgb, var(--team, #FF3D8A) 55%, #000)); border-color:transparent; }
.psp-pill--hot{ background:linear-gradient(135deg, #F0C75E, #C98B2D); color:#1a1206; border-color:transparent; }
.psp-pill--live i{ width:7px; height:7px; border-radius:50%; background:#3DDC97; box-shadow:0 0 8px #3DDC97; animation:pspPulse 1.6s infinite; }
@keyframes pspPulse{ 50%{ opacity:.4; } }

.psp-hero__identity{ display:flex; align-items:center; gap:16px; }
.psp-crest{
  width:84px; height:84px; flex:none; border-radius:20px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--team, #FF3D8A) 45%, #12151C), #12151C 80%);
  border:1px solid color-mix(in srgb, var(--team, #FF3D8A) 55%, transparent);
  box-shadow:0 12px 30px #00000080, inset 0 1px 0 #ffffff22;
}
.psp-crest__icon{ font-size:32px; line-height:1; filter:drop-shadow(0 3px 8px #00000088); }
.psp-crest__tag{ font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.16em; color:#fff; opacity:.9; }
.psp-hero__name{
  font-family:var(--font-display); font-weight:900; font-size:clamp(24px, 4vw, 40px);
  color:#fff; margin:0; line-height:1.05; text-shadow:0 4px 24px #000000AA;
}
.psp-hero__tag{ color:var(--team, #FF3D8A); }
.psp-hero__lead{ margin:6px 0 0; font-size:13.5px; color:var(--text-muted); }
.psp-hero__lead a{ color:#fff; font-weight:700; text-decoration:none; border-bottom:1px solid var(--team, #FF3D8A); }
.psp-hero__desc{ margin:0; max-width:640px; color:var(--text-muted); font-size:14px; line-height:1.55; }
.psp-hero__cta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.psp-btn-solid{ background:linear-gradient(135deg, var(--team, #FF3D8A), color-mix(in srgb, var(--team, #FF3D8A) 60%, #000)) !important; border:none !important; }
.psp-cta-hint{ font-size:12px; color:var(--text-faint); }

/* --- stat şeridi --- */
.psp-stats{
  display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:10px;
}
.psp-stats__item{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; display:flex; flex-direction:column; gap:2px;
}
.psp-stats__item b{ font-family:var(--font-display); font-size:22px; font-weight:900; color:#fff; }
.psp-stats__item span{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.psp-stats__item small{ font-size:11px; color:var(--text-faint); }
.psp-stats__item--main{
  background:linear-gradient(140deg, color-mix(in srgb, var(--team, #FF3D8A) 22%, var(--bg-card)), var(--bg-card) 70%);
  border-color:color-mix(in srgb, var(--team, #FF3D8A) 45%, var(--line));
}
.psp-stats__item--main b{ color:var(--team, #FF3D8A); font-size:26px; }

/* --- kupa vitrini --- */
.psp-trophies{
  background:linear-gradient(140deg, #2a230f, #171A22 65%);
  border:1px solid #F0C75E44; border-radius:var(--radius-lg); padding:16px 18px;
}
.psp-trophies__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.psp-trophies__head h2{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:var(--font-display); font-size:15px; font-weight:800; color:#F0C75E;
}
.psp-trophies__head h2 .cg-ic{ width:18px; height:18px; color:#F0C75E; }
.psp-trophies__head span{ font-size:12px; color:var(--text-faint); }
.psp-trophies__row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
.psp-trophy{
  flex:none; min-width:170px; max-width:220px;
  background:#00000044; border:1px solid #F0C75E33; border-radius:var(--radius-md);
  padding:14px; display:flex; flex-direction:column; gap:4px; align-items:flex-start;
}
.psp-trophy__cup{ display:inline-flex; padding:8px; border-radius:10px; background:#F0C75E22; margin-bottom:4px; }
.psp-trophy__cup .cg-ic{ width:22px; height:22px; color:#F0C75E; }
.psp-trophy strong{ font-size:13.5px; color:#fff; line-height:1.3; }
.psp-trophy small{ font-size:11.5px; color:var(--text-faint); }
.psp-trophy em{ font-style:normal; font-size:11px; color:#F0C75E; font-weight:700; }

/* --- oyuncu kartları --- */
.psp-roster{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; }
.psp-roster__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.psp-roster__head h2{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:var(--font-display); font-size:15px; font-weight:800; color:#fff;
}
.psp-roster__head h2 .cg-ic{ width:18px; height:18px; color:var(--team, #FF3D8A); }
.psp-roster__head span{ font-size:12px; color:var(--text-faint); }
.psp-roster__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.psp-player{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:22px 14px 16px; border-radius:var(--radius-md); text-decoration:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--team, #FF3D8A) 12%, var(--bg-elevated)) 0%, var(--bg-elevated) 55%);
  border:1px solid var(--line); overflow:hidden;
  transition:transform .18s var(--ease), border-color .18s, box-shadow .18s;
}
.psp-player::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, transparent, var(--team, #FF3D8A), transparent);
  opacity:.7;
}
.psp-player:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--team, #FF3D8A) 55%, var(--line));
  box-shadow:0 14px 30px #00000066;
}
.psp-player.is-captain{
  background:linear-gradient(180deg, color-mix(in srgb, #F0C75E 16%, var(--bg-elevated)) 0%, var(--bg-elevated) 60%);
  border-color:#F0C75E55;
}
.psp-player.is-captain::before{ background:linear-gradient(90deg, transparent, #F0C75E, transparent); }
.psp-player__num{
  position:absolute; top:8px; left:12px;
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text-faint);
}
.psp-player__captain{
  position:absolute; top:8px; right:8px;
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.1em;
  padding:4px 8px; border-radius:999px; background:#F0C75E22; color:#F0C75E; border:1px solid #F0C75E44;
}
.psp-player__captain .cg-ic{ width:11px; height:11px; }
.psp-player__av{
  position:relative; width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:visible;
  font-family:var(--font-display); font-weight:800; font-size:22px; color:#fff;
  box-shadow:0 0 0 3px var(--bg-card), 0 0 0 5px color-mix(in srgb, var(--team, #FF3D8A) 60%, transparent);
}
.psp-player__av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.psp-player.is-captain .psp-player__av{ box-shadow:0 0 0 3px var(--bg-card), 0 0 0 5px #F0C75E99; }
.psp-player__on{
  position:absolute; bottom:2px; right:2px; width:13px; height:13px; border-radius:50%;
  background:#3DDC97; border:3px solid var(--bg-elevated);
}
.psp-player__name{ text-align:center; display:flex; flex-direction:column; gap:2px; }
.psp-player__name strong{ color:#fff; font-size:14px; }
.psp-player__name small{ font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text-faint); text-transform:uppercase; }
.psp-player__ranks{ display:flex; flex-direction:column; gap:2px; align-items:center; }
.psp-player__ranks em{
  font-style:normal; font-size:10.5px; color:var(--text-muted);
  background:#00000033; padding:2px 8px; border-radius:999px; border:1px solid var(--line);
}
.psp-player__pts{ display:flex; align-items:baseline; gap:4px; margin-top:2px; }
.psp-player__pts b{ font-family:var(--font-display); font-size:16px; font-weight:900; color:var(--team, #FF3D8A); }
.psp-player.is-captain .psp-player__pts b{ color:#F0C75E; }
.psp-player__pts small{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }

/* --- düzen + paneller --- */
.psp-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.psp-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.psp-side{ display:flex; flex-direction:column; gap:18px; }
.psp-panel{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; }
.psp-panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.psp-panel__head h2{ margin:0; font-family:var(--font-display); font-size:14px; font-weight:800; color:#fff; }
.psp-panel__head span{ font-size:12px; color:var(--text-faint); }
.psp-panel--tip h3{ margin:0 0 6px; font-family:var(--font-display); font-size:13px; color:var(--team, #FF3D8A); }
.psp-panel--tip p{ margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.55; }

/* --- lig sıralaması (kenar) --- */
.psp-standings{ display:flex; flex-direction:column; gap:6px; }
.psp-standing{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  padding:8px 10px; border-radius:var(--radius-sm); border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.psp-standing:hover{ background:var(--bg-hover); }
.psp-standing.is-self{ background:color-mix(in srgb, var(--rival, #888) 12%, transparent); border-color:color-mix(in srgb, var(--rival, #888) 40%, transparent); }
.psp-standing__rank{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); width:26px; }
.psp-standing__icon{ font-size:18px; }
.psp-standing__info{ display:flex; flex-direction:column; min-width:0; }
.psp-standing__info strong{ color:#fff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.psp-standing__info small{ font-size:11px; color:var(--text-faint); }
.psp-more{ display:block; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--accent); text-decoration:none; }

/* --- turnuva listeleri --- */
.psp-tlist{ display:flex; flex-direction:column; gap:8px; }
.psp-tlist__item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--bg-elevated); border:1px solid var(--line);
}
.psp-tlist__item strong{ color:#fff; font-size:13px; }
.psp-tlist__item small{ font-size:11.5px; color:var(--text-faint); }
.psp-tlist__status{
  align-self:flex-start; font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.12em;
  padding:3px 8px; border-radius:999px; margin-bottom:2px;
}
.psp-tlist__status--live{ background:#FF4D5E22; color:#FF4D5E; }
.psp-tlist__status--upcoming{ background:#4E7BEC22; color:#7BA9F4; }
.psp-tlist__cup{ display:inline-flex; }
.psp-tlist__cup .cg-ic{ width:14px; height:14px; color:#F0C75E; }
.psp-tlist__item--done small b{ font-weight:700; }

/* --- profil kupaları --- */
.psp-profile-trophies{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.psp-profile-trophy{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background:#F0C75E1A; border:1px solid #F0C75E3D;
  font-size:11.5px; color:#F0C75E;
}
.psp-profile-trophy .cg-ic{ width:13px; height:13px; }
.psp-profile-trophy b{ font-weight:700; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ==========================================================================
   NT-SPORT HUB (psport.php)
   ========================================================================== */
.psp-hub{ display:flex; flex-direction:column; gap:18px; }
.psp-hub__hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:radial-gradient(1200px 500px at 15% -10%, #FF5C3926, transparent 60%),
             radial-gradient(900px 420px at 90% 0%, #4E7BEC22, transparent 55%),
             linear-gradient(180deg, #12151C, #0d0f15);
  padding:44px 30px 34px; isolation:isolate;
}
.psp-hub__fx{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.psp-hub__glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.psp-hub__glow--1{ width:340px; height:340px; background:#FF5C3933; top:-120px; left:-60px; }
.psp-hub__glow--2{ width:300px; height:300px; background:#4E7BEC2E; bottom:-140px; right:-40px; }
.psp-hub__hero-body{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; max-width:720px; }
.psp-hub__title{
  margin:0; font-family:var(--font-display); font-weight:900;
  font-size:clamp(36px, 6vw, 62px); color:#fff; line-height:1;
  letter-spacing:.01em;
}
.psp-hub__title span{
  background:linear-gradient(120deg, var(--accent), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.psp-hub__sub{ margin:0; font-size:14.5px; color:var(--text-muted); line-height:1.6; max-width:560px; }
.psp-hub__stats{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.psp-hub__stats > div{
  display:flex; flex-direction:column; gap:2px;
  background:#ffffff08; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:12px 18px;
}
.psp-hub__stats b{ font-family:var(--font-display); font-size:20px; font-weight:900; color:#fff; }
.psp-hub__stats span{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

.psp-hub__layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.psp-hub__main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.psp-hub__side{ display:flex; flex-direction:column; gap:18px; }
.psp-hubpanel{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; }
.psp-hubpanel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.psp-hubpanel__head h2{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:var(--font-display); font-size:15px; font-weight:800; color:#fff;
}
.psp-hubpanel__head h2 .cg-ic{ width:18px; height:18px; color:var(--gold); }
.psp-hubpanel__head span{ font-size:12px; color:var(--text-faint); }
.psp-hubpanel--live{ border-color:#FF4D5E55; }
.psp-livedot{ width:10px; height:10px; border-radius:50%; background:#FF4D5E; box-shadow:0 0 10px #FF4D5E; animation:pspPulse 1.4s infinite; }

.psp-tgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.psp-tcard{
  display:flex; flex-direction:column; gap:4px;
  padding:14px; border-radius:var(--radius-md);
  background:var(--bg-elevated); border:1px solid var(--line);
}
.psp-tcard--live{ border-color:#FF4D5E55; background:linear-gradient(160deg, #FF4D5E14, var(--bg-elevated) 60%); }
.psp-tcard__status{
  align-self:flex-start; font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.12em;
  padding:3px 8px; border-radius:999px; background:#FF4D5E22; color:#FF4D5E;
}
.psp-tcard strong{ color:#fff; font-size:14px; }
.psp-tcard small{ font-size:11.5px; color:var(--text-faint); }
.psp-tcard em{ display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:11.5px; color:#F0C75E; font-weight:700; margin-top:4px; }

/* --- lig tablosu --- */
.psp-league{ display:flex; flex-direction:column; gap:8px; }
.psp-lrow{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:12px 14px; border-radius:var(--radius-md);
  background:var(--bg-elevated); border:1px solid var(--line);
  transition:transform .15s var(--ease), border-color .15s;
}
.psp-lrow:hover{ transform:translateX(4px); border-color:color-mix(in srgb, var(--rival, #888) 55%, var(--line)); }
.psp-lrow.is-top{
  background:linear-gradient(120deg, color-mix(in srgb, var(--rival, #F0C75E) 16%, var(--bg-elevated)), var(--bg-elevated) 65%);
  border-color:color-mix(in srgb, var(--rival, #F0C75E) 50%, var(--line));
}
.psp-lrow__rank{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--text-faint); width:32px; flex:none; }
.psp-lrow.is-top .psp-lrow__rank{ color:var(--gold); }
.psp-lrow__icon{ font-size:22px; flex:none; }
.psp-lrow__name{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.psp-lrow__name strong{ color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.psp-lrow__name small{ font-size:11.5px; color:var(--text-faint); }
.psp-lrow__cell{ display:flex; flex-direction:column; align-items:center; gap:0; width:56px; flex:none; }
.psp-lrow__cell b{ font-family:var(--font-display); font-size:15px; color:var(--text); }
.psp-lrow__cell small{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.psp-lrow__pts{ display:flex; flex-direction:column; align-items:flex-end; gap:0; width:86px; flex:none; }
.psp-lrow__pts b{ font-family:var(--font-display); font-size:17px; font-weight:900; color:var(--rival, var(--accent)); }
.psp-lrow__pts small{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }

/* --- arena hero (hub) --- */
.psp-hub__hero--arena{ min-height:340px; display:flex; align-items:flex-end; }
.psp-hub__arena{
  position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center 30%;
  filter:saturate(1.1);
}
.psp-hub__hero--arena::after{
  content:''; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, #0b0d1226 0%, #0b0d12C4 55%, #0b0d12F5 100%);
}
/* Ana NT-SPORT manşeti — illustrasyon net görünsün, yazı altta okunaklı kalsın */
.psp-hub__hero--manset{ min-height:380px; }
.psp-hub__hero--manset .psp-hub__arena{
  background-position:center 42%;
  filter:saturate(1.05) brightness(.98);
}
.psp-hub__hero--manset::after{
  background:linear-gradient(180deg, #0b0d1230 0%, #0b0d1288 48%, #0b0d12f4 100%);
}
.psp-hub__wm{
  position:absolute; right:-10px; bottom:-24px; z-index:-1; pointer-events:none;
  font-family:var(--font-display); font-weight:900; font-size:clamp(80px, 14vw, 170px);
  line-height:1; letter-spacing:.02em; color:transparent;
  -webkit-text-stroke:1px #ffffff14;
}

/* --- podyum (ilk 3) --- */
.psp-podium{
  display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:12px; align-items:end;
}
.psp-pod{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 14px 14px; border-radius:var(--radius-lg); text-decoration:none; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb, var(--rival, #888) 14%, var(--bg-card)) 0%, var(--bg-card) 60%);
  border:1px solid color-mix(in srgb, var(--rival, #888) 35%, var(--line));
  transition:transform .18s var(--ease), box-shadow .18s;
}
.psp-pod:hover{ transform:translateY(-4px); box-shadow:0 16px 34px #00000066; }
.psp-pod--1{ padding-top:30px; padding-bottom:22px; border-color:#F0C75E66; box-shadow:0 0 26px #F0C75E1A; }
.psp-pod--1::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, transparent, #F0C75E, transparent);
}
.psp-pod__medal{ font-size:26px; line-height:1; filter:drop-shadow(0 3px 8px #00000088); }
.psp-pod--1 .psp-pod__medal{ font-size:34px; }
.psp-pod__crest{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:64px; height:64px; justify-content:center; border-radius:16px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--rival, #888) 40%, #12151C), #12151C 80%);
  border:1px solid color-mix(in srgb, var(--rival, #888) 55%, transparent);
}
.psp-pod__crest span{ font-size:24px; line-height:1; }
.psp-pod__crest em{ font-style:normal; font-family:var(--font-display); font-size:8.5px; font-weight:800; letter-spacing:.14em; color:#fff; opacity:.85; }
.psp-pod__name{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:14px; text-align:center; }
.psp-pod--1 .psp-pod__name{ font-size:16px; }
.psp-pod__pts{ font-family:var(--font-display); font-weight:900; font-size:18px; color:var(--rival, var(--accent)); }
.psp-pod--1 .psp-pod__pts{ font-size:22px; color:#F0C75E; }
.psp-pod__pts small{ font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; }
.psp-pod__meta{ font-size:11px; color:var(--text-faint); }
.psp-pod__base{
  margin-top:6px; align-self:stretch; text-align:center;
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text-faint);
  border-top:1px dashed var(--line); padding-top:8px;
}
.psp-pod--1 .psp-pod__base{ color:#F0C75E; }

/* --- zirve rekabeti / VS --- */
.psp-vs{
  position:relative; display:flex; align-items:center; gap:14px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 18px 16px;
}
.psp-vs__label{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.16em;
  padding:3px 12px; border-radius:999px; color:#fff;
  background:linear-gradient(120deg, var(--accent), var(--pink)); white-space:nowrap;
}
.psp-vs__team{
  flex:1; display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0;
  padding:10px 12px; border-radius:var(--radius-md);
  background:linear-gradient(90deg, color-mix(in srgb, var(--rival, #888) 14%, var(--bg-elevated)), var(--bg-elevated) 75%);
  border:1px solid color-mix(in srgb, var(--rival, #888) 35%, var(--line));
  transition:border-color .15s;
}
.psp-vs__team:hover{ border-color:color-mix(in srgb, var(--rival, #888) 65%, var(--line)); }
.psp-vs__team--r{ background:linear-gradient(270deg, color-mix(in srgb, var(--rival, #888) 14%, var(--bg-elevated)), var(--bg-elevated) 75%); text-align:right; justify-content:flex-end; }
.psp-vs__crest{ font-size:26px; flex:none; }
.psp-vs__info{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.psp-vs__info strong{ color:#fff; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.psp-vs__info small{ font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:.12em; color:var(--rival, var(--text-faint)); }
.psp-vs__pts{ margin-left:auto; font-family:var(--font-display); font-size:19px; font-weight:900; color:var(--rival, #fff); flex:none; }
.psp-vs__team--r .psp-vs__pts{ margin-left:0; margin-right:auto; }
.psp-vs__mid{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:none; }
.psp-vs__mid i{
  font-style:normal; font-family:var(--font-display); font-weight:900; font-size:18px;
  background:linear-gradient(120deg, var(--accent), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.psp-vs__mid em{ font-style:normal; font-size:10px; color:var(--text-faint); white-space:nowrap; }

/* --- takım hero watermark --- */
.psp-hero__wm{
  position:absolute; right:-6px; top:-14px; z-index:-1; pointer-events:none;
  font-family:var(--font-display); font-weight:900; font-size:clamp(90px, 16vw, 190px);
  line-height:1; letter-spacing:.04em; color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, var(--team, #FF3D8A) 30%, transparent);
  opacity:.8;
}

/* --- rakip VS kartı (takım kenar paneli) --- */
.psp-panel--vs{ border-color:color-mix(in srgb, var(--rival, #888) 35%, var(--line)); }
.psp-faceoff{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.psp-facegrp{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none;
  padding:10px 8px; border-radius:var(--radius-md);
  background:var(--bg-elevated); border:1px solid var(--line);
}
a.psp-facegrp:hover{ border-color:color-mix(in srgb, var(--rival, #888) 55%, var(--line)); }
.psp-facegrp__icon{ font-size:24px; line-height:1; }
.psp-facegrp strong{ font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.1em; color:#fff; }
.psp-facegrp b{ font-family:var(--font-display); font-size:16px; font-weight:900; color:var(--rival, var(--accent)); }
.psp-facevs{
  flex:none; font-family:var(--font-display); font-weight:900; font-size:14px;
  background:linear-gradient(120deg, var(--accent), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- takım logoları ---
   Logo yüklenmişse emoji ikon yerine görsel basılır; boyut bulunduğu yere uyar. */
img.psp-logo{ display:block; object-fit:cover; border-radius:8px; }
/* Takım sayfası arması: logo varsa tüm alanı kaplar, altındaki kısaltma gizlenir */
.psp-crest--logo{ overflow:hidden; background:#12151C; }
.psp-crest--logo .psp-crest__icon{ position:absolute; inset:0; display:block; }
.psp-crest--logo .psp-crest__icon img.psp-logo{ width:100%; height:100%; border-radius:0; }
.psp-crest--logo .psp-crest__tag{ display:none; }
.psp-facegrp__icon img.psp-logo{ width:34px; height:34px; }
.psp-standing__icon img.psp-logo{ width:26px; height:26px; border-radius:6px; }
.psp-pod__crest--logo{ background:#12151C; }
.psp-pod__crest span img.psp-logo{ width:34px; height:34px; }
.psp-vs__crest img.psp-logo{ width:36px; height:36px; }
.psp-lrow__icon img.psp-logo{ width:30px; height:30px; }
.gang-link__icon img.psp-logo{ width:32px; height:32px; }
.psp-logo--emoji{ font-style:normal; }

/* --- divizyon kapıları: VALORANT | CS2 --- */
.psp-gates{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.psp-gate{
  position:relative; display:block; min-height:230px; border-radius:var(--radius-lg);
  overflow:hidden; text-decoration:none; isolation:isolate;
  border:1px solid color-mix(in srgb, var(--div, #888) 40%, var(--line));
  transition:transform .18s var(--ease), box-shadow .18s;
}
.psp-gate:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px #00000080, 0 0 26px color-mix(in srgb, var(--div, #888) 18%, transparent);
}
.psp-gate__art{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 25%;
  transition:transform .3s var(--ease);
}
.psp-gate:hover .psp-gate__art{ transform:scale(1.05); }
.psp-gate__shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, #0b0d1215 0%, #0b0d12B8 55%, #0b0d12F2 100%);
}
.psp-gate__body{ display:flex; flex-direction:column; gap:8px; padding:18px; height:100%; justify-content:flex-end; }
.psp-gate__badge{
  align-self:flex-start;
  font-family:var(--font-display); font-size:10px; font-weight:900; letter-spacing:.12em;
  padding:5px 10px; border-radius:8px; color:#0b0b0b; background:var(--div, var(--accent));
}
.psp-gate__name{
  font-family:var(--font-display); font-size:20px; font-weight:900; color:#fff;
  text-shadow:0 3px 16px #000000AA;
}
.psp-gate__nums{ font-size:12px; color:var(--text-muted); }
.psp-gate__top{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.psp-gate__row{
  display:flex; align-items:center; gap:8px;
  background:#04050A99; border:1px solid #ffffff14; border-radius:10px; padding:5px 10px;
}
.psp-gate__row em{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); width:20px; }
.psp-gate__logo{ display:inline-flex; font-size:14px; }
.psp-gate__logo img.psp-logo{ width:18px; height:18px; border-radius:5px; }
.psp-gate__row b{ font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.08em; color:#fff; flex:1; }
.psp-gate__row small{ font-family:var(--font-mono); font-size:11px; color:var(--div, var(--accent)); }
.psp-gate__row--empty{ font-size:11.5px; color:var(--text-faint); justify-content:center; }
.psp-gate__cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-family:var(--font-display); font-size:10.5px; font-weight:800; letter-spacing:.12em;
  color:var(--div, var(--accent));
}
.psp-gate__cta i{ font-style:normal; transition:transform .15s; }
.psp-gate:hover .psp-gate__cta i{ transform:translateX(4px); }
.psp-gate--mini{ min-height:130px; }
.psp-gate--mini .psp-gate__name{ font-size:15px; }

/* divizyon alt sayfası */
.psp-back{
  display:inline-flex; margin-top:4px; font-size:12.5px; font-weight:700;
  color:var(--text-muted); text-decoration:none;
}
.psp-back:hover{ color:#fff; }
.psp-hub__hero--div .psp-hub__wm{ -webkit-text-stroke:1px color-mix(in srgb, var(--div, #fff) 28%, transparent); }
.psp-hub__hero--div{ border-color:color-mix(in srgb, var(--div, #888) 40%, var(--line)); }

/* --- responsive --- */
@media (max-width: 1100px){
  .psp-layout, .psp-hub__layout{ grid-template-columns:1fr; }
  .psp-stats{ grid-template-columns:repeat(2, 1fr); }
  .psp-stats__item--main{ grid-column:1 / -1; }
}
@media (max-width: 900px){
  .psp-gates{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .psp-vs{ flex-direction:column; gap:10px; }
  .psp-vs__team, .psp-vs__team--r{ width:100%; }
}
@media (max-width: 640px){
  .psp-hero__body{ padding:18px 16px 16px; }
  .psp-hero__identity{ gap:12px; }
  .psp-crest{ width:64px; height:64px; border-radius:16px; }
  .psp-crest__icon{ font-size:24px; }
  .psp-roster__grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .psp-lrow__cell{ display:none; }
  .psp-hub__hero{ padding:30px 18px 24px; }
  .psp-podium{ grid-template-columns:1fr; }
  .psp-pod--1{ order:-1; }
}


/* ============================================================
   ÇİZMECE — çiz ve bil oyunu
   ============================================================ */

/* --- lobi --- */
.cz-lobby{ display:flex; flex-direction:column; gap:22px; }
.cz-hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(700px 300px at 12% -10%, #FF3D8A22, transparent 60%),
    radial-gradient(600px 280px at 95% 110%, #1E88E522, transparent 60%),
    var(--bg-card);
}
.cz-hero__doodles{
  position:absolute; inset:0; pointer-events:none; color:#ffffff10;
}
.cz-hero__doodles svg{ position:absolute; right:-40px; top:-30px; width:420px; height:auto; transform:rotate(8deg); }
.cz-hero__grid{
  position:relative; display:grid; grid-template-columns:1.2fr .9fr; gap:26px;
  padding:30px 28px;
}
.cz-hero__tag{
  display:inline-block; font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.18em; color:var(--pink); margin-bottom:10px;
}
.cz-hero__title{
  font-family:var(--font-display); font-size:clamp(30px, 5vw, 46px); font-weight:900;
  color:#fff; letter-spacing:.02em; line-height:1; margin:0 0 12px;
}
.cz-hero__title em{
  font-style:normal;
  background:linear-gradient(120deg, var(--pink), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cz-hero__sub{ color:var(--text-muted); font-size:14px; line-height:1.65; margin:0 0 16px; max-width:52ch; }
.cz-hero__steps{ display:flex; flex-direction:column; gap:8px; }
.cz-step{
  display:inline-flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted);
}
.cz-step b{
  flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-family:var(--font-display); font-size:11px; color:#0b0b0b;
  background:linear-gradient(120deg, var(--pink), var(--accent));
}
.cz-hero__panel{
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px;
}
.cz-create{ display:flex; flex-direction:column; gap:12px; }
.cz-create h3{ margin:0; font-family:var(--font-display); font-size:15px; color:#fff; }
.cz-create label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-muted); }
.cz-create label em{ font-style:normal; color:var(--text-faint); }
.cz-create input, .cz-create select{
  background:var(--bg-card); border:1px solid var(--line); border-radius:10px;
  color:#fff; padding:10px 12px; font-size:13.5px;
}
.cz-create input:focus, .cz-create select:focus{ outline:none; border-color:var(--pink); }
.cz-panel-msg{ text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.cz-panel-msg h3{ margin:0; font-family:var(--font-display); color:#fff; font-size:16px; }
.cz-panel-msg p{ margin:0; color:var(--text-muted); font-size:13px; }
.cz-panel-btns{ display:flex; gap:8px; }

.cz-rooms__title{ font-family:var(--font-display); font-size:14px; color:#fff; letter-spacing:.06em; margin:0 0 12px; }
.cz-rooms__list{ display:flex; flex-direction:column; gap:10px; }
.cz-room-card{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; transition:border-color .15s;
}
.cz-room-card:hover{ border-color:color-mix(in srgb, var(--pink) 45%, var(--line)); }
.cz-room-card.is-live{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cz-room-card__info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cz-room-card__info strong{ color:#fff; font-size:14px; }
.cz-room-card__info small{ color:var(--text-faint); font-size:12px; }
.cz-live{ color:var(--accent); letter-spacing:.08em; }
.cz-full{ color:#F0A81C; letter-spacing:.08em; }
.cz-fullbadge{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em;
  background:#F0A81C1E; color:#F0A81C; border:1px solid #F0A81C44;
}
.cz-room-card.is-full{ opacity:.92; }
.cz-room-card__join{ display:flex; gap:8px; align-items:center; flex:none; }
.cz-room-card__join input{
  width:110px; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:8px; color:#fff; padding:8px 10px; font-size:12.5px;
}
.cz-lock{ font-size:12px; }

/* --- oyun odası --- */
.cz-room{ display:flex; flex-direction:column; gap:14px; }
.cz-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:10px 14px;
}
.cz-head__title{ display:flex; align-items:center; gap:10px; min-width:0; }
.cz-head__title strong{ color:#fff; font-size:14px; }
.cz-head__title small{ display:block; color:var(--text-faint); font-size:11.5px; }
.cz-head__mid{ flex:1; display:flex; justify-content:center; min-width:120px; }
.cz-head__right{ display:flex; align-items:center; gap:10px; }

.cz-wordbar{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:999px;
  padding:7px 18px;
}
.cz-wordbar__label{
  font-family:var(--font-display); font-size:9.5px; font-weight:800; letter-spacing:.14em;
  color:var(--text-faint);
}
.cz-wordbar__word{
  font-family:var(--font-mono); font-size:17px; font-weight:800; letter-spacing:.14em; color:#fff;
  text-transform:uppercase; white-space:nowrap;
}

.cz-timer{
  position:relative; display:inline-flex; align-items:center; justify-content:flex-end;
  width:120px; height:26px; border-radius:999px; overflow:hidden;
  background:var(--bg-elevated); border:1px solid var(--line); padding:0 10px;
}
.cz-timer i{
  position:absolute; inset:0 auto 0 0; width:100%;
  background:linear-gradient(90deg, var(--accent), var(--pink)); opacity:.3;
  transition:width 1s linear;
}
.cz-timer b{ position:relative; font-family:var(--font-mono); font-size:13px; color:#fff; }

.cz-grid{
  display:grid; grid-template-columns:210px 1fr 260px; gap:14px; align-items:start;
}

/* oyuncular */
.cz-players{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:12px; display:flex; flex-direction:column; gap:10px;
}
.cz-players__t, .cz-chat__t{
  margin:0; font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.16em; color:var(--text-faint);
}
.cz-players__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cz-p{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px;
  padding:7px 9px; font-size:12.5px;
}
.cz-p.is-drawer{ border-color:color-mix(in srgb, var(--pink) 55%, var(--line)); }
.cz-p.is-guessed{ border-color:color-mix(in srgb, #43A047 55%, var(--line)); }
.cz-p__rank{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); width:14px; flex:none; }
.cz-p__av{
  flex:none; width:24px; height:24px; border-radius:50%; object-fit:cover;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
}
.cz-p__name{ color:#fff; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cz-p__name em{ font-style:normal; font-size:10px; }
.cz-p__brush, .cz-p__ok{ flex:none; font-size:12px; }
.cz-p__ok{ color:#43A047; font-weight:900; }
.cz-p__score{ flex:none; font-family:var(--font-display); font-size:13px; color:var(--accent); }
.cz-lobbyinfo{ display:flex; flex-direction:column; gap:8px; }
.cz-lobbyinfo p{ margin:0; font-size:12px; color:var(--text-muted); line-height:1.5; }

/* tuval */
.cz-stage{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.cz-canvas-wrap{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line); background:#fff; aspect-ratio:1000/625;
}
#czCanvas{ display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
#czCanvas:not(.is-mine){ cursor:default; }
.cz-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:#0b0d12CC; backdrop-filter:blur(3px);
}
/* display:flex [hidden] attribute'unu ezer → oyun başlasa bile lobi örtüsü tuvali kapatıyordu */
.cz-overlay[hidden],
.cz-tools[hidden],
.cz-lobbyinfo[hidden],
.cz-timer[hidden],
.cz-wordbar[hidden]{ display:none !important; }
.cz-overlay__card{
  text-align:center; padding:26px 30px; max-width:440px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.cz-overlay__card h3{ margin:0; font-family:var(--font-display); font-size:17px; color:#fff; }
.cz-overlay__card p{ margin:0; color:var(--text-muted); font-size:13px; line-height:1.6; }
.cz-choices{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.cz-choice{
  font-family:var(--font-display); font-size:14px; font-weight:800; color:#fff;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:12px;
  padding:12px 20px; cursor:pointer; transition:all .15s;
}
.cz-choice:hover{ border-color:var(--pink); transform:translateY(-2px); }
.cz-podium{ display:flex; flex-direction:column; gap:8px; width:100%; }
.cz-podium__row{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:14px; color:#fff;
}
.cz-podium__row em{ font-style:normal; font-family:var(--font-display); color:var(--accent); font-weight:900; }

/* araç çubuğu */
.cz-tools{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:10px 12px;
}
.cz-colors{ display:flex; gap:6px; flex-wrap:wrap; }
.cz-color{
  width:26px; height:26px; border-radius:8px; border:2px solid #ffffff22; cursor:pointer;
  transition:transform .12s;
}
.cz-color:hover{ transform:scale(1.12); }
.cz-color.is-on{ border-color:var(--pink); box-shadow:0 0 0 2px #FF3D8A44; }
.cz-sizes{ display:flex; gap:6px; align-items:center; }
.cz-size{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.cz-size i{ display:block; border-radius:50%; background:#fff; }
.cz-size.is-on{ border-color:var(--pink); }
.cz-tool{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:8px;
  color:#fff; font-size:15px; cursor:pointer; transition:border-color .12s;
}
.cz-tool:hover{ border-color:var(--pink); }
.cz-tool.is-on{ border-color:var(--accent); box-shadow:0 0 0 2px #1E88E544; }
.cz-tool--danger:hover{ border-color:#E53935; }

/* sohbet */
.cz-chat{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:12px; display:flex; flex-direction:column; gap:10px;
  height:100%; max-height:560px;
}
.cz-chat__list{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:5px;
  min-height:260px; scrollbar-width:thin;
}
.cz-msg{
  font-size:12.5px; line-height:1.45; color:var(--text-muted);
  padding:5px 9px; border-radius:8px; background:var(--bg-elevated);
  word-break:break-word;
}
.cz-msg--system{ color:var(--text-faint); font-style:italic; background:transparent; padding:2px 9px; }
.cz-msg--correct{
  color:#7fdc88; background:#43A0471f; border:1px solid #43A04740; font-weight:700;
}
.cz-msg--after{ color:#9fc2ef; background:#1E88E51a; }
.cz-chat__form{ display:flex; gap:8px; }
.cz-chat__form input{
  flex:1; min-width:0; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; color:#fff; padding:9px 12px; font-size:13px;
}
.cz-chat__form input:focus{ outline:none; border-color:var(--pink); }
.cz-chat__form input:disabled{ opacity:.55; }

/* --- responsive --- */
@media (max-width: 1080px){
  .cz-grid{ grid-template-columns:180px 1fr; }
  .cz-chat{ grid-column:1 / -1; max-height:340px; }
}
@media (max-width: 860px){
  .cz-hero__grid{ grid-template-columns:1fr; padding:22px 18px; }
  .cz-grid{ grid-template-columns:1fr; }
  .cz-players{ order:2; }
  .cz-stage{ order:1; }
  .cz-chat{ order:3; }
  .cz-players__list{ flex-direction:row; flex-wrap:wrap; }
  .cz-p{ flex:1 1 44%; min-width:150px; }
  .cz-head__mid{ order:3; width:100%; justify-content:flex-start; }
  .cz-wordbar__word{ font-size:14px; }
  .cz-room-card{ flex-direction:column; align-items:stretch; }
  .cz-room-card__join{ justify-content:flex-end; }
}


/* --- Kick Yayın Modu butonu --- */
/* Kick Yayın Modu butonu (NT Parola lobisi) */
.cg-kickmode{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  margin-bottom:18px; padding:16px 18px; border-radius:16px;
  background:
    radial-gradient(120% 140% at 0% 50%, #53FC1828, transparent 55%),
    linear-gradient(120deg, #141A14, #0E120E);
  box-shadow:inset 0 0 0 1px #53FC1848, 0 8px 24px #00000044;
  transition:transform .15s var(--ease), box-shadow .15s;
}
.cg-kickmode:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px #53FC18AA, 0 12px 28px #53FC1828; }
.cg-kickmode__ico{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:#0B0D0A; box-shadow:inset 0 0 0 1px #53FC1866, 0 0 16px #53FC1822;
}
.cg-kickmode__ico svg{ display:block; }
.cg-kickmode__text{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.cg-kickmode__text b{ font-family:var(--font-display); font-size:15px; color:#fff; }
.cg-kickmode__text small{ font-size:12px; color:var(--text-faint); line-height:1.4; }
.cg-kickmode__go{ font-size:22px; color:#53FC18; flex:none; font-weight:800; }

/* --- Yayıncı Odası / NT Parola Yayın Modu --- */
/* Art direction: Kick-green control booth · LED stage desk · asymmetric deck */
.yo-room{ display:flex; flex-direction:column; gap:20px; max-width:960px; margin:0 auto; }

.yo-hero{
  position:relative; overflow:hidden; border-radius:22px;
  border:1px solid color-mix(in srgb, #53FC18 28%, var(--line));
  background:
    linear-gradient(165deg, #12161EEC 0%, #0B0D12F5 100%);
  padding:clamp(28px, 4vw, 40px) clamp(22px, 3.5vw, 36px);
  min-height:200px;
  display:flex; align-items:flex-end;
}
.yo-hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 320px at 12% -30%, #53FC1826, transparent 58%),
    radial-gradient(520px 280px at 92% 110%, #FF3D8A14, transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, #ffffff03 3px, #ffffff03 4px);
  animation:yoHeroPulse 7s ease-in-out infinite;
}
.yo-hero.is-live .yo-hero__glow{
  background:
    radial-gradient(900px 320px at 12% -30%, #53FC1838, transparent 58%),
    radial-gradient(520px 280px at 92% 110%, #E5393520, transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, #ffffff03 3px, #ffffff03 4px);
}
@keyframes yoHeroPulse{
  0%,100%{ opacity:.85; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.02); }
}
.yo-hero__inner{ position:relative; z-index:1; width:100%; }
.yo-hero__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; flex-wrap:wrap;
}
.yo-hero__tag{
  display:inline-block; font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.2em; color:#53FC18;
}
.yo-hero__pulse{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.16em;
  color:var(--text-faint); padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:#ffffff06;
}
.yo-hero__pulse i{
  width:7px; height:7px; border-radius:50%; background:var(--text-faint);
}
.yo-hero__pulse.is-on{ color:#fff; border-color:#E5393566; background:#E5393518; }
.yo-hero__pulse.is-on i{
  background:#E53935; box-shadow:0 0 10px #E53935;
  animation:yoLiveDot 1.2s ease-in-out infinite;
}
@keyframes yoLiveDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.yo-hero__title{
  font-family:var(--font-display); font-size:clamp(28px, 5vw, 42px); font-weight:900;
  color:#fff; margin:0 0 10px; letter-spacing:-.02em; line-height:1.05;
}
.yo-hero__sub{ color:var(--text-muted); font-size:14px; line-height:1.65; margin:0; max-width:52ch; }
.yo-hero__livebar{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline;
  margin-top:18px; padding-top:16px; border-top:1px solid #ffffff12;
}
.yo-hero__viewers{
  font-family:var(--font-display); font-size:13px; font-weight:800; color:#53FC18;
}
.yo-hero__streamtitle{ font-size:13px; color:var(--text-muted); }

.yo-connect{
  display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center;
  padding:24px; border-radius:20px; border:1px solid var(--line);
  background:
    linear-gradient(135deg, #53FC180C, transparent 45%),
    var(--bg-card);
}
.yo-connect__copy h3{
  margin:0 0 8px; font-family:var(--font-display); font-size:20px; color:#fff;
}
.yo-connect__copy p{ margin:0; font-size:13.5px; color:var(--text-muted); line-height:1.6; }
@media (max-width:720px){ .yo-connect{ grid-template-columns:1fr; } }

.yo-status{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px 14px; align-items:center;
  padding:16px 18px; border-radius:18px; border:1px solid var(--line);
  background:var(--bg-card);
}
.yo-status.is-live{ border-color:color-mix(in srgb, #E53935 40%, var(--line)); }
.yo-status__form{ grid-column:1 / -1; margin-top:4px; }
.yo-status__actions{ display:flex; gap:8px; }

.yo-deck{
  display:grid; grid-template-columns:1.35fr .9fr; gap:16px;
}
@media (max-width:800px){ .yo-deck{ grid-template-columns:1fr; } }

.yo-tile{
  position:relative; overflow:hidden;
  border-radius:20px; border:1px solid var(--line);
  background:var(--bg-card); padding:22px 22px 18px;
  display:flex; flex-direction:column; gap:0;
}
.yo-tile--overlay{
  border-color:color-mix(in srgb, #53FC18 30%, var(--line));
  background:
    radial-gradient(420px 180px at 100% 0%, #53FC1814, transparent 60%),
    var(--bg-card);
}
.yo-tile--games{
  background:
    radial-gradient(380px 160px at 0% 100%, #FF3D8A14, transparent 55%),
    var(--bg-card);
}

.yo-panel--arena{
  border-color:color-mix(in srgb, #53FC18 28%, var(--line));
  background:
    radial-gradient(520px 180px at 100% 0%, #53FC1812, transparent 55%),
    radial-gradient(400px 160px at 0% 100%, #FF3D8A10, transparent 50%),
    var(--bg-card);
}
.yo-panel--arena code{
  font-family:var(--font-mono); font-size:11.5px; padding:2px 6px;
  background:var(--bg-elevated); border-radius:5px; color:#53FC18;
}
.yo-arena__controls{ margin-top:14px; }
.yo-arena__row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.yo-arena__sec{
  width:72px; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; color:#fff; padding:10px 10px; font-size:13px;
  font-family:var(--font-mono);
}
.yo-arena__sec:focus{ outline:none; border-color:#53FC18; }
.yo-arena__cmds{
  display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:14px;
  font-size:12px; color:var(--text-muted);
}
.yo-tile__head{ margin-bottom:8px; }
.yo-tile__eyebrow{
  display:block; font-family:var(--font-display); font-size:9.5px; font-weight:800;
  letter-spacing:.16em; color:#53FC18; margin-bottom:6px;
}
.yo-tile--games .yo-tile__eyebrow{ color:var(--pink); }
.yo-tile h3{
  margin:0; font-family:var(--font-display); font-size:20px; font-weight:900; color:#fff;
}
.yo-tile__meta{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:10px; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono);
}
.yo-tile__meta a{ color:#53FC18; text-decoration:underline; text-underline-offset:2px; }
.yo-tile__cta{ margin-top:14px; align-self:flex-start; }

.yo-copyrow{ display:flex; gap:8px; flex-wrap:wrap; }
.yo-copyrow input[type="text"]{
  flex:1; min-width:160px; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; color:#fff; padding:10px 12px; font-size:12px; font-family:var(--font-mono);
}
.yo-copyrow input[type="text"]:focus{ outline:none; border-color:#53FC18; }

.yo-details{
  margin-top:14px; border-top:1px solid #ffffff10; padding-top:10px;
  font-size:12.5px; color:var(--text-muted);
}
.yo-details summary{
  cursor:pointer; font-weight:700; color:#fff; list-style:none;
  font-family:var(--font-display); font-size:12px; letter-spacing:.04em;
}
.yo-details summary::-webkit-details-marker{ display:none; }
.yo-details ol{ margin:10px 0 0; padding-left:1.2em; line-height:1.65; }
.yo-details li{ margin-bottom:4px; }
.yo-rotate{ margin-top:12px; }

.yo-panel{
  background:var(--bg-card); border:1px solid var(--line); border-radius:20px;
  padding:20px 22px;
}
.yo-panel--tools{
  border-color:color-mix(in srgb, var(--pink) 22%, var(--line));
  background:
    radial-gradient(600px 200px at 50% -20%, #FF3D8A10, transparent 55%),
    var(--bg-card);
}
.yo-panel h3{ margin:0; font-family:var(--font-display); font-size:18px; color:#fff; }
.yo-hint{ margin:0 0 14px; font-size:12.5px; color:var(--text-faint); line-height:1.55; }
.yo-hint--tight{ margin-bottom:16px; }

.yo-form{ display:flex; gap:10px; flex-wrap:wrap; }
.yo-form input[type="text"]{
  flex:1; min-width:180px; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; color:#fff; padding:10px 12px; font-size:13px;
}
.yo-form input[type="text"]:focus{ outline:none; border-color:#53FC18; }
.yo-form--inline{ margin-top:0; }

.yo-tool__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  margin-bottom:14px; flex-wrap:wrap;
}
.yo-chatstate{
  font-size:11px; color:var(--text-faint); font-family:var(--font-mono);
  padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:#ffffff06;
}
.yo-chatstate.is-ok{ color:#53FC18; border-color:#53FC1844; }

.pgy-status{
  text-align:center; padding:14px; border-radius:12px; margin-bottom:14px;
  font-family:var(--font-display); font-weight:800; font-size:15px;
}
.pgy-status.is-won{ background:#43A0471f; border:1px solid #43A04766; color:#7fdc88; }
.pgy-status.is-lost{ background:#E539351f; border:1px solid #E5393566; color:#ff8f89; }
.pgy-status.is-cancelled{ background:var(--bg-elevated); border:1px solid var(--line); color:var(--text-faint); }
.pgy-status.is-penalty{ background:#FF3D8A1f; border:1px solid #FF3D8A66; color:#ff9fc4; }

.pgy-help-btn{
  display:inline-grid; place-items:center; vertical-align:middle;
  width:28px; height:28px; margin-left:6px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:var(--bg-elevated); cursor:pointer; font-size:14px; line-height:1;
  transition:border-color .15s, transform .12s;
}
.pgy-help-btn:hover{ border-color:var(--pink); transform:scale(1.08); }

.pgy-help-modal[hidden]{ display:none !important; }
.pgy-help-modal{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px;
}
.pgy-help-modal__backdrop{
  position:absolute; inset:0; background:#000000aa; backdrop-filter:blur(3px);
}
.pgy-help-modal__box{
  position:relative; z-index:1; width:min(520px, 100%);
  max-height:min(80vh, 640px); overflow:auto;
  background:var(--bg-panel, #12151c); border:1px solid var(--line);
  border-radius:16px; padding:22px 24px 20px;
  box-shadow:0 20px 60px #00000088;
}
.pgy-help-modal__x{
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border:0; border-radius:8px;
  background:transparent; color:var(--text-faint); font-size:22px; cursor:pointer; line-height:1;
}
.pgy-help-modal__x:hover{ color:#fff; background:var(--bg-elevated); }
.pgy-help-modal__box h3{
  margin:0 0 14px; font-family:var(--font-display); font-size:20px; color:#fff;
}
.pgy-help-modal__box h4{
  margin:16px 0 8px; font-size:13px; letter-spacing:.04em; color:var(--pink); text-transform:uppercase;
}
.pgy-help-modal__body{ font-size:13.5px; color:var(--text); line-height:1.55; }
.pgy-help-modal__body ul, .pgy-help-modal__body ol{ margin:0; padding-left:1.25em; }
.pgy-help-modal__body li{ margin-bottom:7px; }
.pgy-help-modal__body code{
  font-family:var(--font-mono); font-size:12px; padding:1px 5px;
  background:var(--bg-elevated); border-radius:4px; color:#53FC18;
}

.pgy-board{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:16px; }
.pgy-card{
  position:relative; min-height:78px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg-elevated); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:10px 6px; text-align:center;
}
.pgy-card__pos{ position:absolute; top:5px; left:7px; font-family:var(--font-mono); font-size:10px; color:var(--text-faint); }
.pgy-card__word{ font-family:var(--font-display); font-size:12.5px; font-weight:700; color:#fff; word-break:break-word; }
.pgy-card__type{ font-size:9.5px; letter-spacing:.06em; color:var(--text-faint); font-weight:700; }
.pgy-card__votes{ position:absolute; bottom:4px; right:6px; font-family:var(--font-mono); font-size:10px; color:var(--accent); }
.pgy-card--safe{ border-color:color-mix(in srgb, #43A047 55%, var(--line)); background:#43A0471a; }
.pgy-card--safe .pgy-card__type{ color:#7fdc88; }
.pgy-card--trap{ border-color:color-mix(in srgb, #E53935 55%, var(--line)); background:#E539351a; }
.pgy-card--trap .pgy-card__type{ color:#ff8f89; }
.pgy-card--penalty{ border-color:color-mix(in srgb, var(--pink) 55%, var(--line)); background:#FF3D8A1a; }
.pgy-card--penalty .pgy-card__type{ color:var(--pink); }
.pgy-card--neutral .pgy-card__type{ color:var(--text-faint); }
.pgy-card.is-opened{ opacity:.55; }
.pgy-card.is-votable{ cursor:pointer; transition:transform .12s, border-color .12s; }
.pgy-card.is-votable:hover{ transform:translateY(-2px); border-color:var(--pink); }

.pgy-clue__row{ display:flex; gap:8px; flex-wrap:wrap; }
.pgy-clue__row input[type="text"]{
  flex:1; min-width:140px; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; color:#fff; padding:10px 12px; font-size:13px;
}
.pgy-clue__row input[type="number"]{
  width:72px; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; color:#fff; padding:10px 12px; font-size:13px;
}
.pgy-clue__row input:focus{ outline:none; border-color:#53FC18; }

.pgy-voting{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px; }
.pgy-voting__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; color:#fff; }

@media (max-width:640px){
  .pgy-board{ grid-template-columns:repeat(3,1fr); }
  .yo-hero{ padding:20px 16px; }
}

.yo-status__avatar{
  flex:none; width:48px; height:48px; border-radius:14px; background:var(--bg-elevated) center/cover;
  display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;
  font-family:var(--font-display); color:#53FC18; border:1px solid var(--line);
}
.yo-status__body{ flex:1; min-width:0; }
.yo-status__name{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:14px; color:#fff; font-weight:700; flex-wrap:wrap; }
.yo-status__meta{ font-size:12px; color:var(--text-faint); margin-top:3px; }
.yo-offline{ font-size:11px; color:var(--text-faint); font-weight:400; font-family:var(--font-body); }

.yo-modeswitch{ display:flex; gap:8px; margin-bottom:16px; padding:4px; border-radius:12px; background:#ffffff06; border:1px solid #ffffff0d; }
.yo-mode{
  flex:1; padding:11px; border-radius:10px; border:1px solid transparent; background:transparent;
  color:var(--text-muted); font-family:var(--font-display); font-size:12.5px; font-weight:700; cursor:pointer;
  transition:all .15s;
}
.yo-mode:hover{ color:#fff; }
.yo-mode.is-on{ border-color:color-mix(in srgb, var(--pink) 45%, transparent); color:#fff; background:color-mix(in srgb, var(--pink) 16%, var(--bg-elevated)); }

.yo-label{ display:block; font-size:11.5px; color:var(--text-faint); margin-bottom:6px; font-weight:600; }
#yoKeyword, .yo-opt{
  width:100%; background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px;
  color:#fff; padding:10px 14px; font-size:13.5px; margin-bottom:8px;
}
#yoKeyword:focus, .yo-opt:focus{ outline:none; border-color:var(--pink); }

.yo-running__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.yo-running__kw{ font-family:var(--font-mono); font-size:14px; color:#fff; font-weight:700; }
.yo-running__count{ font-size:12.5px; color:var(--text-faint); }
.yo-running__count b{ color:var(--accent); font-family:var(--font-display); }

.yo-entries{ display:flex; flex-wrap:wrap; gap:6px; min-height:40px; margin-bottom:14px; }
.yo-chip{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; font-size:12px; color:#fff; font-family:var(--font-mono);
}

.yo-tally{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.yo-tally__row{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted); }
.yo-tally__row span{ flex:none; width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yo-tally__row b{ flex:none; width:40px; text-align:right; color:#fff; font-family:var(--font-mono); }
.yo-tally__bar{ flex:1; height:8px; border-radius:999px; background:var(--bg-elevated); overflow:hidden; }
.yo-tally__bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--pink)); }

.yo-running__actions{ display:flex; gap:10px; }

.yo-result{ text-align:center; padding:20px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.yo-result__label{ font-family:var(--font-display); font-size:11px; letter-spacing:.14em; color:var(--text-faint); }
.yo-result__value{ font-family:var(--font-display); font-size:24px; color:#fff; font-weight:900; }
.yo-result .yo-tally{ width:100%; text-align:left; }

@media (max-width: 640px){
  .yo-status{ grid-template-columns:auto 1fr; }
  .yo-status__actions{ grid-column:1 / -1; }
  .yo-tally__row span{ width:auto; flex:1; }
  .yo-hero{ min-height:0; }
}


/* ============================================================
   ÇEKİLİŞ
   ============================================================ */
.gv{ display:flex; flex-direction:column; gap:20px; max-width:920px; margin:0 auto; }
.gv-hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  min-height:200px; border:1px solid var(--line);
  background:
    radial-gradient(700px 280px at 10% -20%, #FF3D8A33, transparent 55%),
    radial-gradient(600px 260px at 100% 120%, #7C4DFF22, transparent 55%),
    var(--bg-card);
}
.gv-hero.has-cover{ background-image:var(--gv-cover); background-size:cover; background-position:center; }
.gv-hero__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #0b0d12AA 0%, #0b0d12EE 70%, #0b0d12 100%);
}
.gv-hero__body{ position:relative; z-index:1; padding:28px 26px 24px; }
.gv-hero__title{
  margin:10px 0 8px; font-family:var(--font-display); font-size:clamp(24px,4vw,36px);
  font-weight:900; color:#fff; line-height:1.15;
}
.gv-hero__desc{ margin:0 0 14px; color:var(--text-muted); font-size:14px; line-height:1.6; max-width:60ch; }
.gv-hero__meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--text-faint); }
.gv-hero__meta b{ color:#fff; font-weight:700; }

.gv-quota{
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--pink) 35%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 10%, transparent), transparent 55%),
    var(--bg-card);
}
.gv-quota.is-ready{
  border-color:#43A04766;
  background:linear-gradient(135deg,#43A04718,transparent 55%),var(--bg-card);
}
.gv-quota--failed{
  border-color:#E5393544;
  background:linear-gradient(135deg,#E5393514,transparent 55%),var(--bg-card);
}
.gv-quota__top{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px;
  margin-bottom:10px;
}
.gv-quota__top strong{
  font-family:var(--font-display); font-size:14px; color:#fff; letter-spacing:.02em;
}
.gv-quota__need{ font-size:13px; color:var(--pink); font-weight:700; }
.gv-quota__need b{ font-size:18px; font-family:var(--font-display); }
.gv-quota__ok{ font-size:13px; color:#81C784; font-weight:700; }
.gv-quota__bar{
  height:10px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.gv-quota__bar i{
  display:block; height:100%; width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--pink), #F0C75E);
  box-shadow:0 0 12px color-mix(in srgb, var(--pink) 50%, transparent);
  transition:width .35s ease;
}
.gv-quota.is-ready .gv-quota__bar i{
  background:linear-gradient(90deg,#43A047,#81C784);
  box-shadow:0 0 12px #43A04766;
}
.gv-quota__meta{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
  margin:8px 0 0; font-size:12px; color:var(--text-faint);
}

.gv-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.14em;
  padding:5px 10px; border-radius:999px;
}
.gv-pill--live{ background:#E53935; color:#fff; box-shadow:0 0 16px #E5393566; }
.gv-pill--scheduled{ background:#1E88E533; color:#90CAF9; border:1px solid #1E88E555; }
.gv-pill--ended{ background:#ffffff14; color:var(--text-faint); border:1px solid var(--line); }

.gv-countdown{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.gv-cd{
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  padding:14px 8px; text-align:center;
}
.gv-cd b{
  display:block; font-family:var(--font-mono); font-size:clamp(22px,4vw,32px);
  font-weight:800; color:#fff; letter-spacing:.04em;
}
.gv-cd span{ font-size:11px; color:var(--text-faint); letter-spacing:.12em; text-transform:uppercase; }

.gv-section__t{
  margin:0 0 12px; font-family:var(--font-display); font-size:14px; font-weight:800;
  letter-spacing:.1em; color:#fff;
}
.gv-section__s{ margin:-6px 0 14px; font-size:12.5px; color:var(--text-faint); }

.gv-prizes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.gv-prize{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
  padding:16px; overflow:hidden;
}
.gv-prize--1{
  border-color:#F0C75E66;
  background:linear-gradient(160deg, #F0C75E18, var(--bg-card) 60%);
  box-shadow:0 0 24px #F0C75E14;
}
.gv-prize--2{ border-color:#C0C8D466; }
.gv-prize--3{ border-color:#CD7F3244; }
.gv-prize__rank{
  flex:none; width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:14px; color:#0b0b0b;
  background:linear-gradient(135deg, var(--pink), var(--accent));
}
.gv-prize--1 .gv-prize__rank{ background:linear-gradient(135deg,#F0C75E,#FFF3A0); }
.gv-prize__body h4{ margin:0 0 4px; font-family:var(--font-display); font-size:15px; color:#fff; }
.gv-prize__body p{ margin:0 0 6px; font-size:12.5px; color:var(--text-muted); line-height:1.45; }
.gv-prize__body em{ font-style:normal; font-size:11px; color:var(--accent); font-family:var(--font-mono); }

.gv-conds{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.gv-cond{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:12px 14px;
  transition:border-color .15s, background .15s;
}
.gv-cond.is-done{ border-color:#43A04766; background:#43A04712; }
.gv-cond__check{ display:flex; align-items:center; gap:10px; flex:1; min-width:180px; cursor:pointer; }
.gv-cond__cb{ position:absolute; opacity:0; pointer-events:none; }
.gv-cond__box{
  flex:none; width:22px; height:22px; border-radius:7px; border:2px solid var(--line);
  background:var(--bg-elevated); position:relative;
}
.gv-cond.is-done .gv-cond__box{
  border-color:#43A047; background:#43A047;
}
.gv-cond.is-done .gv-cond__box::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.gv-cond__label{ font-size:13.5px; color:#fff; font-weight:600; }
.gv-cond__btn{
  flex:none; text-decoration:none; font-family:var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.06em; padding:8px 14px; border-radius:10px;
  background:linear-gradient(120deg, #5865F2, #7289DA); color:#fff;
  box-shadow:0 4px 14px #5865F244;
}
.gv-cond__btn:hover{ filter:brightness(1.08); }

.gv-join{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; text-align:center;
}
.gv-join__gate h3{ margin:0 0 6px; font-family:var(--font-display); color:#fff; }
.gv-join__gate p{ margin:0 0 14px; color:var(--text-muted); font-size:13.5px; }
.gv-join__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.gv-join__go{ min-width:220px; padding:14px 28px; font-size:15px; }
.gv-join__go:disabled{ opacity:.45; cursor:not-allowed; filter:none; box-shadow:none; }
.gv-join__hint{ display:block; margin-top:10px; font-size:12px; color:var(--text-faint); }
.gv-joined{
  display:flex; align-items:center; gap:14px; text-align:left; justify-content:center;
}
.gv-joined__ico{
  width:48px; height:48px; border-radius:50%; background:#43A047; color:#fff;
  display:grid; place-items:center; font-size:22px; font-weight:900; flex:none;
}
.gv-joined strong{ display:block; color:#fff; font-family:var(--font-display); font-size:16px; }
.gv-joined p{ margin:4px 0 0; font-size:13px; color:var(--text-muted); }

.gv-results{
  background:
    radial-gradient(500px 200px at 50% 0%, #F0C75E33, transparent 60%),
    var(--bg-card);
  border:1px solid #F0C75E55; border-radius:var(--radius-lg);
  padding:26px 20px; text-align:center;
  animation:gvPop .5s cubic-bezier(.22,.8,.2,1);
}
@keyframes gvPop{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.gv-results__badge{
  display:inline-block; font-family:var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.16em; color:#0b0b0b; background:linear-gradient(120deg,#F0C75E,#FFF3A0);
  padding:5px 12px; border-radius:999px; margin-bottom:10px;
}
.gv-results__head h2{ margin:0 0 6px; font-family:var(--font-display); font-size:22px; color:#fff; }
.gv-results__head p{ margin:0 0 18px; color:var(--text-muted); font-size:13.5px; }
.gv-winners{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.gv-winner{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; min-width:120px; padding:14px 16px; border-radius:14px;
  background:var(--bg-elevated); border:1px solid var(--line);
  transition:border-color .15s, transform .15s;
}
.gv-winner:hover{ border-color:#F0C75E66; transform:translateY(-2px); }
.gv-winner__prize{ font-size:10px; font-family:var(--font-display); letter-spacing:.08em; color:#F0C75E; font-weight:800; }
.gv-winner__av{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; color:#fff; overflow:hidden; background-size:cover;
  box-shadow:0 0 0 2px #F0C75E88;
}
.gv-winner strong{ color:#fff; font-size:13.5px; }
.gv-winner__ok{ color:#43A047; font-size:12px; }
.gv-empty{ color:var(--text-faint); font-size:13.5px; }
.gv-back{ text-align:center; margin:8px 0 0; }
.gv-back a{ color:var(--text-muted); font-size:13px; text-decoration:none; }
.gv-back a:hover{ color:#fff; }

/* liste — jackpot poster vault */
.gvx{
  --gvx-gold:#F0C75E;
  --gvx-rose:#FF3D8A;
  --gvx-heat:#FF5C39;
  display:flex; flex-direction:column; gap:26px;
  max-width:1120px; margin:0 auto 2rem;
  animation:gvxIn .55s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes gvxIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

.gvx-mast{
  position:relative; overflow:hidden;
  padding:28px 26px; border-radius:20px;
  border:1px solid color-mix(in srgb, var(--gvx-gold) 22%, var(--line));
  background:linear-gradient(160deg, #1a1218, #0c0e14);
}
.gvx-mast__fx{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 200px at 0% 0%, color-mix(in srgb, var(--gvx-heat) 22%, transparent), transparent 60%),
    radial-gradient(500px 180px at 100% 100%, color-mix(in srgb, var(--gvx-gold) 12%, transparent), transparent 55%);
}
.gvx-mast > *:not(.gvx-mast__fx){ position:relative; z-index:1; }
.gvx-brand{
  margin:0 0 10px;
  font-family:var(--font-display); font-weight:900; font-size:11px;
  letter-spacing:.28em; color:#FFB59A;
}
.gvx-brand i{ font-style:normal; opacity:.5; margin:0 2px; }
.gvx-mast h1{
  margin:0 0 8px;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(28px,5vw,40px); letter-spacing:-.04em; color:#fff;
}
.gvx-mast p{ margin:0; color:var(--text-muted); font-size:14px; max-width:42ch; }

.gvx-empty{
  position:relative; text-align:center;
  padding:56px 24px; border-radius:20px;
  border:1px dashed color-mix(in srgb, var(--gvx-gold) 30%, var(--line));
  background:var(--bg-card);
}
.gvx-empty__ring{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--gvx-gold) 45%, transparent);
  box-shadow:0 0 0 10px color-mix(in srgb, var(--gvx-gold) 8%, transparent);
  animation:gvxPulse 2.4s ease-in-out infinite;
}
@keyframes gvxPulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.06); opacity:1; }
}
.gvx-empty h2{ margin:0 0 6px; font-family:var(--font-display); color:#fff; font-size:22px; }
.gvx-empty p{ margin:0; color:var(--text-muted); font-size:14px; }

/* Full-bleed jackpot poster (replaces split feature card) */
.gvx-poster{
  position:relative; display:block; text-decoration:none; color:inherit;
  isolation:isolate; overflow:hidden;
  min-height:min(62vh, 520px);
  border-radius:24px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gvx-gold) 35%, transparent),
    0 28px 80px #000000aa,
    0 0 60px color-mix(in srgb, var(--gvx-heat) 18%, transparent);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gvx-poster:hover{
  transform:translateY(-4px) scale(1.005);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gvx-gold) 55%, transparent),
    0 36px 90px #000000cc,
    0 0 80px color-mix(in srgb, var(--gvx-rose) 22%, transparent);
}
.gvx-poster__bg{
  position:absolute; inset:0; z-index:0;
  background:
    var(--poster, none) center/cover no-repeat,
    radial-gradient(circle at 30% 35%, #FF3D8A55, transparent 45%),
    radial-gradient(circle at 75% 60%, #FF5C3944, transparent 50%),
    linear-gradient(155deg, #1c1016, #090b10 70%);
  transform:scale(1.04);
  transition:transform .6s ease;
}
.gvx-poster:hover .gvx-poster__bg{ transform:scale(1.08); }
.gvx-poster.is-fallback .gvx-poster__bg{
  background-image:
    radial-gradient(circle at 28% 30%, #FF3D8A66, transparent 42%),
    radial-gradient(circle at 80% 70%, #F0C75E33, transparent 48%),
    linear-gradient(155deg, #221018, #0a0c12);
}
.gvx-poster__glow{
  position:absolute; inset:-10%; z-index:1; pointer-events:none;
  background:
    radial-gradient(50% 40% at 70% 20%, color-mix(in srgb, var(--gvx-gold) 18%, transparent), transparent 70%),
    radial-gradient(40% 35% at 15% 80%, color-mix(in srgb, var(--gvx-rose) 25%, transparent), transparent 70%);
  animation:gvxGlow 7s ease-in-out infinite alternate;
}
@keyframes gvxGlow{
  from{ opacity:.55; }
  to{ opacity:1; }
}
.gvx-poster__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, #07080ccc 0%, transparent 28%, transparent 42%, #07080cf2 78%, #07080c 100%),
    linear-gradient(90deg, #07080c88 0%, transparent 22%, transparent 78%, #07080c66 100%);
}
.gvx-poster__scan{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, transparent 0 2px, #00000055 2px 3px);
}
.gvx-poster__frame{
  position:absolute; inset:10px; z-index:4; pointer-events:none; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--gvx-gold) 28%, transparent);
  box-shadow:inset 0 0 0 1px #00000055;
}
.gvx-poster__top{
  position:absolute; top:22px; left:22px; right:22px; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.gvx-live{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.16em;
  color:#fff; background:#E53935;
  box-shadow:0 0 0 1px #ffffff22, 0 8px 24px #E5393566;
}
.gvx-live i{
  width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 #ffffff88; animation:ping 1.5s ease infinite;
}
.gvx-poster__mark{
  font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.22em; color:#FFD9A8;
  text-shadow:0 2px 16px #000;
  padding:7px 12px; border-radius:999px;
  background:#00000066; backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px #ffffff18;
}

/* Foil prize stamp */
.gvx-stamp{
  position:absolute; top:50%; right:8%; z-index:6;
  transform:translateY(-62%) rotate(6deg);
  width:min(200px, 42vw);
  padding:16px 14px 14px;
  text-align:center;
  border-radius:18px;
  background:
    linear-gradient(145deg, #FFF3A0 0%, #F0C75E 35%, #C9A227 70%, #FFF0B0 100%);
  color:#1a1208;
  box-shadow:
    0 18px 40px #00000099,
    inset 0 1px 0 #ffffffaa,
    inset 0 -2px 0 #00000022;
  animation:gvxStamp 5.5s ease-in-out infinite;
}
@keyframes gvxStamp{
  0%,100%{ transform:translateY(-62%) rotate(6deg); }
  50%{ transform:translateY(-66%) rotate(4deg); }
}
.gvx-stamp__n{
  display:block; font-family:var(--font-display); font-size:42px; font-weight:900;
  line-height:1; letter-spacing:-.04em;
}
.gvx-stamp__l{
  display:block; font-size:10px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; opacity:.7; margin-bottom:6px;
}
.gvx-stamp strong{
  display:block; font-family:var(--font-display); font-size:12px; font-weight:800;
  letter-spacing:.02em; line-height:1.25;
  padding-top:8px; border-top:1px solid #00000022;
}

/* Glass dock */
.gvx-poster__dock{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:6;
  display:grid; grid-template-columns:1.3fr auto; gap:18px; align-items:end;
  padding:18px 18px 16px;
  border-radius:18px;
  background:linear-gradient(160deg, #0e1018ee, #0a0c12f2);
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:
    inset 0 0 0 1px #ffffff14,
    0 12px 40px #00000088;
}
.gvx-poster__copy{ min-width:0; }
.gvx-kicker{
  display:inline-block; margin-bottom:6px;
  font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.2em; color:var(--gvx-gold);
}
.gvx-poster__copy h2{
  margin:0 0 6px;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(20px, 3.4vw, 34px); line-height:1.1;
  letter-spacing:-.03em; color:#fff;
  text-wrap:balance;
}
.gvx-poster__copy p{
  margin:0; color:#B8BEC9; font-size:13px; line-height:1.45;
  max-width:48ch;
}
.gvx-poster__rail{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end;
}
.gvx-ring{
  position:relative; width:72px; height:72px; flex:0 0 auto;
}
.gvx-ring svg{ display:block; transform:rotate(-90deg); }
.gvx-ring__track{
  fill:none; stroke:#ffffff14; stroke-width:6;
}
.gvx-ring__val{
  fill:none; stroke-width:6; stroke-linecap:round;
  stroke:var(--gvx-gold);
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--gvx-gold) 55%, transparent));
  transition:stroke-dasharray .4s ease;
}
.gvx-ring__txt{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  line-height:1.05;
}
.gvx-ring__txt b{
  font-family:var(--font-display); font-size:18px; font-weight:900; color:#fff;
}
.gvx-ring__txt span{ font-size:10px; color:var(--text-faint); }
.gvx-poster__nums{
  display:flex; gap:4px;
  padding:4px; border-radius:14px;
  background:#00000055; box-shadow:inset 0 0 0 1px #ffffff10;
}
.gvx-poster__nums > div{
  min-width:76px; padding:10px 12px; text-align:center; border-radius:11px;
}
.gvx-poster__nums b{
  display:block; font-family:var(--font-mono); font-size:15px; color:#EEF0F6; font-weight:700;
}
.gvx-poster__nums span{
  font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.gvx-poster__nums .is-gold b{ color:var(--gvx-gold); }
.gvx-poster__nums .is-heat b{ color:var(--gvx-heat); }
.gvx-poster__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 18px; border-radius:14px;
  font-family:var(--font-display); font-size:13px; font-weight:800; letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(135deg, var(--gvx-heat), var(--gvx-rose));
  box-shadow:0 8px 28px color-mix(in srgb, var(--gvx-heat) 45%, transparent),
             inset 0 1px 0 #ffffff44;
  transition:filter .15s, transform .15s;
}
.gvx-poster:hover .gvx-poster__cta{ filter:brightness(1.08); transform:translateX(2px); }

.gvx-meter{
  height:8px; border-radius:999px; overflow:hidden; margin-top:4px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.gvx-meter i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--gvx-rose), var(--gvx-gold));
  box-shadow:0 0 12px color-mix(in srgb, var(--gvx-rose) 45%, transparent);
}
.gvx-meter--sm{ height:6px; margin-top:8px; }
.gvx-meter__lbl{ margin:6px 0 0; font-size:11.5px; color:var(--text-faint); }
.gvx-meter__lbl b{ color:var(--gvx-rose); }

/* sections + cards */
.gvx-sec{ display:flex; flex-direction:column; gap:14px; }
.gvx-sec__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.gvx-sec__head h3{
  margin:0; font-family:var(--font-display); font-size:16px; font-weight:800; color:#fff;
}
.gvx-sec__head span{
  font-size:11px; font-weight:700; color:var(--text-faint);
  padding:4px 10px; border-radius:999px; border:1px solid var(--line);
}
.gvx-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:16px;
}
.gvx-card{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(180deg, #161a22, #0e1118);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation:gvxCard .5s cubic-bezier(.22,.8,.2,1) both;
}
.gvx-card:nth-child(1){ animation-delay:.04s; }
.gvx-card:nth-child(2){ animation-delay:.08s; }
.gvx-card:nth-child(3){ animation-delay:.12s; }
.gvx-card:nth-child(4){ animation-delay:.16s; }
.gvx-card:nth-child(5){ animation-delay:.2s; }
.gvx-card:nth-child(6){ animation-delay:.24s; }
@keyframes gvxCard{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
.gvx-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--gvx-rose) 40%, var(--line));
  box-shadow:0 16px 40px #00000077, 0 0 28px color-mix(in srgb, var(--gvx-rose) 12%, transparent);
}
.gvx-card--ended{ opacity:.78; }
.gvx-card--ended:hover{ opacity:1; }
.gvx-card__art{
  position:relative; aspect-ratio:16 / 10;
  background:#12151C center/cover no-repeat;
}
.gvx-card__art.is-fallback{
  background-image:
    radial-gradient(circle at 30% 40%, #FF3D8A33, transparent 50%),
    radial-gradient(circle at 80% 60%, #7C4DFF33, transparent 50%),
    linear-gradient(150deg, #1a1420, #0c0e14);
}
.gvx-card__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 35%, #0b0d12F0 100%);
}
.gvx-card__art .gv-pill{
  position:absolute; top:12px; left:12px; z-index:2;
}
.gvx-card__prize{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  font-size:11px; font-weight:700; color:#F0C75E;
  text-shadow:0 2px 10px #000;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gvx-card__body{
  padding:14px 14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.gvx-card__body strong{
  color:#fff; font-family:var(--font-display); font-size:14.5px; font-weight:800;
  line-height:1.25; letter-spacing:-.01em;
}
.gvx-card__row{
  display:flex; justify-content:space-between; gap:8px;
  font-size:12px; color:var(--text-faint);
}
.gvx-card__clock{ color:var(--gvx-gold); font-family:var(--font-mono); font-weight:700; }
.gvx-card__sub{ margin:0; font-size:11.5px; color:var(--text-faint); }

@media (max-width:900px){
  .gvx-poster{ min-height:480px; }
  .gvx-poster__dock{ grid-template-columns:1fr; gap:14px; }
  .gvx-poster__rail{ justify-content:flex-start; }
  .gvx-stamp{ right:5%; width:140px; padding:12px 10px; }
  .gvx-stamp__n{ font-size:32px; }
}
@media (max-width:640px){
  .gvx{ gap:18px; }
  .gvx-poster{ min-height:520px; border-radius:18px; }
  .gvx-poster__frame{ inset:8px; }
  .gvx-poster__top{ top:16px; left:16px; right:16px; }
  .gvx-stamp{ top:38%; right:12px; width:120px; animation:none; transform:translateY(-50%) rotate(5deg); }
  .gvx-poster__nums > div{ min-width:64px; padding:8px; }
  .gvx-poster__cta{ width:100%; justify-content:center; }
  .gvx-grid{ grid-template-columns:1fr; }
}

/* legacy list kept for safety if referenced */
.gv-list{ display:flex; flex-direction:column; gap:20px; }
.gv-list__hero{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 24px;
  background-image:
    radial-gradient(600px 240px at 0% 0%, #FF3D8A22, transparent 55%),
    linear-gradient(var(--bg-card), var(--bg-card));
}
.gv-list__tag{
  display:inline-block; font-family:var(--font-display); font-size:10px; font-weight:800;
  letter-spacing:.18em; color:var(--pink); margin-bottom:8px;
}
.gv-list__hero h2{ margin:0 0 6px; font-family:var(--font-display); font-size:26px; color:#fff; }
.gv-list__hero p{ margin:0; color:var(--text-muted); font-size:13.5px; }
.gv-list__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.gv-card{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border-radius:16px; border:1px solid var(--line); background:var(--bg-card);
  transition:transform .15s, border-color .15s;
}
.gv-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--pink) 45%, var(--line)); }
.gv-card__art{
  height:120px; background:
    radial-gradient(circle at 30% 40%, #FF3D8A33, transparent 50%),
    radial-gradient(circle at 80% 60%, #7C4DFF33, transparent 50%),
    #12151C;
  background-size:cover; background-position:center;
}
.gv-card__body{ padding:14px; display:flex; flex-direction:column; gap:6px; }
.gv-card__body strong{ color:#fff; font-family:var(--font-display); font-size:14px; }
.gv-card__body small{ color:var(--text-faint); font-size:12px; }

@media (max-width:640px){
  .gv-countdown{ grid-template-columns:repeat(2,1fr); }
  .gv-cond{ flex-direction:column; align-items:stretch; }
  .gv-cond__btn{ text-align:center; }
  .gv-joined{ flex-direction:column; text-align:center; }
}
/* ============ NT-AIM ============ */
.paim{ margin:-6px -4px 18px; }
.paim__top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:14px; padding:4px 2px 0;
}
.paim__tag{
  display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.16em; color:#FF4655; margin-bottom:6px;
}
.paim__brand h1{
  margin:0 0 6px; font-family:var(--font-display); font-size:clamp(22px,3vw,30px);
  font-weight:800; letter-spacing:.02em; color:#F4F1EA;
}
.paim__brand p{ margin:0; color:var(--text-muted); font-size:13px; max-width:46ch; }
.paim__modes{ display:flex; gap:6px; flex-wrap:wrap; }
.paim__mode{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  padding:8px 12px; border-radius:8px; text-decoration:none; color:#B8B3A6;
  background:#ffffff08; box-shadow:inset 0 0 0 1px #ffffff14;
}
.paim__mode:hover{ color:#fff; background:#ffffff12; }
.paim__mode.is-on{
  color:#0b0d10; background:linear-gradient(180deg,#FF6B78,#FF4655);
  box-shadow:0 8px 22px #FF465544;
}
.paim__layout{
  display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:14px; align-items:start;
}
.paim__arena-wrap{ min-width:0; }
.paim__hud{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:8px; font-family:var(--font-mono); font-size:11px; color:#9AA3AD;
}
.paim__hud-i b{ color:#F4F1EA; font-size:13px; margin-left:4px; }
.paim__hud-timer{
  flex:1; min-width:120px; height:6px; border-radius:99px; background:#ffffff12; overflow:hidden;
}
.paim__hud-timer i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#F0A81C,#FF4655);
  transition:width .05s linear;
}
.paim__arena{
  position:relative; height:min(62vh,560px); min-height:320px;
  border-radius:14px; overflow:hidden;
  background:#070a0e;
  box-shadow:inset 0 0 0 1px #ffffff12, 0 18px 40px #00000066;
  cursor:none; touch-action:none; user-select:none;
}
.paim:not(.is-playing) .paim__arena{ cursor:default; }
.paim__canvas{ display:block; width:100%; height:100%; }
.paim__crosshair{
  position:absolute; left:0; top:0; width:22px; height:22px; margin:-11px 0 0 -11px;
  pointer-events:none; z-index:3; opacity:0;
  background:
    linear-gradient(#F0E6D2,#F0E6D2) center/2px 100% no-repeat,
    linear-gradient(#F0E6D2,#F0E6D2) center/100% 2px no-repeat;
  border:1px solid rgba(240,230,210,.35); border-radius:50%;
  box-shadow:0 0 0 1px #0008;
}
.paim.is-playing .paim__crosshair{ opacity:1; }
.paim__hit{
  position:absolute; left:0; top:0; width:28px; height:28px; margin:-14px 0 0 -14px;
  pointer-events:none; z-index:4; opacity:0;
}
.paim__hit::before,.paim__hit::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:2px; background:#F0E6D2;
  box-shadow:0 0 8px #FF4655;
}
.paim__hit::before{ transform:translate(-50%,-50%) rotate(45deg); }
.paim__hit::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.paim__hit.is-on{ animation:paimHit .28s ease-out forwards; }
.paim__hit.is-hs::before,.paim__hit.is-hs::after{ background:#F0A81C; box-shadow:0 0 10px #F0A81C; }
@keyframes paimHit{
  0%{ opacity:1; transform:scale(.7); }
  100%{ opacity:0; transform:scale(1.35); }
}
.paim__overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:24px; text-align:center;
  background:radial-gradient(ellipse at 50% 40%, #FF465522, transparent 55%), rgba(6,8,12,.78);
  backdrop-filter:blur(2px);
  pointer-events:auto;
}
.paim__overlay[hidden],
.paim__overlay.is-hidden{ display:none !important; pointer-events:none !important; }
.paim__overlay-t{
  font-family:var(--font-display); font-size:clamp(22px,3.4vw,34px); font-weight:800;
  color:#F4F1EA; letter-spacing:.02em;
}
.paim__overlay-p{ margin:0; max-width:42ch; color:#C4CBCF; font-size:13.5px; line-height:1.5; }
.paim__go{
  position:relative; z-index:6; pointer-events:auto;
  margin-top:4px; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.12em;
  padding:12px 22px; border-radius:10px; color:#0b0d10;
  background:linear-gradient(180deg,#FF6B78,#FF4655);
  box-shadow:0 12px 28px #FF465555, inset 0 1px 0 #ffffff55;
}
.paim__go--bar{
  margin-top:0; margin-left:auto; padding:8px 14px; font-size:11px;
  box-shadow:0 6px 16px #FF465544, inset 0 1px 0 #ffffff55;
}
.paim.is-playing .paim__go--bar{ opacity:.45; pointer-events:none; }
.paim__go:hover{ filter:brightness(1.06); }
.paim__go:active{ transform:scale(.97); }
.paim__note{ font-family:var(--font-mono); font-size:10px; color:#8B939C; letter-spacing:.04em; }
.paim__side{ display:flex; flex-direction:column; gap:12px; }
.paim__card{
  background:linear-gradient(165deg,#12161c,#0a0c10);
  box-shadow:inset 0 0 0 1px #ffffff10; border-radius:14px; padding:14px 14px 12px;
}
.paim__card h3{
  margin:0 0 10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  color:#FF4655; font-weight:700;
}
.paim__lb{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.paim__lb li{
  display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
  font-size:12px; color:#E6EDF3;
}
.paim__lb li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.paim__lb li em{ font-style:normal; font-family:var(--font-mono); font-size:10px; color:#8B939C; }
.paim__lb li b{ font-family:var(--font-display); font-size:13px; color:#F0A81C; }
.paim__lb li:first-child b{ color:#FFD98A; }
.paim__lb-empty{ color:#8B939C !important; display:block !important; }
.paim__card--tips ul{ margin:0; padding:0 0 0 14px; color:#A8B0B8; font-size:12px; line-height:1.55; }
.paim__card--tips li{ margin-bottom:4px; }
@media (max-width:900px){
  .paim__layout{ grid-template-columns:1fr; }
  .paim__arena{ height:min(58vh,480px); }
  .paim__side{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}
@media (max-width:640px){
  .paim__side{ grid-template-columns:1fr; }
  .paim__hud{ font-size:10px; gap:8px; }
  .paim__arena{ min-height:280px; cursor:crosshair; }
  .paim.is-playing .paim__crosshair{ opacity:.85; }
}