/* muratok.dev/gaming — Player 2
   Layout: aynı SAP GUI çerçevesi (komut alanı + durum çubuğu), içi gece modunda bir
   battlestation. Hero 32:9 ultrawide; altında karakter kartı, raf, akış, envanter.
   Bilerek tek tema (gece): ekran ışığı ancak karanlıkta anlam kazanıyor. */

:root.g, :root.g[data-theme] {
  /* site.css belirteçlerini gece paletine çek */
  --paper:   #0B0919;   /* oda karanlığı */
  --sheet:   #151231;   /* panel */
  --ink:     #EDE9FF;
  --ink-2:   #9C95C9;
  --rule:    #2A2550;
  --kw:      #57D9FF;   /* fan camgöbeği */
  --amber:   #FF9A3D;   /* gün batımı turuncusu, ana sitedeki imleçle aynı aile */
  --amber-bg:#3A2018;
  --add:     #6BE39A;
  --add-bg:  #12301F;
  --del:     #FF5C7A;
  --del-bg:  #3A1422;
  --code-bg: #100D26;

  /* oyun sayfasına özel */
  --mag:     #FF3D9A;   /* synthwave pembesi */
  --team:    #57D9FF;   /* wololo ile değişen takım rengi */
  --glow-l:  #FF3D9A;
  --glow-r:  #FF9A3D;
  --f-px: "Pixelify Sans", "DM Mono", ui-monospace, monospace;
  color-scheme: dark;
}

.g body {
  background:
    radial-gradient(1200px 500px at 50% -120px, color-mix(in srgb, var(--mag) 16%, transparent), transparent 70%),
    var(--paper);
}
.px { font-family: var(--f-px); font-weight: 500; letter-spacing: .02em; }

/* ---------- Hero ---------- */
.g-hero { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 72px); display: grid; gap: clamp(28px, 4vw, 44px); }
.g-intro { display: grid; gap: 14px; max-width: 46rem; }
.g-eyebrow { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-2); }
.g-name {
  font-family: var(--f-px); font-weight: 700; line-height: .9; letter-spacing: -.01em;
  font-size: clamp(3.4rem, 11vw, 8rem);
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--mag), 6px 6px 0 color-mix(in srgb, var(--amber) 70%, transparent);
}
.g-lead { font-size: clamp(1.0625rem, 1.6vw, 1.2rem); max-width: 40em; color: var(--ink); }

