/* ============================================================
   🌌 COSMIC ARCADE — okulwork oyun. portalı (Stitch tasarımı)
   tokens.css + styles.css + pages.css'ten sonra yüklenir.
   ============================================================ */
html { color-scheme: dark; }
body {
  background: #0b1326;
  background-image:
    radial-gradient(ellipse 60% 40% at 85% -5%, rgba(139, 92, 246, .22), transparent 70%),
    radial-gradient(ellipse 50% 35% at 0% 30%, rgba(6, 182, 212, .12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 85%, rgba(244, 63, 94, .08), transparent 70%);
  background-attachment: fixed;
  color: #dae2fd;
  font-family: var(--font);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 38% 72%, #cbd5ff, transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 24%, #fff, transparent 60%), radial-gradient(1px 1px at 88% 62%, #a5f3fc, transparent 60%),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 22% 88%, #ddd6fe, transparent 60%),
    radial-gradient(1px 1px at 92% 8%, #fff, transparent 60%), radial-gradient(1px 1px at 5% 55%, #fff, transparent 60%);
}
main, header, footer { position: relative; z-index: 1; }
h1, h2, h3, h4 { font-weight: 800; color: #f8fafc; letter-spacing: -.02em; }
::selection { background: #8b5cf6; color: #fff; }

/* ---- üst bar ---- */
.topbar { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.brand, .footer-brand { color: #f8fafc !important; }
.brand-game, .footer-brand span { color: #d0bcff !important; }
.desktop-nav { background: rgba(23,31,51,.75); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 5px; gap: 4px !important; }
.nav-link { color: #cbc3d7 !important; padding: 10px 18px !important; border-radius: 999px; font-size: 13px !important; font-weight: 600 !important; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.nav-link.active { background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: #fff !important; box-shadow: 0 0 18px rgba(139,92,246,.45); }
.nav-link.active:after { display: none; }
.header-cta { background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 12px 20px !important; font-size: 12.5px !important; font-weight: 700 !important; box-shadow: 0 4px 0 #5b21b6, 0 10px 22px -6px rgba(139,92,246,.55); }

/* ---- düğmeler ---- */
.button { border-radius: 999px !important; font-weight: 700 !important; }
.button-primary { background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important; color: #f8fafc !important; box-shadow: 0 4px 0 #5b21b6, 0 10px 24px -6px rgba(139,92,246,.6) !important; }
.button-primary:hover { filter: brightness(1.08); }
.button-primary:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #5b21b6 !important; }
.surprise-button { color: #4cd7f6 !important; border: 1.5px solid rgba(6,182,212,.55) !important; border-radius: 999px !important; padding: 12px 18px !important; background: rgba(15,23,42,.6) !important; font-size: 12.5px !important; font-weight: 700 !important; }
.surprise-button svg { color: #4cd7f6 !important; }
.surprise-button:hover { box-shadow: 0 0 16px rgba(6,182,212,.35); background: rgba(6,182,212,.1) !important; }
.title-highlight { background: linear-gradient(90deg, #d0bcff, #4cd7f6, #ff718a); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.eyebrow, .section-eyebrow { color: #4cd7f6 !important; letter-spacing: .14em; font-weight: 800; }
.eyebrow { border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 14px; background: rgba(23,31,51,.6); }

/* ---- neon karakterler ---- */
.character { box-shadow: inset -13px -9px 0 rgba(0,0,0,.14), 0 0 50px -8px rgba(139,92,246,.5) !important; }
.character.purple { background: linear-gradient(165deg, #b39dff, #8b5cf6) !important; }
.character.blue { background: linear-gradient(165deg, #67e8f9, #06b6d4) !important; box-shadow: inset -13px -9px 0 rgba(0,0,0,.12), 0 0 50px -8px rgba(6,182,212,.5) !important; }
.character.yellow { background: radial-gradient(circle at 35% 30%, #fef08a, #facc15 60%) !important; box-shadow: inset -13px -9px 0 rgba(0,0,0,.1), 0 0 50px -8px rgba(250,204,21,.5) !important; }
.character.green { background: linear-gradient(165deg, #99f6e4, #2dd4bf) !important; box-shadow: inset -13px -9px 0 rgba(0,0,0,.1), 0 0 50px -8px rgba(45,212,191,.5) !important; }
.character .eyes > i, .mascot-eyes i, .green .eyes > i { background: #0b1326 !important; }
.character .eyes b { background: #fff !important; }
.character .mouth, .mascot-mouth { border-color: #0b1326 !important; }
.character .cheek { background: #ff718a !important; opacity: .55; }
.world-halo { background: radial-gradient(circle, rgba(139,92,246,.3), transparent 65%) !important; }
.world-floor { background: radial-gradient(ellipse, rgba(139,92,246,.35), transparent 70%) !important; }
.floating-label { background: rgba(23,31,51,.85) !important; color: #e2e8f0 !important; border: 1px solid rgba(208,188,255,.3) !important; border-radius: 999px !important; }
.label-dot { background: #4cd7f6 !important; box-shadow: 0 0 10px #4cd7f6; }
.mini-friend { color: #0b1326 !important; border-color: #0b1326 !important; }
.mini-friend.lilac { background: #a78bfa !important; } .mini-friend.amber { background: #facc15 !important; } .mini-friend.mint { background: #5eead4 !important; }
.page-mascot { box-shadow: inset -7px -8px 0 rgba(0,0,0,.14), 0 0 40px -8px rgba(139,92,246,.5) !important; background: linear-gradient(165deg, #b39dff, #8b5cf6) !important; }
.page-mascot.amber, .page-mascot.yellow { background: radial-gradient(circle at 35% 30%, #fef08a, #facc15 60%) !important; }
.page-mascot.mint, .page-mascot.green, .page-mascot.sage { background: linear-gradient(165deg, #99f6e4, #2dd4bf) !important; }
.page-mascot.blue { background: linear-gradient(165deg, #67e8f9, #06b6d4) !important; }

/* ---- fayda şeridi ---- */
.benefits { background: rgba(23,31,51,.6); border: 1px solid rgba(255,255,255,.08) !important; border-radius: 24px; padding: 14px 22px !important; }
.benefit-icon { border-radius: 50% !important; }
.benefit-icon.lavender { background: rgba(139,92,246,.2) !important; color: #d0bcff !important; }
.benefit-icon.peach { background: rgba(6,182,212,.18) !important; color: #4cd7f6 !important; }
.benefit-icon.sage { background: rgba(244,63,94,.18) !important; color: #ff8fa3 !important; }
.benefit-divider { background: rgba(255,255,255,.1) !important; }

/* ---- filtre ve arama ---- */
.filter { border-radius: 999px !important; padding: 10px 16px !important; font-size: 12px !important; color: #dae2fd !important; border-color: rgba(255,255,255,.12) !important; background: rgba(23,31,51,.6) !important; }
.filter[aria-pressed=true] { background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important; border-color: transparent !important; box-shadow: 0 0 16px rgba(139,92,246,.45); }
.filter-count { border-radius: 999px !important; background: rgba(255,255,255,.1) !important; color: #cbc3d7 !important; font-size: 10px !important; }
.search-box, .sort-control { background: rgba(23,31,51,.7) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 999px !important; color: #cbc3d7; }
.search-box input { background: transparent !important; color: #f8fafc !important; }
.search-box input::placeholder { color: #64748b; }
.sort-control select { background: transparent !important; color: #f8fafc !important; }

/* ---- oyun kartları: cam + neon kenar ---- */
.game-card {
  background: linear-gradient(170deg, rgba(41,37,99,.55), rgba(23,31,51,.92)) !important;
  border: 1px solid rgba(208,188,255,.16) !important; border-radius: 28px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -18px rgba(2,6,23,.9);
}
.game-card:hover { transform: translateY(-6px) scale(1.012) !important; border-color: rgba(76,215,246,.55) !important; box-shadow: 0 20px 40px -12px rgba(2,6,23,.85), 0 0 26px -4px rgba(139,92,246,.45) !important; }
.card-art { margin: 10px 10px 0; border-radius: 20px; }
.card-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(49,36,120,.55), rgba(11,19,38,.3)); mix-blend-mode: multiply; }
.card-art-space { background: radial-gradient(circle at 60% 40%, #2a2766, #0f172a) !important; }
.card-flag { background: rgba(11,19,38,.75) !important; color: #4cd7f6 !important; border: 1px solid rgba(76,215,246,.4); border-radius: 999px !important; z-index: 2; }
.favorite-button { z-index: 2; background: rgba(11,19,38,.7) !important; color: #f8fafc !important; border: 1px solid rgba(255,255,255,.15) !important; }
.category-tag { background: rgba(6,182,212,.14) !important; color: #4cd7f6 !important; border: 1px solid rgba(6,182,212,.4); border-radius: 999px !important; }
.game-card[data-color=amber] .category-tag { background: rgba(139,92,246,.18) !important; color: #d0bcff !important; border-color: rgba(139,92,246,.45); }
.game-card[data-color=sage] .category-tag { background: rgba(16,185,129,.14) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,.4); }
.new-tag { background: rgba(244,63,94,.18) !important; color: #ff8fa3 !important; border: 1px solid rgba(244,63,94,.45); border-radius: 999px !important; }
.card-description { color: #cbc3d7 !important; }
.card-play, .game-card[data-color] .card-play { color: #f8fafc !important; }
.card-bottom { border-top-color: rgba(255,255,255,.08) !important; }
.soon-card { background: linear-gradient(135deg, rgba(41,37,99,.4), rgba(23,31,51,.8)) !important; border: 1.5px dashed rgba(208,188,255,.28) !important; }
.soon-card h3 { color: #f8fafc !important; }
.stack-card { background: linear-gradient(135deg, #2a2766, #171f33) !important; border-color: rgba(208,188,255,.3) !important; }
.soon-pill { color: #fde68a !important; border-color: rgba(250,204,21,.4) !important; background: rgba(250,204,21,.08) !important; border-radius: 999px !important; }

/* ---- konu kartları ---- */
.subject-card { background: rgba(23,31,51,.75) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 24px !important; color: #f8fafc !important; }
.subject-card:hover { border-color: rgba(76,215,246,.5) !important; box-shadow: 0 0 24px -6px rgba(139,92,246,.45) !important; }
.subject-card .subject-symbol { background: rgba(11,19,38,.9) !important; border-radius: 16px !important; }
.subject-card.amber .subject-symbol { color: #facc15 !important; }
.subject-card.lilac .subject-symbol, .subject-card.purple .subject-symbol { color: #d0bcff !important; }
.subject-card.sage .subject-symbol, .subject-card.mint .subject-symbol { color: #4cd7f6 !important; }
.subject-card > svg { background: rgba(255,255,255,.06); border-radius: 50%; padding: 8px; width: 34px !important; height: 34px !important; }

/* ---- afişler ---- */
.curiosity-banner, .small-banner { background: linear-gradient(135deg, rgba(41,37,99,.55), rgba(23,31,51,.9)) !important; border: 1px solid rgba(208,188,255,.18) !important; border-radius: 28px !important; }
.banner-symbol::before, .banner-symbol > span:first-child { background: #0b1326 !important; }
.banner-symbol > span { color: #fff !important; }
.banner-symbol i { color: #4cd7f6 !important; }
.banner-smile { color: #4cd7f6 !important; }
.banner-link { border: 1px solid rgba(255,255,255,.14) !important; border-radius: 999px !important; padding: 12px 20px !important; color: #f8fafc !important; background: rgba(11,19,38,.6); }

/* ---- sayfa başlıkları, paneller, diyaloglar ---- */
.page-hero, .category-hero, .detail-hero, .favorites-hero { border-color: rgba(255,255,255,.08) !important; }
.detail-sidebar, .player-sidebar, .help-steps > *, .faq-list > *, .principle-grid > *, .mission-list > *, .question-surface, .player-workspace, .dialog-content, .mobile-menu, .how-dialog, .pause-dialog {
  background: linear-gradient(160deg, rgba(41,37,99,.45), rgba(23,31,51,.9)) !important; border-color: rgba(255,255,255,.1) !important;
}
.answer-options button, .phase-options button { background: #1e1b4b !important; border: 1.5px solid rgba(255,255,255,.1) !important; border-radius: 20px !important; color: #f8fafc !important; }
.answer-options button:hover, .phase-options button:hover { border-color: #06b6d4 !important; background: rgba(6,182,212,.12) !important; }
.toast { background: #2d3449 !important; color: #f8fafc !important; border: 1px solid rgba(255,255,255,.12); border-radius: 999px !important; box-shadow: 0 0 24px rgba(139,92,246,.35) !important; }
.footer, .site-footer { border-top-color: rgba(255,255,255,.08) !important; }
.site-footer a, .footer a { color: #cbc3d7 !important; }
.site-footer a:hover, .footer a:hover { color: #4cd7f6 !important; }
.breadcrumb a { color: #94a3b8 !important; }
.curiosity-banner h2, .small-banner h2, .soon-card h3 { color: #f8fafc !important; }
.design-shapes i { background: linear-gradient(165deg, #b39dff, #8b5cf6) !important; box-shadow: 0 0 30px -6px rgba(139,92,246,.6); }
.design-shapes i:nth-child(2) { background: radial-gradient(circle at 35% 30%, #fef08a, #facc15 60%) !important; box-shadow: 0 0 30px -6px rgba(250,204,21,.6); }
.design-shapes i:nth-child(3) { background: linear-gradient(165deg, #99f6e4, #2dd4bf) !important; box-shadow: 0 0 30px -6px rgba(45,212,191,.6); }
.design-shapes i:nth-child(4) { background: linear-gradient(165deg, #67e8f9, #06b6d4) !important; box-shadow: 0 0 30px -6px rgba(6,182,212,.6); }
.detail-cover, .category-hero.amber, .player-title-icon.amber { background: linear-gradient(170deg, #2a2766, #171f33) !important; border-color: rgba(208,188,255,.25) !important; box-shadow: 0 0 50px -12px rgba(139,92,246,.55); color: #fde68a !important; }
.game-facts > * { background: rgba(23,31,51,.75) !important; border-color: rgba(255,255,255,.1) !important; }

/* ▶ Tek tıkla oyna: kartta belirgin oyna düğmesi, ayrıntı ikinci planda */
.card-bottom{gap:12px}
.card-about{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#a3abc0}
.card-about svg{width:13px;height:13px}
.card-about:hover{color:#f8fafc}
.card-play.card-play-btn{background:linear-gradient(90deg,#8b5cf6,#06b6d4);color:#fff!important;padding:10px 16px;border-radius:12px;font-size:13px;box-shadow:0 8px 20px -8px #8b5cf6}
.card-play.card-play-btn svg{width:14px;height:14px;fill:currentColor}
.card-play.card-play-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.hero-play svg{width:16px;height:16px;fill:currentColor}
.mobile-menu>a.menu-play{color:#fff;font-weight:700;background:linear-gradient(90deg,#8b5cf633,#06b6d433);border-radius:12px;padding-inline:12px;border-bottom:0;margin-bottom:6px}