/* Uzay İstasyonu Koordinatları — derin uzay, camgöbeği ızgara, neon izler. */
#odal-oyun-uzay .uz-sahne {
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(96, 165, 250, .28), transparent 60%),
    radial-gradient(600px 300px at -10% 110%, rgba(167, 139, 250, .25), transparent 60%),
    #0b1026;
  color: #e6ecff;
}
#odal-oyun-uzay .oy-not { color: #a9b4d6; }
#odal-oyun-uzay .oy-link { color: #e6ecff; }
#odal-oyun-uzay .oy-cip { color: #e6ecff; }
#odal-oyun-uzay .oy-rozet { background: #22d3ee; color: #0b1026; }
#odal-oyun-uzay .uz-ses { text-decoration: none; font-size: 18px; }
#odal-oyun-uzay .uz-skor { font-weight: 800; color: #facc15; }
#odal-oyun-uzay .uz-kart { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: #e6ecff; }

/* Giriş */
#odal-oyun-uzay .uz-giris { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
#odal-oyun-uzay .uz-giris p { color: #c3cdee; max-width: 560px; }
#odal-oyun-uzay .uz-giris__gezegen { font-size: 72px; line-height: 1; filter: drop-shadow(0 0 24px rgba(96, 165, 250, .6)); animation: uz-don 12s linear infinite; }
@keyframes uz-don { to { transform: rotate(360deg); } }

/* Galaksi haritası */
#odal-oyun-uzay .uz-sektorler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#odal-oyun-uzay .uz-sektor { --uz-renk: #22d3ee; display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--uz-renk) 60%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--uz-renk) 18%, transparent), rgba(255, 255, 255, .03)); color: #e6ecff; transition: transform .12s, box-shadow .12s; }
#odal-oyun-uzay .uz-sektor:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--uz-renk) 30%, transparent), 0 10px 24px rgba(0, 0, 0, .35); }
#odal-oyun-uzay .uz-sektor--kilitli { opacity: .45; filter: grayscale(.8); }
#odal-oyun-uzay .uz-sektor--bitti { border-style: solid; border-color: var(--uz-renk); }
#odal-oyun-uzay .uz-sektor__ikon { font-size: 32px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .3); box-shadow: 0 0 16px color-mix(in srgb, var(--uz-renk) 50%, transparent); flex: 0 0 auto; }
#odal-oyun-uzay .uz-sektor__metin { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
#odal-oyun-uzay .uz-sektor__no { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--uz-renk); }
#odal-oyun-uzay .uz-sektor__metin small { color: #a9b4d6; }
#odal-oyun-uzay .uz-sektor__yildiz { font-size: 12px; color: #a9b4d6; white-space: nowrap; }

/* Görev düzeni */
#odal-oyun-uzay .uz-hikaye { color: #c3cdee; font-style: italic; text-align: center; }
#odal-oyun-uzay .uz-noktalar { display: inline-flex; gap: 5px; }
#odal-oyun-uzay .uz-nokta { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
#odal-oyun-uzay .uz-nokta--tamam { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
#odal-oyun-uzay .uz-nokta--simdi { background: #facc15; box-shadow: 0 0 8px #facc15; }
#odal-oyun-uzay .uz-duzen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#odal-oyun-uzay .uz-tahta-kap { border-radius: 16px; overflow: hidden; border: 2px solid rgba(34, 211, 238, .35); box-shadow: 0 0 0 6px rgba(34, 211, 238, .06), 0 16px 40px rgba(0, 0, 0, .4); }
#odal-oyun-uzay .uz-yan { display: flex; flex-direction: column; gap: 12px; }
#odal-oyun-uzay .uz-soru { font-size: 17px; line-height: 1.5; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 14px; }
#odal-oyun-uzay .uz-formul { margin-top: 8px; font: 700 15px ui-monospace, Menlo, Consolas, monospace; color: #93c5fd; }
#odal-oyun-uzay .uz-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px; }
#odal-oyun-uzay .uz-panel label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
#odal-oyun-uzay .uz-girdi { width: 72px; padding: 9px 8px; border-radius: 10px; border: 2px solid #22d3ee; background: #050817; color: #e6ecff; font: 800 20px ui-monospace, Menlo, Consolas, monospace; text-align: center; }
#odal-oyun-uzay .uz-kaydirac { flex: 1 1 100%; flex-wrap: wrap; }
#odal-oyun-uzay .uz-kaydirac input[type=range] { flex: 1 1 160px; accent-color: #facc15; }
#odal-oyun-uzay .uz-denklem { font: 800 20px ui-monospace, Menlo, Consolas, monospace; }
#odal-oyun-uzay .uz-secim { flex: 1; }
#odal-oyun-uzay .uz-bacaklar { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
#odal-oyun-uzay .uz-bacak { font: 700 14px ui-monospace, Menlo, Consolas, monospace; padding: 4px 8px; border-radius: 8px; background: rgba(251, 146, 60, .18); color: #fed7aa; }
#odal-oyun-uzay .uz-ipucu-btn { background: #facc15; color: #0b1026; border-color: #facc15; box-shadow: 0 3px 0 #a16207; }

