/* Hero'daki süzülen öğeler + hafıza oyunu. Harici kaynak yok; renkler style.css'teki tema değişkenlerinden gelir. */

/* ---------- Akvaryumda yüzer gibi süzülen öğeler ---------- */
.swimmer {
  position: absolute; z-index: 3; width: 110px; padding: 6px 0; display: grid; justify-items: center; gap: 8px;
  border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  animation: swimIn .9s .5s both, swim 6.5s ease-in-out infinite;
}
.swimmer:hover, .swimmer:focus-visible { animation-play-state: running, paused; }
.swimmer .sprite { display: block; transition: transform .25s, filter .25s; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .38)); }
.swimmer:hover .sprite, .swimmer:focus-visible .sprite { transform: scale(1.1) rotate(-2deg); }
.swimmer .tag {
  padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18); transition: border-color .2s, background .2s;
}
.swimmer:hover .tag, .swimmer:focus-visible .tag { border-color: var(--accent); background: var(--surface-2); }
/* Aktif (tıklanabilir, çalışan) projeler: hafif yeşil baloncuk + "canlı" nokta */
.swimmer .tag { background: color-mix(in srgb, var(--ok) 17%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.swimmer .tag::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 7px; animation: pulse 1.8s ease-out infinite; }
.swimmer:hover .tag, .swimmer:focus-visible .tag { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 28%, var(--surface-2)); }
.swimmer .sprite.pix { image-rendering: pixelated; }

/* Henüz aktif olmayan projeler: kırmızı, kesikli çizgili baloncuk (tıklanmaz) */
:root { --soon: #f87171; }
[data-theme='light'] { --soon: #dc2626; }
.soon-bubble {
  position: absolute; z-index: 2; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: default;
  color: var(--text); background: color-mix(in srgb, var(--soon) 15%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--soon) 65%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  animation: float 8s ease-in-out infinite;
}
.soon-bubble::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--soon); margin-right: 7px; }
.soon-bubble:nth-child(2) { animation-delay: -2.7s; }
.soon-bubble:nth-child(3) { animation-delay: -5.1s; }
/* Rastgele seçilen boş noktalar (geniş ekran) */
.soon-bubble.s-a { left: 31%; top: 13%; }
.soon-bubble.s-b { right: 30%; top: 12%; }
.soon-bubble.s-c { left: 8%; top: 50%; }
.soon-bubble.s-d { right: 7%; top: 56%; }
.soon-bubble.s-e { left: 28%; bottom: 5%; }
.soon-bubble.s-f { right: 29%; bottom: 4%; }
/* Daha dar ekranlar: üst menünün hemen altında ortalı bir sıra */
@media (max-width: 1399px) {
  .hero { padding-top: calc(var(--nav-h) + 62px); }
  .soon-row { position: absolute; z-index: 2; top: calc(var(--nav-h) + 4px); left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; padding: 0 12px; pointer-events: none; }
  .soon-bubble { position: static; font-size: 12px; padding: 4px 11px; animation: none; }
}
.zn .sprite { border-radius: 20px; filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--accent) 55%, transparent)); }
.gm { animation-duration: .9s, 7.8s; animation-delay: .7s, -2.4s; }
/* Konumlar hero metninin ortasına göre sabit uzaklıkta: geniş ekranda metinle çakışmaz */
.zn { left: max(12px, calc(50% - 638px)); top: 24%; }
.gm { left: min(calc(50% + 412px), calc(100% - 122px)); top: 30%; }
@keyframes swimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes swim {
  0%, 100% { transform: translate(0, 0) rotate(-1.5deg); }
  25% { transform: translate(5px, -9px) rotate(1deg); }
  50% { transform: translate(0, -15px) rotate(2deg); }
  75% { transform: translate(-5px, -6px) rotate(-1deg); }
}
/* Dar ekranlar: metinle çakışmasın diye iki köşeye, alt banda inerler */
@media (max-width: 1043px) {
  .hero { padding-bottom: 160px; }
  .swimmer { width: 96px; top: auto; bottom: 22px; }
  .zn { left: 14px; }
  .gm { left: auto; right: 14px; }
  .zn .sprite { width: 56px; height: 56px; }
  .gm .sprite { width: 52px; height: 78px; }
}

/* ---------- Oyun sahnesi: sağdan kayarak gelir ---------- */
body.game-open { overflow: hidden; }
main, .footer { transition: transform .65s cubic-bezier(.7, 0, .2, 1), opacity .65s; }
body.game-open main, body.game-open .footer { transform: translateX(-24vw); opacity: 0; }