.rig { display: grid; justify-items: center; gap: 0; }
.monitor {
  position: relative; width: 100%; max-width: 100%;
  border-radius: 14px; padding: 7px; background: #05040C;
  border: 1px solid #1d1a38;
  box-shadow:
    -60px 0 90px -30px var(--glow-l),
     60px 0 90px -30px var(--glow-r),
     0 30px 80px -40px color-mix(in srgb, var(--glow-l) 60%, transparent),
     inset 0 0 0 1px #000;
  transition: box-shadow .6s linear;
}
#scene {
  display: block; width: 100%; height: auto; aspect-ratio: 32 / 9;
  image-rendering: pixelated; image-rendering: crisp-edges;
  border-radius: 8px; background: #1a0b33;
  object-fit: cover;
}
/* kavis hissi: kenarlar hafif koyu */
.monitor::after {
  content: ""; position: absolute; inset: 7px; border-radius: 8px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 9%, transparent 91%, rgba(0,0,0,.45));
}
.hud { position: absolute; inset: 7px; z-index: 1; color: #fff; font-size: clamp(10px, 1.1vw, 13px); pointer-events: none; }
.hud > * { position: absolute; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.hud-tl { left: 2.2%; top: 6%; display: flex; gap: 8px; align-items: center; font-size: 1.15em; }
.hud .chip { font-family: var(--f-mono); font-size: .78em; padding: 1px 6px; border: 1px solid rgba(255,255,255,.5); border-radius: 3px; }
.hud-tr { right: 2.2%; top: 6%; }
.hud-bl, .hud-br { bottom: 6%; font-family: var(--f-mono); font-size: .85em; opacity: .8; }
.hud-bl { left: 2.2%; }
.hud-br { right: 2.2%; }
.start {
  left: 50%; top: 70%; transform: translateX(-50%);
  background: rgba(11,9,25,.55); border-radius: 3px;
  pointer-events: auto; text-decoration: none; color: #fff;
  font-size: clamp(14px, 2vw, 26px); letter-spacing: .12em; padding: 4px 12px;
  animation: pulse 1.2s steps(2) infinite;
}
.start:hover, .start:focus-visible { animation: none; background: rgba(0,0,0,.35); outline-color: #fff; }
@keyframes pulse { 50% { opacity: .15; } }

.stand {
  width: 18%; min-width: 90px; height: 26px; margin-top: -1px;
  background: linear-gradient(#0d0b1d, #05040C);
  clip-path: polygon(38% 0, 62% 0, 70% 70%, 100% 80%, 100% 100%, 0 100%, 0 80%, 30% 70%);
}
.rig-cap { margin-top: 14px; font-size: var(--s-xs); color: var(--ink-2); text-align: center; max-width: 44rem; }

@media (max-width: 700px) {
  #scene { aspect-ratio: 16 / 9; }
  .hud-tr, .hud-bl { display: none; }
  .start { top: 66%; }
  .monitor { box-shadow: -24px 0 50px -20px var(--glow-l), 24px 0 50px -20px var(--glow-r); }
}

/* ---------- Bölümler ---------- */
.g-sec h2 { font-family: var(--f-display); }
.g .sec { border-top-color: var(--rule); }

/* Karakter kartı */
.sheet {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(18px, 3vw, 32px);
  box-shadow: 0 0 0 1px #000 inset, 0 20px 60px -40px var(--mag);
}
.sheet-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.avatar {
  width: 84px; height: 84px; display: grid; place-items: center; border-radius: 10px;
  background:
    linear-gradient(135deg, var(--mag), var(--amber));
  box-shadow: 4px 4px 0 #000, 0 0 0 2px var(--ink) inset;
  font-size: 30px; color: #120826;
}
.sheet-rows { margin: 0; display: grid; gap: 0; }
.sheet-rows div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.sheet-rows div:last-child { border-bottom: 0; }
.sheet-rows dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: .3em; }
.sheet-rows dd { margin: 0; font-size: var(--s-sm); }

.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.stats li {
  display: grid; gap: 2px; padding: 12px 12px 10px; border-radius: 8px;
  background: var(--code-bg); border: 1px solid var(--rule);
}
.stats b { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; color: var(--team); font-variant-numeric: tabular-nums; transition: color .4s; }
.stats span { font-size: var(--s-xs); color: var(--ink-2); line-height: 1.3; }
@media (max-width: 860px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .sheet-id { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Raf */
.shelf {
  list-style: none; margin: 0; padding: 0 0 22px; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px);
}
.shelf::after { /* ahşap değil: ışıklı raf */
  content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 10px; border-radius: 3px;
  background: linear-gradient(var(--rule), #0a0818);
  box-shadow: 0 -2px 18px -2px color-mix(in srgb, var(--team) 55%, transparent), 0 6px 20px rgba(0,0,0,.6);
}
.box { perspective: 900px; min-width: 0; }
.box a { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.cover {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  transform: rotateY(-14deg); transform-origin: left center;
  box-shadow: -10px 12px 24px -8px rgba(0,0,0,.8), inset 6px 0 0 rgba(255,255,255,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.cover::before { /* kutu sırtı */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.12));
}
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover.noimg::after {
  content: attr(data-title); position: absolute; inset: auto 12px 14px 14px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; color: #fff;
}
.box a:hover .cover, .box a:focus-visible .cover {
  transform: rotateY(0) translateY(-6px);
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--c1) 80%, #000), 0 0 0 2px var(--team);
}
.box-meta { display: grid; gap: 3px; }
.box-genre { font-family: var(--f-mono); font-size: 11px; color: var(--team); letter-spacing: .04em; }
.box-name { font-family: var(--f-display); font-weight: 700; font-size: var(--s-md); line-height: 1.15; }
.box-note { font-size: var(--s-xs); color: var(--ink-2); }
@media (max-width: 820px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .shelf::after { display: none; } }

.recent { margin-top: clamp(36px, 5vw, 56px); }
.recent-h { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; letter-spacing: .1em; }
.recent-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); overflow: hidden; }
.recent-list li {
  display: grid; grid-template-columns: 92px minmax(0, 1.4fr) 5.5em minmax(0, 1fr) 7em; gap: 16px; align-items: center;
  padding: 10px 16px 10px 10px; border-top: 1px solid var(--rule); font-size: var(--s-sm);
}
.recent-list li:first-child { border-top: 0; }
.rc-thumb { width: 92px; aspect-ratio: 460 / 215; border-radius: 4px; background: var(--code-bg) center / cover no-repeat; }
.rc-sky { background: linear-gradient(90deg, var(--mag), var(--amber), var(--kw)); }
.rc-name { font-weight: 700; min-width: 0; }
.rc-name em { font-style: normal; font-weight: 400; color: var(--ink-2); font-size: var(--s-xs); }
.rc-h { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rc-h b { color: var(--ink); font-weight: 500; font-size: 15px; }
.rc-ach { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rc-ach .bar { flex: 1; height: 6px; background: var(--code-bg); border: 1px solid var(--rule); border-radius: 1px; position: relative; overflow: hidden; }
.rc-ach .bar i { position: absolute; inset: 0 auto 0 0; min-width: 3px; background: var(--team); }
.rc-d { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); text-align: right; }
.recent-note { margin-top: 12px; font-size: var(--s-xs); color: var(--ink-2); }
.recent-note a { color: var(--team); }
@media (max-width: 760px) {
  .recent-list li { grid-template-columns: 72px minmax(0, 1fr) auto; row-gap: 6px; }
  .rc-thumb { width: 72px; grid-row: span 2; }
  .rc-ach { grid-column: 2 / 3; }
  .rc-d { grid-column: 3; text-align: right; }
}

/* Akış */
.feed {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 12px;
}
.post {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 16px; border-radius: var(--radius); text-decoration: none; color: #fff;
  background: var(--sheet); border: 1px solid var(--rule); min-width: 0;
  transition: transform .2s ease, border-color .2s;
}
.post:hover, .post:focus-visible { transform: translateY(-3px); border-color: var(--team); }
.post-q { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.12; position: relative; text-wrap: balance; }
.post-c { font-family: var(--f-mono); font-size: 12px; color: rgba(255,255,255,.75); position: relative; }
.post-art { background: #000 var(--bg) center / cover no-repeat; }
.post-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(5,4,14,.92)); }
.post-wide .post-q { letter-spacing: .08em; }

.post-build { background: #000; justify-content: space-between; }
.post-build .post-q { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 2.3vw, 1.7rem); }
.loading { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.lb { width: 120px; height: 18px; border: 2px solid #fff; border-radius: 4px; padding: 2px; display: block; }
.lb i { display: block; height: 100%; width: 30%; background: repeating-linear-gradient(90deg, #fff 0 10px, transparent 10px 13px); animation: load 3.2s steps(8) infinite; }
@keyframes load { 0% { width: 8%; } 100% { width: 100%; } }

.post-coc {
  background:
    radial-gradient(circle at 70% 75%, #2a8fa0 0 9%, transparent 10%),
    #2f5d27;
}
.coc {
  position: absolute; inset: 14px 14px 44px 14px; border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(240,200,120,.75) 18px 21px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(240,200,120,.75) 18px 21px),
    radial-gradient(circle at 30% 40%, #ff5fd2 0 4px, transparent 5px),
    radial-gradient(circle at 62% 30%, #ff5fd2 0 4px, transparent 5px),
    radial-gradient(circle at 48% 62%, #ffd447 0 5px, transparent 6px),
    #6b5a3a;
  transform: perspective(500px) rotateX(38deg) rotateZ(-8deg); transform-origin: 50% 60%;
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
}

.post-film {
  background:
    repeating-linear-gradient(90deg, #000 0 14px, #2a2a2a 14px 22px) top / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, #000 0 14px, #2a2a2a 14px 22px) bottom / 100% 14px no-repeat,
    linear-gradient(#1b1f27, #0c0e12);
  justify-content: center;
}
.post-film .post-q { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

.post-nas { background: linear-gradient(160deg, #eef0f2, #c9ced4); color: #10131a; justify-content: space-between; }
.post-nas .post-q { font-family: var(--f-mono); font-size: 15px; font-weight: 500; background: #10131a; color: #fff; align-self: flex-start; padding: 4px 8px; }
.post-nas .post-c { color: #3a414d; }
.drives { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; height: 56px; padding: 6px; background: #15171c; border-radius: 6px; }
.drives i { background: linear-gradient(#2b2f38, #1d2027); border-radius: 2px; position: relative; }
.drives i::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #3dd68c; animation: hdd 1.4s steps(2) infinite; animation-delay: calc(var(--i, 0) * .17s); }
.drives i:nth-child(2)::after { animation-delay: .2s; } .drives i:nth-child(3)::after { animation-delay: .5s; }
.drives i:nth-child(4)::after { animation-delay: .1s; } .drives i:nth-child(5)::after { animation-delay: .7s; }
.drives i:nth-child(6)::after { animation-delay: .35s; }
@keyframes hdd { 50% { opacity: .2; } }

@media (max-width: 860px) {
  .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .feed { grid-template-columns: minmax(0, 1fr); }
}

.highlights { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.highlights a { display: grid; justify-items: center; gap: 6px; text-decoration: none; font-size: 12px; color: var(--ink-2); }
.highlights a:hover { color: var(--ink); }
.hl {
  width: 58px; height: 58px; border-radius: 50%; display: block;
  border: 2px solid var(--rule); box-shadow: 0 0 0 3px var(--paper) inset;
}
.highlights a:hover .hl { border-color: var(--team); }
.hl-games { background: radial-gradient(circle at 50% 60%, #ffcf5a 0 22%, #b8721a 23% 40%, #3b2410 41%); }
.hl-setup { background: linear-gradient(#1a1d2b 0 55%, #e9e9ee 55%), #fff; box-shadow: 0 0 0 3px var(--paper) inset, inset 0 -18px 0 -10px #57D9FF; }
.hl-lego { background: radial-gradient(circle at 35% 40%, #ffd23f 0 8px, transparent 9px), radial-gradient(circle at 65% 40%, #ffd23f 0 8px, transparent 9px), linear-gradient(#e4a91c, #c78b0b); }
.hl-tv { background: linear-gradient(135deg, #2a2550, #0b0919); }
.hl-sap { background: linear-gradient(135deg, #1D55B8, #0F1B2A); }

/* Envanter */
.inv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.slot {
  --r: var(--ink-2);
  position: relative; display: grid; gap: 6px; align-content: start; padding: 16px 16px 18px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; min-width: 0;
  box-shadow: inset 0 0 0 1px #000, inset 0 -3px 0 var(--r);
}
.slot-epic { --r: var(--amber); }
.slot-rare { --r: var(--team); }
.slot-un { --r: var(--add); }
.slot-k { font-size: 12px; color: var(--r); letter-spacing: .1em; }
.slot-n { font-family: var(--f-display); font-weight: 700; font-size: var(--s-lg); line-height: 1.15; }
.slot-d { font-size: var(--s-sm); color: var(--ink-2); }
.rar {
  position: absolute; top: 12px; right: 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--r); border: 1px solid currentColor; padding: 1px 6px; border-radius: 3px;
}
@media (max-width: 860px) { .inv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .inv { grid-template-columns: minmax(0, 1fr); } }

/* Kapanış */
.g-end { display: grid; justify-items: center; text-align: center; gap: 16px; }
.g-end-h { font-size: clamp(2.2rem, 7vw, 4.4rem); color: var(--ink); text-shadow: 3px 3px 0 var(--mag); }
.g-end-p { color: var(--ink-2); max-width: 34rem; }
.g .btn { background: var(--sheet); color: var(--ink); }
.g .btn-primary { background: var(--team); color: #0B0919; border-color: var(--team); }

/* Başarım bildirimi */
.toast {
  position: fixed; z-index: 40; right: 16px; bottom: calc(var(--status-h) + 16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px; max-width: min(380px, calc(100vw - 32px));
  padding: 12px 16px 12px 12px; border-radius: 8px;
  background: #1b1640; border: 1px solid var(--rule); color: var(--ink);
  box-shadow: 0 16px 40px -10px #000, 0 0 0 1px #000, 0 0 30px -10px var(--team);
  animation: toastin .45s cubic-bezier(.2,.9,.2,1.2) both;
}
.toast b { display: block; font-size: 12px; color: var(--amber); letter-spacing: .08em; }
.toast-t { display: grid; gap: 2px; font-size: var(--s-sm); min-width: 0; }
.trophy {
  width: 40px; height: 40px; flex: none; border-radius: 6px; background: var(--code-bg); position: relative;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.trophy::before { /* kupa: piksel blokları */
  content: ""; position: absolute; left: 12px; top: 9px; width: 16px; height: 12px; background: #FFC93D; border-radius: 0 0 6px 6px;
  box-shadow: -4px 2px 0 -2px #FFC93D, 4px 2px 0 -2px #FFC93D;
}
.trophy::after { content: ""; position: absolute; left: 14px; top: 23px; width: 12px; height: 8px; background: linear-gradient(#FFC93D 0 3px, #c99212 3px); }
@keyframes toastin { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* Wololo: takım rengi dönüşümü */
.wololo-flash { animation: wflash .7s ease-out; }
@keyframes wflash { 0% { filter: saturate(2.2) brightness(1.25); } 100% { filter: none; } }

/* Konami: CRT modu */
.crt main::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 35;
  background: repeating-linear-gradient(rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.crt main { filter: contrast(1.08) saturate(1.15); }

@media (prefers-reduced-motion: reduce) {
  .start, .lb i, .drives i::after { animation: none; }
  .toast { animation: none; }
  .cover, .post { transition: none; }
  .wololo-flash { animation: none; }
}

/* =====================================================================
   DİYARLAR — seçilen diyar ekrandaki gökyüzünü, ortam ışığını ve
   sayfanın vurgu rengini değiştirir (gaming.js PAL ile aynı aileler).
   ===================================================================== */
:root.g[data-realm="aoe"] { --team: #E8B64A; --mag: #B5452B; }
:root.g[data-realm="gow"] { --team: #8FD3FF; --mag: #C8352B; }
:root.g[data-realm="civ"] { --team: #49D3B6; --mag: #D9A441; }
:root.g[data-realm="gta"] { --team: #FF5FA8; --mag: #FF9A3D; }
.g .g-name, .g .g-end-h { transition: text-shadow .5s; }

/* Seçici */
.realm-pick {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  margin-top: 6px;
}
.realm-pick-l { width: 100%; text-align: center; font-size: 12px; letter-spacing: .14em; color: var(--ink-2); margin-bottom: 4px; }
.rp {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule);
  font-family: var(--f-body); font-size: var(--s-sm); font-weight: 700;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.rp:hover { transform: translateY(-2px); border-color: var(--ink-2); }
.rp[aria-selected="true"] { border-color: var(--team); box-shadow: 0 0 0 1px var(--team), 0 8px 24px -10px var(--team); }
.em { width: 30px; height: 30px; flex: none; display: grid; place-items: center; position: relative; }
.em-aoe { /* hanedan kalkanı */
  background: linear-gradient(90deg, #2554C7 0 50%, #C8352B 50%);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.em-aoe::after { content: ""; position: absolute; left: 11px; top: 7px; width: 8px; height: 8px; background: #E8B64A; transform: rotate(45deg); }
.em-gow { font-family: "Noto Sans Runic", serif; font-size: 18px; color: #dfe8ee; background: #3a4450; border-radius: 6px 6px 10px 10px; box-shadow: inset 0 -3px 0 #232a32; }
.em-civ { background: #D9A441; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.em-civ::after { content: ""; position: absolute; inset: 6px; background: #0f3b44; clip-path: inherit; }
.em-gta { color: #fff; font-size: 16px; background: linear-gradient(135deg, #FF5FA8, #FF9A3D); border-radius: 50%; }

/* Panel kabı */
.g .realms { padding-top: 8px; border-top: 0; }
.g-hero { padding-bottom: clamp(20px, 3vw, 32px); }
.realm { position: relative; overflow: hidden; border-radius: 14px; min-width: 0; animation: realmIn .45s ease-out both; }
@keyframes realmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- AGE OF EMPIRES: parşömen ve mürekkep ---------- */
.realm-aoe {
  --parch: #EAD9B2; --parch-2: #D9C08C; --inkb: #2B1C0E; --inkb-2: #6A4E2C; --gold: #B88A1E; --blood: #8E2A1C;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(90,55,20,.35)),
    repeating-linear-gradient(0deg, rgba(120,80,30,.05) 0 2px, transparent 2px 5px),
    linear-gradient(170deg, var(--parch), var(--parch-2));
  color: var(--inkb);
  border: 2px solid #6b4a22;
  box-shadow: 0 0 0 4px #2b1c0e, 0 0 0 5px #8a6a35, 0 30px 70px -30px rgba(232,182,74,.45);
}
.aoe-res {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  padding: 8px 16px; background: linear-gradient(#4a2f17, #2e1c0c); color: #F3E6C4;
  border-bottom: 2px solid #8a6a35; font-family: var(--f-mono); font-size: 13px;
}
.res { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.res b { font-weight: 500; color: #fff; }
.res span { color: #cdb98d; font-size: 11px; }
.res i { width: 14px; height: 14px; display: inline-block; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.r-wood { background: linear-gradient(90deg, #6b3f1d 0 30%, #8b5a2b 30% 70%, #6b3f1d 70%); }
.r-food { background: radial-gradient(circle at 40% 40%, #ff8a7a, #b8352a); border-radius: 50% !important; }
.r-gold { background: linear-gradient(135deg, #ffe27a, #c9961c); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.r-stone { background: linear-gradient(135deg, #c9c9c9, #7a7a7a); clip-path: polygon(20% 0, 85% 10%, 100% 70%, 60% 100%, 0 80%); }
.r-pop { background: radial-gradient(circle at 50% 30%, #e8c69a 0 25%, transparent 26%), radial-gradient(ellipse at 50% 100%, #2554C7 0 45%, transparent 46%); }
.res-age { margin-left: auto; font-family: "Cinzel", Georgia, serif; font-weight: 700; color: #E8B64A; letter-spacing: .04em; }

.aoe-body { padding: clamp(20px, 4vw, 40px); display: grid; gap: clamp(20px, 3vw, 32px); }
.aoe-head { display: grid; gap: 10px; max-width: 46rem; }
.aoe-kicker { font-family: var(--f-mono); font-size: 12px; color: var(--inkb-2); letter-spacing: .04em; }
.realm .aoe-title {
  font-family: "Cinzel", Georgia, serif; font-weight: 900; line-height: 1;
  font-size: clamp(1.8rem, 5vw, 3.6rem); color: var(--inkb); letter-spacing: .01em;
  text-wrap: balance;
}
.realm .aoe-title span { display: block; color: var(--blood); font-size: 1.35em; }
.aoe-lead { color: var(--inkb-2); font-size: var(--s-md); max-width: 40rem; }

.ages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; }
.age {
  position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 14px 18px;
  background: rgba(255,248,230,.45); border: 1px solid rgba(107,74,34,.45); border-radius: 6px; min-width: 0;
}
.age::after { /* araştırma çubuğu */
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--gold), #E8B64A); border-radius: 0 0 6px 6px;
  transform-origin: left; transform: scaleX(1);
}
.ages.run .age::after { animation: research .8s ease-out both; animation-delay: calc(var(--i) * .85s); }
.ages.run .age { animation: ageGlow .8s ease-out both; animation-delay: calc(var(--i) * .85s + .7s); }
@keyframes research { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ageGlow { 0% { box-shadow: 0 0 0 0 rgba(232,182,74,0); } 40% { box-shadow: 0 0 0 4px rgba(232,182,74,.55); } 100% { box-shadow: 0 0 0 0 rgba(232,182,74,0); } }
.age-n { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 2rem; line-height: 1; color: var(--gold); }
.age-name { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 1.05rem; }
.age-y { font-family: var(--f-mono); font-size: 12px; color: var(--inkb-2); }
.age-d { font-size: var(--s-sm); color: #3d2a16; }
.age:last-child { background: rgba(255,240,200,.75); border-color: var(--gold); }

.aoe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.aoe-btn {
  font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: .95rem; letter-spacing: .04em; cursor: pointer;
  padding: 10px 18px; color: #F3E6C4; border-radius: 4px;
  background: linear-gradient(#5a3a1a, #2e1c0c); border: 1px solid #b88a1e;
  box-shadow: inset 0 1px 0 rgba(255,230,170,.25), 0 3px 0 #1a0f05;
}
.aoe-btn:hover { filter: brightness(1.15); }
.aoe-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,230,170,.25), 0 1px 0 #1a0f05; }
.aoe-btn-alt { background: linear-gradient(#2c4fae, #142a66); border-color: #8fb0ff; }
.aoe-tip { font-size: var(--s-xs); color: var(--inkb-2); }
@media (max-width: 860px) { .ages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ages { grid-template-columns: minmax(0, 1fr); } .res-age { margin-left: 0; } }

/* ---------- GOD OF WAR: buz, taş, kor ---------- */
.realm-gow {
  --frost: #9FD4FF; --ember: #FF6A3A; --stone: #3a4450;
  background:
    linear-gradient(180deg, rgba(6,10,16,.55), rgba(6,10,16,.92) 60%),
    url('https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/2322010/library_hero.jpg') center 30% / cover no-repeat,
    #0a1018;
  color: #E6EEF3; border: 1px solid #22303d;
  box-shadow: 0 30px 70px -30px rgba(143,211,255,.35);
}
.gow-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gow-body { position: relative; padding: clamp(20px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.gow-head { display: grid; gap: 10px; }
.gow-kicker { font-family: var(--f-mono); font-size: 12px; color: var(--frost); letter-spacing: .06em; }
.realm .gow-title { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 0 #000, 0 0 30px rgba(159,212,255,.25); }
.gow-lead { color: #b9c7d1; max-width: 32rem; }

.stone {
  grid-row: span 2; justify-self: center; cursor: pointer; border: 0; color: inherit;
  width: min(100%, 340px); aspect-ratio: 3 / 4; padding: 40px 24px 28px;
  display: grid; align-content: center; justify-items: center; gap: 18px;
  border-radius: 46% 46% 12px 12px / 30% 30% 12px 12px;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.10), transparent 50%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.08) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #5b6672, #2c343d 70%, #1d232a);
  box-shadow: inset 0 -12px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.05), 0 24px 50px -16px #000;
}
.stone:focus-visible { outline-color: var(--frost); }
.runes { font-family: "Noto Sans Runic", serif; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; letter-spacing: .08em; display: flex; gap: .08em; }
.runes-sm { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.rn { color: #1b2128; text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 -1px 0 rgba(0,0,0,.6); transition: color .25s, text-shadow .25s; position: relative; }
.rn::after { content: attr(data-l); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; color: var(--frost); opacity: 0; transition: opacity .3s; letter-spacing: 0; }
.stone.lit .rn { color: #CFEFFF; text-shadow: 0 0 6px var(--frost), 0 0 18px rgba(159,212,255,.8); transition-delay: calc(var(--k, 0) * 90ms); }
.stone.lit .rn::after { opacity: .9; transition-delay: calc(var(--k, 0) * 90ms + .2s); }
.stone-tr { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: rgba(230,238,243,.55); }

.gow-games { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gow-games a {
  position: relative; display: grid; gap: 2px; padding: 16px 18px; min-height: 92px; align-content: end;
  border-radius: 8px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, rgba(6,10,16,.92) 35%, rgba(6,10,16,.35)), var(--bg) center / cover no-repeat, #111;
  border: 1px solid #2a3846;
}
.gow-games a:hover { border-color: var(--frost); }
.gg-y { font-family: var(--f-mono); font-size: 11px; color: var(--frost); }
.gg-n { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 1.15rem; }
.gg-d { font-size: var(--s-xs); color: #b9c7d1; }
@media (max-width: 820px) { .gow-body { grid-template-columns: minmax(0, 1fr); } .stone { grid-row: auto; } }

/* ---------- CIVILIZATION: harita, altıgen, altın ---------- */
.realm-civ {
  --sea: #0F3B44; --sea-2: #0a2a31; --cgold: #D9A441; --cteal: #49D3B6;
  background:
    radial-gradient(circle at 18% 30%, rgba(73,211,182,.10), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 0h28l14 24-14 24H14L0 24z' fill='none' stroke='%2349D3B6' stroke-opacity='.10'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--sea), var(--sea-2));
  color: #EAF4F2; border: 1px solid #1f5560;
  padding: clamp(20px, 4vw, 40px); display: grid; gap: clamp(20px, 3vw, 30px);
  box-shadow: inset 0 0 0 1px rgba(217,164,65,.25), 0 30px 70px -30px rgba(73,211,182,.35);
}
.civ-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; }
.civ-head { display: grid; gap: 10px; max-width: 40rem; }
.civ-kicker { font-family: var(--f-mono); font-size: 12px; color: var(--cteal); }
.realm .civ-title { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: var(--cgold); }
.civ-lead { color: #b7d0cc; }
.civ-turn {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 14px;
  padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(217,164,65,.45);
}
.civ-turn-k { font-family: var(--f-mono); font-size: 11px; color: #b7d0cc; text-transform: uppercase; letter-spacing: .1em; }
.civ-turn b { font-size: 1.8rem; color: #fff; font-variant-numeric: tabular-nums; grid-row: 2; }
.civ-btn {
  grid-row: 1 / 3; grid-column: 2; cursor: pointer; border-radius: 50%; width: 92px; height: 92px;
  font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: .85rem; line-height: 1.15; color: #1b1405;
  background: radial-gradient(circle at 40% 35%, #ffe08a, var(--cgold) 60%, #8a6115);
  border: 3px solid #f6dc9a; box-shadow: 0 0 0 3px #4a3410, 0 10px 24px -6px rgba(217,164,65,.6);
}
.civ-btn:hover { filter: brightness(1.08); }
.civ-btn:active { transform: scale(.96); }

.tech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.tech::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 3px; background: linear-gradient(90deg, var(--cgold), var(--cgold) 80%, rgba(217,164,65,.25)); }
.tn { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 0 4px; min-width: 0; }
.hex {
  width: 70px; height: 70px; display: grid; place-items: center; position: relative;
  font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1.1rem; color: #1b1405;
  background: var(--cgold);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.tn.now .hex { background: var(--cteal); color: #062a27; animation: hexPulse 1.6s ease-in-out infinite; }
@keyframes hexPulse { 50% { filter: brightness(1.25); } }
.tn.flash .hex { animation: hexFlash .6s ease-out; }
@keyframes hexFlash { 0% { transform: scale(1.18); filter: brightness(1.6); } 100% { transform: none; } }
.tn-n { font-weight: 700; font-size: var(--s-sm); line-height: 1.2; }
.tn-y { font-family: var(--f-mono); font-size: 11px; color: #b7d0cc; width: 100%; display: flex; justify-content: center; }
.tn-bar { display: block; width: 80%; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; border: 1px solid rgba(73,211,182,.4); }
.tn-bar i { display: block; height: 100%; background: var(--cteal); transition: width .5s ease-out; }
.civ-quip { font-family: var(--f-mono); font-size: 13px; color: #e8d3a0; min-height: 1.4em; }
@media (max-width: 820px) {
  .tech { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .tech::before { display: none; }
}

/* ---------- GTA VI: Leonida gün batımı ---------- */
.realm-gta {
  background:
    radial-gradient(circle at 50% 84%, #FFD27A 0 7%, rgba(255,160,90,.55) 8% 13%, transparent 30%),
    linear-gradient(180deg, #2B0B4A 0%, #7A1D7A 34%, #E2477F 58%, #FF8E57 76%, #FFC66B 86%, #3a0f3a 86.5%, #2a0a31 100%);
  color: #fff; border: 1px solid #5b1d5a; min-height: 470px;
  box-shadow: 0 30px 70px -30px rgba(255,95,168,.55);
}
.realm-gta::before { /* deniz yansıması */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: repeating-linear-gradient(180deg, rgba(255,198,107,.25) 0 2px, transparent 2px 7px);
}
.gta-palms { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.gta-body { position: relative; padding: clamp(22px, 4vw, 44px); display: grid; gap: 12px; justify-items: center; text-align: center; }
.gta-kicker { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: #ffe1f0; }
.realm .gta-title {
  font-family: var(--f-display); font-weight: 800; font-style: italic;
  font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: .95; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 0 2px #fff, 0 0 18px #FF5FA8, 0 0 42px #FF5FA8;
  font-variation-settings: "wdth" 80;
}
.wanted { display: flex; gap: 6px; font-size: 26px; }
.wanted span { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,.8), 0 2px 0 #000; animation: wanted 1s steps(1) infinite; }
.wanted span:nth-child(even) { animation-delay: .5s; }
@keyframes wanted { 50% { color: #ffd34d; } }
.count { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.count span {
  display: grid; justify-items: center; min-width: 84px; padding: 10px 12px 8px; border-radius: 8px;
  background: rgba(26,11,38,.55); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px);
}
.count b { font-family: var(--f-px); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.count i { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: #ffe1f0; margin-top: 4px; }
.gta-date { font-weight: 700; margin-top: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.gta-note { font-size: var(--s-sm); color: #fff; opacity: .9; max-width: 30rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); margin-bottom: 70px; }

@media (prefers-reduced-motion: reduce) {
  .realm, .ages.run .age, .ages.run .age::after, .tn.now .hex, .wanted span { animation: none; }
}

/* =====================================================================
   YENİ DİYARLAR: Modern Warfare, Assassin's Creed, Mortal Kombat
   ===================================================================== */
:root.g[data-realm="cod"] { --team: #7CFF8A; --mag: #C9B37E; }
:root.g[data-realm="ac"]  { --team: #F2C26B; --mag: #C8352B; }
:root.g[data-realm="mk"]  { --team: #FF3B1F; --mag: #FFB000; }

.em-cod { border-radius: 50%; background: radial-gradient(circle, #7CFF8A 0 2px, transparent 3px), repeating-radial-gradient(circle, transparent 0 5px, rgba(124,255,138,.55) 5px 6px), #0b1a0f; }
.em-cod::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(124,255,138,.6), transparent 25%); }
.em-ac { background: #f4efe6; clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }
.em-ac::after { content: ""; position: absolute; left: 13px; top: 10px; width: 4px; height: 14px; background: #B8322A; }
.em-mk { border-radius: 50%; background: radial-gradient(circle at 50% 50%, #ffb000 0 22%, #a8120c 24% 62%, #3a0505 64%); box-shadow: inset 0 0 0 2px #ffb000; }

/* ---------- MODERN WARFARE: gece görüşü, dosya, radar ---------- */
.realm-cod {
  --nv: #7CFF8A; --nv-2: #3c8f49; --olive: #C9B37E;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.7)),
    linear-gradient(160deg, #0b1a0f, #050c07);
  color: #d9f5dc; border: 1px solid #1f3a24;
  box-shadow: 0 30px 70px -30px rgba(124,255,138,.3);
}
.cod-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(124,255,138,.05) 0 1px, transparent 1px 3px); }
.cod-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, rgba(124,255,138,.08), transparent); animation: scanline 5s linear infinite; }
@keyframes scanline { from { top: -80px; } to { top: 100%; } }
.cod-grid {
  position: relative; padding: clamp(20px, 4vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px);
}
.cod-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--nv); letter-spacing: .1em; }
.rec { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: pulse 1.2s steps(2) infinite; }
.realm .cod-title { font-family: "Black Ops One", var(--f-display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: .03em; color: #eaffea; margin: 10px 0 16px; text-shadow: 0 0 18px rgba(124,255,138,.35); }
.dossier { margin: 0; display: grid; gap: 0; border: 1px solid #24452a; background: rgba(0,0,0,.25); }
.dossier div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-top: 1px dashed #24452a; }
.dossier div:first-child { border-top: 0; }
.dossier dt { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--olive); padding-top: .2em; }
.dossier dd { margin: 0; font-size: var(--s-sm); }
.redact { background: #d9f5dc; color: transparent; border-radius: 1px; cursor: help; transition: background .3s, color .3s; padding: 0 3px; }
.redact:hover, .redact:focus { background: transparent; color: #ff8a8a; outline: none; }
.cod-ok { color: var(--nv); font-family: var(--f-mono); }
.cod-hint { margin-top: 8px; font-family: var(--f-mono); font-size: 11px; color: #7fa585; }

.cod-side { display: grid; justify-items: center; align-content: center; gap: 14px; }
.radar {
  position: relative; width: min(100%, 240px); aspect-ratio: 1; border-radius: 50%;
  background:
    linear-gradient(transparent calc(50% - .5px), rgba(124,255,138,.3) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(124,255,138,.3) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    repeating-radial-gradient(circle, transparent 0 29px, rgba(124,255,138,.28) 29px 30px),
    radial-gradient(circle, #0f2614, #061008);
  box-shadow: 0 0 0 2px #24452a, 0 0 30px rgba(124,255,138,.15) inset;
  overflow: hidden;
}
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(124,255,138,.45), transparent 22%); animation: sweep 3s linear infinite; }
@keyframes sweep { to { transform: rotate(1turn); } }
.blip { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; opacity: 0; transition: opacity .3s; }
.blip::after { content: attr(data-l); position: absolute; left: 12px; top: -4px; font-family: var(--f-mono); font-size: 10px; color: #ffb3b3; }
.radar.uav .blip { opacity: 1; animation: blip 1.5s ease-in-out infinite; }
@keyframes blip { 50% { opacity: .35; } }
.you { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -7px 0 0 -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 12px solid #eaffea; }
.cod-btn {
  cursor: pointer; padding: 8px 16px; border-radius: 3px; color: #061008; font-weight: 700;
  background: var(--nv); border: 0; box-shadow: 0 0 0 1px #0b1a0f, 0 0 0 3px var(--nv-2);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em;
}
.cod-btn:hover { filter: brightness(1.1); }

.loadout { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.loadout li { display: grid; gap: 3px; padding: 12px; background: rgba(124,255,138,.05); border: 1px solid #24452a; border-left: 3px solid var(--olive); min-width: 0; }
.lo-k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; color: var(--olive); }
.lo-n { font-family: "Black Ops One", var(--f-display); font-size: 1.05rem; color: #eaffea; overflow-wrap: anywhere; }
.lo-d { font-size: var(--s-xs); color: #9cc4a1; }
.cod-game, .ac-game {
  grid-column: 1 / -1; position: relative; display: grid; gap: 2px; padding: 16px 18px; min-height: 84px; align-content: end;
  border-radius: 6px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, rgba(5,12,7,.92) 30%, rgba(5,12,7,.25)), var(--bg) center 30% / cover no-repeat, #111;
  border: 1px solid #24452a;
}
.cod-game:hover { border-color: var(--nv); }
.cod-game .gg-y { color: var(--nv); }
@media (max-width: 860px) {
  .cod-grid { grid-template-columns: minmax(0, 1fr); }
  .loadout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ASSASSIN'S CREED REVELATIONS: Animus hafızaları ---------- */
.realm-ac {
  --gold-ac: #F2C26B; --ac-ink: #F6EFE2; --ac-red: #C8352B; --an-blue: #BFE6FF; --night: #0d0a12;
  background: var(--night); color: var(--ac-ink); border: 1px solid #3a2c22;
  box-shadow: 0 30px 80px -30px rgba(242,194,107,.45);
}
.animus { position: relative; aspect-ratio: 16 / 8; min-height: 360px; max-height: 620px; overflow: hidden; isolation: isolate; }
.an-img {
  position: absolute; inset: -4%; background: #1a120c var(--img) center / cover no-repeat;
  transform: translate(var(--px, 0), var(--py, 0)) scale(1.04);
  animation: kenburns 22s ease-in-out infinite alternate;
  transition: filter .3s;
}
@keyframes kenburns { from { background-size: 104%; background-position: 45% 50%; } to { background-size: 116%; background-position: 60% 42%; } }
.animus::after { /* sinematik karartma ve altın pus */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,10,18,.88) 0%, rgba(13,10,18,.45) 38%, transparent 62%),
    linear-gradient(0deg, rgba(13,10,18,.9) 0%, transparent 42%),
    radial-gradient(120% 100% at 70% 20%, rgba(242,194,107,.18), transparent 60%);
}
.an-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.an-hex { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .0; transition: opacity .3s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30' viewBox='0 0 34 30'%3E%3Cpath d='M8.5 1h17L34 15l-8.5 14h-17L0 15z' fill='none' stroke='%23BFE6FF' stroke-opacity='.55'/%3E%3C/svg%3E"); }
.an-glitch { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; grid-template-rows: repeat(5, 1fr); }
.an-glitch i { display: block; background: var(--an-blue); opacity: 0; transform: scaleX(0); transform-origin: left; }

/* Hafıza geçişi (desenkronizasyon) */
.animus.desync .an-img { filter: saturate(0) brightness(1.6) contrast(1.4); }
.animus.desync .an-hex { opacity: .9; }
.animus.desync .an-glitch i { animation: slice .55s steps(4) both; }
.animus.desync .an-glitch i:nth-child(2) { animation-delay: .05s; transform-origin: right; }
.animus.desync .an-glitch i:nth-child(3) { animation-delay: .1s; }
.animus.desync .an-glitch i:nth-child(4) { animation-delay: .03s; transform-origin: right; }
.animus.desync .an-glitch i:nth-child(5) { animation-delay: .08s; }
@keyframes slice { 0% { opacity: .0; transform: scaleX(0); } 40% { opacity: .55; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1) translateX(30%); } }

.an-hud { position: absolute; inset: 0; z-index: 3; padding: clamp(18px, 3.5vw, 36px); display: flex; flex-direction: column; justify-content: space-between; }
.br { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(246,239,226,.75); }
.br-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.br-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.br-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.br-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.an-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.an-tag b, .an-sync b { color: var(--gold-ac); font-weight: 500; }
.an-sync { display: inline-flex; align-items: center; gap: 8px; }
.an-sync-bar { width: 90px; height: 4px; background: rgba(246,239,226,.2); }
.an-sync-bar i { display: block; height: 100%; width: 100%; background: var(--an-blue); box-shadow: 0 0 8px var(--an-blue); transition: width .9s ease-out; }
.an-title { max-width: 34rem; display: grid; gap: 8px; }
.an-kicker { font-family: var(--f-mono); font-size: 12px; color: var(--gold-ac); letter-spacing: .06em; }
.realm .an-h {
  font-family: "Cinzel", Georgia, serif; font-weight: 900; line-height: .95; letter-spacing: .02em;
  font-size: clamp(2.2rem, 6.2vw, 4.8rem); color: var(--ac-ink); text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.realm .an-h span { display: block; font-size: .5em; letter-spacing: .5em; color: var(--gold-ac); margin-top: .25em; }
.an-cap { color: #e6dccb; font-size: var(--s-sm); max-width: 30rem; text-shadow: 0 1px 8px rgba(0,0,0,.8); min-height: 3em; }

/* Hafıza seçici */
.mems { list-style: none; margin: 0; padding: 14px clamp(14px, 3vw, 28px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: #120d18; border-top: 1px solid #2d2230; }
.mem {
  width: 100%; cursor: pointer; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 8px; border-radius: 4px; background: transparent; color: inherit; border: 1px solid #2d2230; transition: border-color .2s, background .2s;
}
.mem img { grid-row: span 2; width: 96px; height: 56px; object-fit: cover; border-radius: 2px; filter: grayscale(.7) brightness(.8); transition: filter .3s; }
.mem-k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #a8998a; align-self: end; }
.mem-n { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: .95rem; align-self: start; }
.mem:hover { border-color: #6a5440; }
.mem.on { border-color: var(--gold-ac); background: rgba(242,194,107,.07); }
.mem.on img, .mem:hover img { filter: none; }
.mem.on .mem-k { color: var(--gold-ac); }

/* Veritabanı */
.codex { padding: clamp(22px, 4vw, 40px); display: grid; gap: 20px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(242,194,107,.10), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4 L34 22 L52 28 L34 34 L28 52 L22 34 L4 28 L22 22 Z' fill='none' stroke='%23F2C26B' stroke-opacity='.07'/%3E%3C/svg%3E"),
    #0f0b14; }
.codex-head { display: grid; gap: 8px; max-width: 44rem; }
.codex-k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--an-blue); }
.realm .codex-h { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(1.6rem, 3.6vw, 2.4rem); color: var(--ac-ink); line-height: 1.05; }
.codex-p { color: #bdb0a0; }
.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.entry {
  position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 16px 16px 18px; min-width: 0;
  background: linear-gradient(180deg, rgba(246,239,226,.05), rgba(246,239,226,.02)); border: 1px solid #2d2230; border-left: 2px solid var(--gold-ac);
}
.entry::after { content: ""; position: absolute; right: 10px; top: 10px; width: 10px; height: 10px; border-top: 1px solid #6a5440; border-right: 1px solid #6a5440; }
.en-y { font-family: var(--f-mono); font-size: 12px; color: var(--gold-ac); font-variant-numeric: tabular-nums; }
.en-n { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 1.1rem; }
.en-d { font-size: var(--s-sm); color: #bdb0a0; }

.ac-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(22px, 4vw, 40px) clamp(22px, 4vw, 36px); background: #0f0b14; }
.realm-ac .ac-game {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; flex: 0 1 420px;
  background: rgba(246,239,226,.04); border: 1px solid #2d2230; border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit;
}
.realm-ac .ac-game:hover { border-color: var(--gold-ac); }
.ac-game img { display: block; width: 120px; height: auto; }
.ac-game > span { display: grid; gap: 2px; padding-right: 10px; min-width: 0; }
.ac-game .gg-y { color: var(--gold-ac); }
.ac-credit { font-family: var(--f-mono); font-size: 11px; color: #8a7d70; }

@media (max-width: 860px) {
  .animus { aspect-ratio: 4 / 3; }
  .mems { grid-template-columns: minmax(0, 1fr); }
  .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .animus { aspect-ratio: 3 / 4; max-height: 560px; }
  .entries { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .an-img { animation: none; } .animus.desync .an-glitch i { animation: none; } }

/* ---------- MORTAL KOMBAT: dövüş ekranı ---------- */
.realm-mk { background: #0b0303; color: #fff; border: 1px solid #4a0d0a; box-shadow: 0 30px 70px -30px rgba(255,59,31,.45); }
.mk-bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,3,3,.55), rgba(11,3,3,.94) 70%), var(--bg) center 25% / cover no-repeat; }
.mk-body { position: relative; padding: clamp(18px, 3.5vw, 36px); display: grid; gap: 18px; }
.hp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.hp-side { display: grid; gap: 6px; min-width: 0; }
.hp-r { text-align: right; }
.hp-n { font-family: var(--f-display); font-weight: 800; font-size: clamp(.95rem, 2vw, 1.2rem); letter-spacing: .06em; text-shadow: 0 2px 0 #000; }
.hp-bar { display: block; height: 18px; border: 2px solid #ffb000; background: #3a0505; transform: skewX(-12deg); overflow: hidden; }
.hp-r .hp-bar { transform: skewX(12deg); direction: rtl; }
.hp-bar i { display: block; height: 100%; background: linear-gradient(#ffe066, #e0a400 60%, #b07800); transition: width .45s cubic-bezier(.3,.8,.3,1); }
.hp-vs { font-size: clamp(1.6rem, 4vw, 2.4rem); color: #ffb000; text-shadow: 0 0 12px rgba(255,59,31,.8), 2px 2px 0 #000; }
.mk-call {
  text-align: center; font-family: var(--f-display); font-weight: 800; font-style: italic;
  font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1; letter-spacing: -.01em;
  color: #ffd166; -webkit-text-stroke: 2px #4a0505;
  text-shadow: 0 0 24px rgba(255,59,31,.75), 4px 4px 0 #000;
  font-variation-settings: "wdth" 78; min-height: 1.1em;
}
.mk-call.hit { animation: hit .35s ease-out; }
@keyframes hit { 0% { transform: scale(1.25) rotate(-2deg); } 100% { transform: none; } }
.mk-call.ko { color: #ff3b1f; -webkit-text-stroke: 2px #1a0000; }
.realm-mk.shake { animation: shake .3s linear; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.combos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.combo {
  width: 100%; height: 100%; cursor: pointer; display: grid; gap: 4px; justify-items: start; text-align: left;
  padding: 12px; border-radius: 4px; color: #fff; background: rgba(40,6,6,.75);
  border: 1px solid #6a1410; box-shadow: inset 0 -3px 0 #4a0d0a;
}
.combo:hover:not(:disabled) { border-color: #ffb000; background: rgba(80,10,8,.85); }
.combo:disabled { opacity: .35; cursor: default; }
.keys { font-family: var(--f-mono); font-size: 12px; color: #ffb000; letter-spacing: .12em; }
.c-n { font-weight: 700; font-size: var(--s-sm); line-height: 1.2; }
.c-d { font-family: var(--f-mono); font-size: 11px; color: #e7a9a0; }
.mk-reset { justify-self: center; cursor: pointer; padding: 10px 22px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #1a0000; background: #ffb000; border: 0; border-radius: 3px; box-shadow: 0 4px 0 #8a5e00; }
.mk-game { justify-self: center; font-family: var(--f-mono); font-size: 12px; color: #e7a9a0; }
@media (max-width: 900px) { .combos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .combos { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .cod-scan::after, .sweep, .radar.uav .blip, .rec, .mk-call.hit, .realm-mk.shake { animation: none; }
  .hp-bar i, .an-sync-bar i { transition: none; }
}

/* =====================================================================
   PLAYSTATION ve MOBİL (Clash of Clans)
   ===================================================================== */
:root.g[data-realm="ps"]  { --team: #4DA3FF; --mag: #0070D1; }
:root.g[data-realm="coc"] { --team: #FFC83D; --mag: #3FBF9F; }
.em-ps { border-radius: 8px; background: linear-gradient(145deg, #1f7ae6, #00439c); }
.em-ps svg, .em-coc svg { width: 24px; height: 24px; }
.em-coc { border-radius: 8px; background: linear-gradient(145deg, #2b3a4a, #121a24); }
.th { display: flex; align-items: center; gap: 12px; }
.th > span:last-child { display: grid; }
.th em { font-style: normal; font-size: 12px; }
.th b { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.15rem; }
.th-ic { width: 40px; height: 40px; flex: none; background:
  linear-gradient(#ffd75a, #c58a12) 50% 0 / 60% 30% no-repeat,
  linear-gradient(#3b6fd8, #1d3f8a) 50% 100% / 100% 72% no-repeat;
  clip-path: polygon(20% 0, 35% 0, 35% 12%, 45% 12%, 45% 0, 55% 0, 55% 12%, 65% 12%, 65% 0, 80% 0, 80% 28%, 100% 28%, 100% 100%, 0 100%, 0 28%, 20% 28%); }

/* ---------- PLAYSTATION: PS5 ana ekranı ---------- */
.realm-ps {
  --psb: #0070D1; --psb-2: #4DA3FF; --plat: #cfe3f5; --gold-t: #e9b949; --silv: #c4ccd6; --bron: #c27a4e;
  background: radial-gradient(120% 90% at 80% 0%, #0b3a8a, #00102e 55%, #000814);
  color: #fff; border: 1px solid #10306a; box-shadow: 0 30px 80px -30px rgba(77,163,255,.45);
}
.ps-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ps-shapes i { position: absolute; width: 46px; height: 46px; opacity: .10; animation: drift 22s linear infinite; }
.ps-shapes i:nth-child(1) { left: 6%; top: 70%; } .ps-shapes i:nth-child(2) { left: 24%; top: 90%; animation-delay: -6s; }
.ps-shapes i:nth-child(3) { left: 46%; top: 80%; animation-delay: -12s; } .ps-shapes i:nth-child(4) { left: 64%; top: 95%; animation-delay: -3s; }
.ps-shapes i:nth-child(5) { left: 80%; top: 75%; animation-delay: -15s; } .ps-shapes i:nth-child(6) { left: 92%; top: 88%; animation-delay: -9s; }
.ps-shapes i:nth-child(7) { left: 14%; top: 98%; animation-delay: -18s; } .ps-shapes i:nth-child(8) { left: 56%; top: 60%; animation-delay: -20s; }
@keyframes drift { from { transform: translateY(0) rotate(0); } to { transform: translateY(-700px) rotate(200deg); } }
.ps-shapes i { background: center / contain no-repeat; }
.s-tri { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M23 5 L42 39 L4 39 Z' fill='none' stroke='white' stroke-width='3.5'/%3E%3C/svg%3E"); }
.s-cir { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='23' r='17' fill='none' stroke='white' stroke-width='3.5'/%3E%3C/svg%3E"); }
.s-sq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Crect x='7' y='7' width='32' height='32' fill='none' stroke='white' stroke-width='3.5'/%3E%3C/svg%3E"); }
.s-x { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M8 8 L38 38 M38 8 L8 38' stroke='white' stroke-width='3.5'/%3E%3C/svg%3E"); }

.ps-stage {
  position: relative; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  padding: clamp(18px, 3.5vw, 34px);
  background: linear-gradient(90deg, rgba(0,8,20,.92) 0%, rgba(0,8,20,.55) 45%, rgba(0,8,20,.1) 75%), linear-gradient(0deg, rgba(0,8,20,.95), transparent 45%), var(--bg) center 25% / cover no-repeat;
  transition: background-image .4s;
}
.ps-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.ps-id { display: flex; align-items: center; gap: 12px; }
.ps-id b { display: block; font-size: 1rem; }
.ps-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--psb-2), #1d2a6b); box-shadow: 0 0 0 2px #fff; }
.ps-on { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 12px; color: #b9d4f3; }
.plus { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: #f5c400; color: #3a2a00; font-style: normal; font-weight: 900; font-size: 13px; line-height: 1; }
.ps-lvl { position: relative; display: grid; grid-template-columns: 52px auto; align-items: center; gap: 10px; }
.ps-lvl svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.ring { fill: none; stroke: var(--psb-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset 1.2s ease-out; }
.realm-ps:not([hidden]) .ring { stroke-dashoffset: 29.85; }
.ps-lvl-n { position: absolute; left: 0; width: 52px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.ps-lvl-k { font-size: var(--s-xs); color: #b9d4f3; }

.ps-game { display: grid; gap: 10px; max-width: 34rem; }
.ps-k { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--plat); text-transform: uppercase; }
.realm .ps-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.ps-tro, .ps-sum-row { display: flex; flex-wrap: wrap; gap: 14px; }
.t { display: inline-flex; align-items: center; gap: 6px; }
.t i { width: 16px; height: 18px; display: inline-block; clip-path: polygon(10% 0, 90% 0, 86% 30%, 62% 58%, 62% 74%, 80% 74%, 80% 100%, 20% 100%, 20% 74%, 38% 74%, 38% 58%, 14% 30%); }
.t-p i { background: linear-gradient(135deg, #f4fbff, #7fb6e8 60%, #e8f3ff); }
.t-g i { background: linear-gradient(135deg, #ffe48a, #c58a12); }
.t-s i { background: linear-gradient(135deg, #f2f5f8, #8d98a6); }
.t-b i { background: linear-gradient(135deg, #f0b28a, #8c4a24); }
.t b { font-variant-numeric: tabular-nums; }
.ps-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; max-width: 26rem; }
.ps-bar { height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; }
.ps-bar i { display: block; height: 100%; background: var(--psb-2); transition: width .6s ease-out; }
.ps-prog b { font-variant-numeric: tabular-nums; }

.ps-rail { list-style: none; margin: 0; padding: 14px clamp(14px, 3vw, 30px) 18px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: thin; position: relative; }
.tile {
  position: relative; flex: none; width: 112px; aspect-ratio: 1; cursor: pointer; border-radius: 10px; overflow: hidden; padding: 0;
  background: #0a1a3a var(--img) center 20% / cover no-repeat; border: 0; color: #fff;
  box-shadow: 0 6px 16px -6px #000; transition: transform .2s, box-shadow .2s;
}
.tile:hover { transform: translateY(-3px); }
.tile.on { transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 10px 24px -6px rgba(77,163,255,.7); }
.tile-n { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; font-size: 11px; font-weight: 700; text-align: left; line-height: 1.15; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.tile-plat { position: absolute; right: 6px; top: 6px; width: 18px; height: 20px; background: linear-gradient(135deg, #f4fbff, #7fb6e8 60%, #e8f3ff); clip-path: polygon(10% 0, 90% 0, 86% 30%, 62% 58%, 62% 74%, 80% 74%, 80% 100%, 20% 100%, 20% 74%, 38% 74%, 38% 58%, 14% 30%); filter: drop-shadow(0 0 4px #9fd0ff); }
.tile-fc { background: linear-gradient(160deg, #1c7a3a, #0b3b20 60%, #042014); }
.fc-mark { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 18px; font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: 1.6rem; color: #c7ff6a; }

.ps-sum { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 16px clamp(18px, 3.5vw, 34px) 24px; border-top: 1px solid rgba(255,255,255,.08); }
.ps-sum-t { display: grid; }
.ps-sum-t b { font-size: 2rem; line-height: 1; font-weight: 800; }
.ps-sum-t span { font-size: var(--s-xs); color: #b9d4f3; }
.ps-sum-row .t { gap: 8px; }
.ps-sum-row .t i { width: 22px; height: 25px; }
.ps-sum-row em { font-style: normal; font-size: var(--s-xs); color: #b9d4f3; }
.ps-note { flex: 1 1 260px; font-size: var(--s-sm); color: #cfe0f3; }

/* ---------- CLASH OF CLANS: batık tapınak köyü ---------- */
.realm-coc {
  --cg: #FFC83D; --ce: #D03CF0; --cd: #3a2a4a; --cgem: #6CE23C; --wood: #8a5a2c; --panel: #c9d6e6; --panel-2: #aebfd4; --ink-c: #2a3242;
  background: #071c17; color: #fff; border: 1px solid #1f4a3e;
  box-shadow: 0 30px 80px -30px rgba(255,200,61,.35);
}
.coc-village { position: relative; width: 100%; height: clamp(320px, 50vw, 600px); background: #0a2a22 var(--img) center 40% / cover no-repeat; overflow: hidden; }
.coc-village::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4,20,15,.75)); }
.coc-hud { position: absolute; inset: 10px 12px auto; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.realm-coc, .realm-coc button { font-family: "Lilita One", var(--f-display); }
.coc-xp { display: flex; align-items: center; gap: 8px; }
.xp-star {
  display: grid; place-items: center; width: 46px; height: 46px; font-size: 1.05rem; color: #fff; -webkit-text-stroke: 1px #0b2c5c;
  background: linear-gradient(#5fc0ff, #1d63c9); clip-path: polygon(50% 0, 61% 18%, 82% 10%, 82% 32%, 100% 42%, 86% 58%, 94% 80%, 72% 82%, 62% 100%, 50% 88%, 38% 100%, 28% 82%, 6% 80%, 14% 58%, 0 42%, 18% 32%, 18% 10%, 39% 18%);
}
.xp-star.big { width: 66px; height: 66px; font-size: 1.4rem; }
.xp-n { display: grid; gap: 3px; font-size: 14px; text-shadow: 0 1px 0 #000; }
.xp-bar { display: block; width: 110px; height: 9px; border-radius: 4px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.xp-bar i { display: block; width: 72%; height: 100%; background: linear-gradient(#7ee0ff, #2a9be0); }
.coc-res { display: grid; gap: 6px; justify-items: end; }
.cr { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 12px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 15px; text-shadow: 0 1px 0 #000; min-width: 128px; justify-content: flex-end; }
.cr b { font-weight: 400; font-variant-numeric: tabular-nums; }
.cr i { width: 22px; height: 22px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.cr-gold i { background: radial-gradient(circle at 35% 30%, #fff3a8, #f2b90f 55%, #b37a00); }
.cr-elx i { background: radial-gradient(circle at 35% 30%, #ffc6ff, #d03cf0 55%, #7a1595); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.cr-dark i { background: radial-gradient(circle at 35% 30%, #8a7a9a, #2a1f36 60%, #0d0814); }
.cr-gem i { background: linear-gradient(135deg, #c9ff9a, #4cc01e 55%, #2a7a0a); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); border-radius: 0; }
.cr.pop b { animation: crPop .4s ease-out; }
@keyframes crPop { 40% { transform: scale(1.25); color: #fff36b; } }

.bub {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 34px; height: 40px; margin: -20px 0 0 -17px; cursor: pointer;
  border: 2px solid #fff; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; padding: 0;
  background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.5); animation: bob 1.6s ease-in-out infinite;
}
.bub::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; }
.b-gold::before { background: radial-gradient(circle at 35% 30%, #fff3a8, #f2b90f 55%, #b37a00); }
.b-elx::before { background: radial-gradient(circle at 35% 30%, #ffc6ff, #d03cf0 55%, #7a1595); }
.b-dark::before { background: radial-gradient(circle at 35% 30%, #8a7a9a, #2a1f36 60%, #0d0814); }
.bub:nth-of-type(2n) { animation-delay: -.6s; }
.bub.got { animation: got .45s ease-in forwards; pointer-events: none; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes got { to { transform: translateY(-40px) scale(.4); opacity: 0; } }
.plusf { position: absolute; z-index: 3; pointer-events: none; font-family: "Lilita One", sans-serif; font-size: 18px; color: #fff36b; text-shadow: 0 2px 0 #000; animation: plusf .9s ease-out forwards; }
@keyframes plusf { to { transform: translateY(-46px); opacity: 0; } }
.coc-builders { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,.55); font-family: "Lilita One", sans-serif; font-size: 14px; }
.coc-attack {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; cursor: pointer; padding: 12px 22px 14px; border-radius: 10px;
  font-size: 1.35rem; color: #fff; -webkit-text-stroke: 1px #5a2a00; text-shadow: 0 2px 0 #5a2a00;
  background: linear-gradient(#ffb347, #e8741a); border: 3px solid #5a2a00; box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 #5a2a00;
}
.coc-attack:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 2px 0 #5a2a00; }
.coc-clouds { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; overflow: hidden; background: rgba(210,225,240,.35); }
.cloud { position: absolute; width: 70%; height: 60%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 0 40%, #e6eef7 60%, transparent 70%); animation: cloud 1.4s ease-out both; }
.c1 { left: -20%; top: -10%; } .c2 { right: -20%; top: 20%; animation-delay: .1s; } .c3 { left: 10%; bottom: -20%; animation-delay: .2s; }
@keyframes cloud { from { transform: scale(.4); opacity: 0; } to { transform: scale(1.2); opacity: 1; } }
.coc-search { position: relative; font-family: "Lilita One", sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); color: #2a3242; animation: pulse 1s steps(2) infinite; }
.coc-result { position: relative; display: grid; justify-items: center; gap: 6px; }
.stars { display: flex; gap: 6px; font-size: clamp(3rem, 8vw, 5rem); line-height: 1; }
.stars span { color: #ffd84a; -webkit-text-stroke: 3px #8a5a00; text-shadow: 0 6px 0 #8a5a00; animation: star .45s cubic-bezier(.2,1.6,.4,1) both; }
.stars span:nth-child(2) { animation-delay: .35s; font-size: 1.25em; margin-top: -.2em; } .stars span:nth-child(3) { animation-delay: .7s; }
@keyframes star { from { transform: scale(3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.coc-pct { font-family: "Lilita One", sans-serif; font-size: 2rem; color: #fff; -webkit-text-stroke: 1px #2a3242; }
.coc-win { font-family: "Lilita One", sans-serif; font-size: 1.6rem; color: #ffd84a; -webkit-text-stroke: 1px #6a3a00; }

.coc-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 12px; padding: clamp(14px, 3vw, 24px); background: #0b241e; }
.cp { background: linear-gradient(var(--panel), var(--panel-2)); color: var(--ink-c); border-radius: 10px; padding: 14px; border: 2px solid #8094ad; box-shadow: inset 0 2px 0 rgba(255,255,255,.6); display: grid; gap: 12px; align-content: start; min-width: 0; }
.realm .cp-h { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.15rem; color: #fff; -webkit-text-stroke: 1px #2a3242; text-shadow: 0 2px 0 #2a3242; }
.me-row { display: flex; align-items: center; gap: 12px; }
.me-n { display: block; font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.4rem; color: #fff; -webkit-text-stroke: 1px #2a3242; }
.me-tag { display: block; font-family: var(--f-mono); font-size: 12px; }
.me-role { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 4px; background: #2a3242; color: #ffd84a; font-family: "Lilita One", sans-serif; font-size: 13px; }
.clan { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; background: rgba(42,50,66,.12); }
.clan > div { display: grid; gap: 1px; font-size: 13px; }
.clan b { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.1rem; }
.ws { color: #6a4a00; }
.clan-badge { width: 48px; height: 54px; flex: none; display: grid; place-items: center; background: linear-gradient(#7b3fc4, #3a1a6a); clip-path: polygon(50% 0, 100% 15%, 92% 70%, 50% 100%, 8% 70%, 0 15%); }
.clan-badge b { font-size: 1rem; color: #fff; }
.lg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg li { display: flex; align-items: center; gap: 10px; }
.lg li > span:last-child { display: grid; }
.lg em { font-style: normal; font-size: 12px; }
.lg b { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.15rem; }
.lg-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: end; padding: 0 2px 2px 0; font-family: "Lilita One", sans-serif; font-size: 14px; color: #fff; -webkit-text-stroke: 1px #2a1a4a; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lg-30 { background: linear-gradient(#b06cff, #4b1c94); }
.lg-31 { background: linear-gradient(#7fe0ff, #1d6fb4); }
.lg-tr { background: linear-gradient(#ffe27a, #c58a12); clip-path: polygon(10% 0, 90% 0, 86% 30%, 62% 58%, 62% 74%, 80% 74%, 80% 100%, 20% 100%, 20% 74%, 38% 74%, 38% 58%, 14% 30%); }
.heroes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.h { position: relative; display: grid; align-content: end; min-height: 74px; padding: 8px; border-radius: 8px; color: #fff; border: 2px solid rgba(0,0,0,.25); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); overflow: hidden; }
.h::before { content: ""; position: absolute; right: -8px; top: -8px; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.14); }
.h-l { position: absolute; left: 6px; top: 6px; padding: 0 6px; border-radius: 4px; background: rgba(0,0,0,.45); font-family: "Lilita One", sans-serif; font-size: 14px; }
.h-n { position: relative; font-family: "Lilita One", sans-serif; font-size: 13px; line-height: 1.1; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.h-bk { background: linear-gradient(135deg, #e0a03a, #8a4a12); }
.h-aq { background: linear-gradient(135deg, #b25bd9, #5a1f84); }
.h-mp { background: linear-gradient(135deg, #4f7ad9, #1f2f6a); }
.h-gw { background: linear-gradient(135deg, #7a5ad9, #2e1c6a); }
.h-rc { background: linear-gradient(135deg, #e0507a, #7a1a3a); }
.h-dd { background: linear-gradient(135deg, #e04a3a, #6a120c); }
.coc-note { font-size: 13px; color: #3a4456; font-family: var(--f-body); }
@media (max-width: 960px) { .coc-board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cp-heroes { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .coc-board { grid-template-columns: minmax(0, 1fr); }
  .coc-village { height: min(125vw, 520px); }
  .cr { min-width: 0; font-size: 12px; } .cr i { width: 16px; height: 16px; }
  .xp-bar { width: 70px; }
  .tile { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-shapes i, .bub, .cloud, .stars span, .coc-search { animation: none; }
  .ring, .ps-bar i { transition: none; }
}