/* SVG tahta — 1 birim = 1 kare */
#odal-oyun-uzay .uz-tahta { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: manipulation; user-select: none; }
#odal-oyun-uzay .uz-tahta--tikla { cursor: crosshair; }
#odal-oyun-uzay .uz-zemin { fill: #070b1d; }
#odal-oyun-uzay .uz-yildiz { fill: #fff; opacity: .55; }
#odal-oyun-uzay .uz-izgara { stroke: rgba(34, 211, 238, .14); stroke-width: .03; }
#odal-oyun-uzay .uz-izgara--kalin { stroke: rgba(34, 211, 238, .28); stroke-width: .05; }
#odal-oyun-uzay .uz-eksen { stroke: #67e8f9; stroke-width: .08; }
#odal-oyun-uzay .uz-ok { fill: #67e8f9; }
#odal-oyun-uzay .uz-eksen-ad { fill: #67e8f9; font: italic 700 .6px system-ui, sans-serif; }
#odal-oyun-uzay .uz-sayi { fill: #9fb3e8; font: 600 .48px system-ui, sans-serif; text-anchor: middle; }
#odal-oyun-uzay .uz-sayi--y { text-anchor: end; }
#odal-oyun-uzay .uz-emoji { text-anchor: middle; dominant-baseline: central; }
#odal-oyun-uzay .uz-gemi { filter: drop-shadow(0 0 .2px #fff); }
#odal-oyun-uzay .uz-hayalet { opacity: .55; }
#odal-oyun-uzay .uz-asteroit { filter: drop-shadow(0 0 .15px #fb923c); }
#odal-oyun-uzay .uz-isaret { fill: #22d3ee; }
#odal-oyun-uzay .uz-isaret--tamam { fill: #4ade80; }
#odal-oyun-uzay .uz-isaret-dalga { fill: none; stroke: #22d3ee; stroke-width: .08; transform-box: fill-box; transform-origin: center; animation: uz-dalga 1.6s ease-out infinite; }
@keyframes uz-dalga { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
#odal-oyun-uzay .uz-ayna { stroke: #f472b6; stroke-width: .1; stroke-dasharray: .35 .2; }
#odal-oyun-uzay .uz-ayna-nokta { fill: #f472b6; }
#odal-oyun-uzay .uz-iz { stroke: #facc15; stroke-width: .06; stroke-dasharray: .25 .15; }
#odal-oyun-uzay .uz-iz--lazer { stroke: #f87171; stroke-width: .1; stroke-dasharray: none; filter: drop-shadow(0 0 .15px #f87171); }
#odal-oyun-uzay .uz-rota { fill: none; stroke: #fb923c; stroke-width: .09; stroke-dasharray: .3 .15; stroke-linejoin: round; }
#odal-oyun-uzay .uz-rota-nokta { fill: #fb923c; }
#odal-oyun-uzay .uz-iletki { fill: rgba(250, 204, 21, .05); stroke: rgba(250, 204, 21, .6); stroke-width: .05; }
#odal-oyun-uzay .uz-iletki-cizgi { stroke: rgba(250, 204, 21, .75); stroke-width: .05; }
#odal-oyun-uzay .uz-iletki-yazi { fill: #fde68a; font: 700 .42px system-ui, sans-serif; text-anchor: middle; }
#odal-oyun-uzay .uz-nisan { stroke: #facc15; stroke-width: .08; stroke-dasharray: .2 .12; }
#odal-oyun-uzay .uz-lazer { stroke: #4ade80; stroke-width: .08; opacity: .75; filter: drop-shadow(0 0 .12px #4ade80); }
#odal-oyun-uzay .uz-lazer--tamam { opacity: 1; stroke-width: .12; }
#odal-oyun-uzay .uz-etiket { fill: #bbf7d0; font: 700 .45px system-ui, sans-serif; }
#odal-oyun-uzay .uz-parabol { fill: none; stroke: rgba(147, 197, 253, .35); stroke-width: .06; }
#odal-oyun-uzay .uz-parabol--son { stroke: #93c5fd; stroke-width: .09; }
#odal-oyun-uzay .uz-parabol--isabet { stroke: #4ade80; }
#odal-oyun-uzay .uz-platform { fill: #60a5fa; }

/* Bitti */
#odal-oyun-uzay .uz-bitti { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
#odal-oyun-uzay .uz-bitti__ikon { font-size: 56px; }
#odal-oyun-uzay .uz-bitti .oy-yildiz { font-size: 40px; }
#odal-oyun-uzay .uz-bitti p { color: #c3cdee; }

@media (max-width: 760px) {
  #odal-oyun-uzay .uz-duzen { grid-template-columns: 1fr; }
  #odal-oyun-uzay .uz-sektorler { grid-template-columns: 1fr; }
}