.arcade {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; isolation: isolate; overscroll-behavior: contain;
  background: var(--bg); color: var(--text);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transform: translateX(100%); visibility: hidden;
  transition: transform .65s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .65s;
}
.arcade.open { transform: none; visibility: visible; transition: transform .65s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.arcade::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% -8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(50vw 50vh at 100% 105%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%);
}
.g-bar-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px max(16px, 3vw); }
.g-bar-top h2 { font-size: clamp(18px, 3vw, 24px); letter-spacing: -0.02em; font-weight: 800; }
.g-icon {
  height: 40px; min-width: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s, transform .2s;
}
.g-icon:hover { background: var(--surface-2); transform: translateY(-2px); }
.g-bar-top .g-icon:first-child { justify-self: start; }
.g-bar-top .g-icon:last-child { justify-self: end; padding: 0; width: 40px; font-size: 20px; }

.g-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; width: min(560px, 100% - 32px); margin: 0 auto; }
.g-stat { display: grid; gap: 0; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; line-height: 1.25; }
.g-stat small { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.g-stat b { font-size: 19px; font-variant-numeric: tabular-nums; }
.g-timebar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.g-timebar i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(1); transition: transform .12s linear; }
.g-timebar.low i { background: #f87171; }
.g-stat.low b { color: #f87171; }
.g-pop { position: absolute; right: 6px; top: -4px; font-size: 13px; white-space: nowrap; font-weight: 800; color: var(--ok); pointer-events: none; animation: gpop .9s ease-out forwards; }
@keyframes gpop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }
.g-stat { position: relative; }

.g-arena { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; padding: 10px 12px 18px; }
.g-board { display: grid; gap: 10px; justify-content: center; }

/* Kartlar */
.mc { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px; -webkit-tap-highlight-color: transparent; }
.mc-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3, .7, .3, 1); }
.mc.up .mc-in { transform: rotateY(180deg); }
.mc-b, .mc-f { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mc-b {
  color: rgba(255, 255, 255, .85); font-weight: 800; font-size: calc(var(--cell) * .42);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, var(--accent), var(--accent-3));
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  transition: transform .2s, filter .2s;
}
.mc:not(.up):hover .mc-b { transform: translateY(-3px); filter: brightness(1.12); }
.mc-f { transform: rotateY(180deg); font-size: calc(var(--cell) * .5); background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); }
[data-theme='light'] .mc-f { background: #fff; }
.mc.matched .mc-f { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 55%, transparent), 0 0 22px color-mix(in srgb, var(--ok) 45%, transparent); animation: gmatch .5s ease-out; }
@keyframes gmatch { 0% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
.mc.wrong .mc-f { border-color: #f87171; }
.mc.miss .mc-f { opacity: .55; }
.mc:disabled { cursor: default; }

/* Başlangıç / duraklatma / seviye sonu / bitiş penceresi */
.g-overlay { position: absolute; inset: 0; z-index: 5; display: grid; overflow: auto; padding: 16px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.g-overlay[hidden] { display: none; }
.g-panel { width: min(420px, 100%); margin: auto; text-align: center; padding: 30px 26px 26px; border-radius: 26px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow); animation: gpanel .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes gpanel { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.g-panel h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; }
.g-panel p { margin-top: 12px; color: var(--muted); font-size: 16px; white-space: pre-line; }
.g-panel p b { color: var(--text); }
.g-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.g-actions:empty { display: none; }
.g-panel.wide { width: min(500px, 100%); }

/* Ad formu */
.g-form { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.g-form[hidden], .g-list[hidden], .g-panel [hidden] { display: none; }
.g-form label { font-weight: 700; font-size: 15px; }
.g-form label small { color: var(--muted); font-weight: 500; }
.g-form-row { display: flex; gap: 8px; }
.g-form input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.g-form input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.g-form .btn { padding: 12px 22px; }
.g-form .btn:disabled { opacity: .6; cursor: default; transform: none; }
.g-fine { margin: 0 !important; font-size: 12.5px !important; text-align: center; }
.g-msg { min-height: 1.4em; margin-top: 8px !important; font-size: 14.5px !important; color: #f87171 !important; }
.g-msg:empty { min-height: 0; margin: 0 !important; }

/* Liderlik tablosu */
.g-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; max-height: min(46vh, 360px); overflow: auto; }
.g-list li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.g-list li.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.g-list li.gap { display: block; text-align: center; color: var(--muted); border: 0; background: none; padding: 0; }
.g-list .r { text-align: center; font-weight: 800; color: var(--muted); }
.g-list .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-list .s { font-weight: 800; }
.g-list .l { color: var(--muted); font-size: 13px; min-width: 52px; text-align: right; }

@media (max-width: 520px) {
  .g-hud { gap: 6px; }
  .g-stat { padding: 6px 4px; border-radius: 12px; }
  .g-stat b { font-size: 17px; }
  .g-stat small { font-size: 10.5px; letter-spacing: .03em; }
  .g-board { gap: 8px; }
}
/* Alçak ekranlar (yatay telefon, küçük pencere): üst çubuk ve pencereler sıkışır */
@media (max-height: 560px) {
  .g-bar-top { padding-top: 8px; padding-bottom: 6px; }
  .g-icon { height: 34px; }
  .g-bar-top .g-icon:last-child { width: 34px; }
  .g-stat { padding: 3px 8px; }
  .g-stat b { font-size: 16px; }
  .g-arena { padding-top: 6px; padding-bottom: 10px; }
  .g-panel { padding: 18px 20px 18px; }
  .g-panel h3 { font-size: 21px; }
  .g-panel p { margin-top: 8px; font-size: 14.5px; }
  .g-actions { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  main, .footer, .arcade { transition: none !important; }
  body.game-open main, body.game-open .footer { transform: none; }
}

/* ---------- Proje kartı görselleri (saf CSS) ---------- */
button.card-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.mock-game { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 30%, transparent), color-mix(in srgb, var(--ok) 20%, transparent)); }
.mg-grid { display: grid; grid-template-columns: repeat(4, 54px); gap: 10px; transform: translateZ(30px) rotate(-3deg); transition: transform .4s; }
.card:hover .mg-grid { transform: translateZ(40px) rotate(0deg) scale(1.05); }
.mg { position: relative; display: grid; place-items: center; height: 54px; border-radius: 14px; font-size: 26px; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 5px, transparent 5px 10px), linear-gradient(135deg, var(--accent), var(--accent-3)); }
.mg::after { content: '?'; position: absolute; color: rgba(255, 255, 255, .85); font-weight: 800; font-size: 22px; }
.mg i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; border-radius: 13px; background: var(--surface-2); opacity: 0; z-index: 1; animation: mgshow 6s ease-in-out infinite; }
[data-theme='light'] .mg i { background: #fff; }
.mg:nth-child(2) i { animation-delay: .5s; } .mg:nth-child(3) i { animation-delay: 1s; } .mg:nth-child(4) i { animation-delay: 1.5s; }
.mg:nth-child(5) i { animation-delay: 2s; } .mg:nth-child(6) i { animation-delay: 2.5s; } .mg:nth-child(7) i { animation-delay: 3s; } .mg:nth-child(8) i { animation-delay: 3.5s; }
@keyframes mgshow { 0%, 12% { opacity: 0; } 18%, 34% { opacity: 1; } 42%, 100% { opacity: 0; } }

.mock-cards { background: linear-gradient(135deg, color-mix(in srgb, var(--soon) 26%, transparent), color-mix(in srgb, var(--accent) 22%, transparent)); }
.fan { position: relative; width: 170px; height: 120px; transform: translateZ(30px); transition: transform .4s; }
.card:hover .fan { transform: translateZ(40px) scale(1.05); }
.pc { position: absolute; bottom: 0; left: 50%; width: 66px; height: 96px; margin-left: -33px; padding: 8px 9px; border-radius: 10px; background: #fbfbfb; color: #1d1b34; font-weight: 800; font-size: 22px; line-height: 1; box-shadow: 0 10px 22px rgba(0, 0, 0, .3); transform-origin: 50% 130%; }
.pc b { display: block; font-size: 20px; }
.pc.red { color: #dc2626; }
.pc.p1 { transform: rotate(-22deg); } .pc.p2 { transform: rotate(0deg) translateY(-6px); } .pc.p3 { transform: rotate(22deg); }
.card:hover .pc.p1 { transform: rotate(-30deg); } .card:hover .pc.p3 { transform: rotate(30deg); }
.pc { transition: transform .35s; }

/* Yayına girmiş projenin baloncuğu (yeşil, tıklanabilir): yakında baloncuklarıyla aynı rastgele noktalara yerleşir */
.soon-bubble.live { cursor: pointer; text-decoration: none; background: color-mix(in srgb, var(--ok) 17%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); transition: border-color .2s, background .2s, transform .2s; }
.soon-bubble.live::before { background: var(--ok); animation: pulse 1.8s ease-out infinite; }
.soon-bubble.live:hover, .soon-bubble.live:focus-visible { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 28%, var(--surface-2)); }
@media (max-width: 1399px) { .soon-bubble.live { pointer-events: auto; } }