html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #c95cff; }
body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#oyun-tuval { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; outline: none; cursor: crosshair; }
#yukleniyor { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 30px "Arial Black", sans-serif; letter-spacing: 1px; }
/* rekor kaydı penceresi + bildirim (2026-11-03: oyundaki şeker pencereleriyle aynı görünüm) */
#sp-kayit { position: fixed; inset: 0; z-index: 30000; display: none; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(70, 0, 70, 0.35), rgba(25, 0, 35, 0.8)); padding: 34px 12px 12px; box-sizing: border-box; font-family: "Lilita One", "Arial Black", sans-serif; }
#sp-kayit.acik { display: flex; animation: sp-acil 0.28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sp-acil { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
#sp-kayit .sp-kart { position: relative; width: min(440px, 100%); max-height: 100%; box-sizing: border-box; padding: 9px; border-radius: 28px; background: linear-gradient(#ff9ed0, #f14f9f 50%, #c41d6e); border: 3px solid #7a0d45; box-shadow: 0 14px 34px rgba(40, 0, 40, 0.55); color: #7a0d45; text-align: center; }
#sp-kayit .sp-ic { border-radius: 20px; border: 2.5px solid #fff; padding: 34px 18px 16px; background: repeating-linear-gradient(-45deg, rgba(255, 120, 190, 0.07) 0 12px, transparent 12px 34px), linear-gradient(#fff8fc, #ffd6ea); max-height: calc(100vh - 80px); overflow: auto; box-sizing: border-box; }
#sp-kayit .sp-baslik { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); white-space: nowrap; padding: 9px 28px 8px; font-size: 24px; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 #6e0a3c, 0 0 1px #6e0a3c; border-radius: 13px; border: 3px solid #6e0a3c; background: linear-gradient(#ff74b9, #e0207f 55%, #9c0f52); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 4px 8px rgba(60, 0, 40, 0.35); }
#sp-kayit .sp-puan { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.85); border: 2px solid #f5b6d6; font-size: 17px; color: #c2307a; }
#sp-kayit .sp-puan b { font-weight: 400; font-size: 32px; color: #ff4fa3; text-shadow: 0 2px 0 #fff, 0 0 2px #fff; }
#sp-form { display: flex; gap: 8px; }
#sp-isim { flex: 1 1 auto; min-width: 0; height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: 25px; border: 3px solid #f08ac0; background: #fff; color: #7a0d45; font: 21px "Lilita One", "Arial Black", sans-serif; outline: none; box-shadow: inset 0 3px 6px rgba(160, 40, 110, 0.15); -webkit-user-select: text; user-select: text; touch-action: auto; }
#sp-isim::placeholder { color: rgba(122, 13, 69, 0.4); }
#sp-isim:focus { border-color: #ff4fa3; }
#sp-kayit button { height: 50px; padding: 0 18px; border-radius: 25px; border: 2.5px solid #145a09; cursor: pointer; font: 19px "Lilita One", "Arial Black", sans-serif; letter-spacing: 0.5px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); background: linear-gradient(#d2ff86, #66d62c 42%, #2f9c14); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #145a09, 0 8px 10px rgba(50, 0, 40, 0.25); }
#sp-kayit button:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), 0 1px 0 #145a09; }
#sp-kayit button:disabled { opacity: 0.6; cursor: default; }
#sp-durum { min-height: 22px; margin: 12px 0 14px; font: 15px/1.35 Arial, sans-serif; font-weight: 700; color: #7a0d45; }
#sp-kayit .sp-alt { display: flex; gap: 10px; justify-content: center; padding-bottom: 4px; }
#sp-kayit .sp-alt button { flex: 1 1 0; border-color: #40384f; background: linear-gradient(#f6f2fa, #c2b9cf 42%, #8c80a0); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #40384f, 0 8px 10px rgba(50, 0, 40, 0.25); }
#sp-kayit .sp-alt button:active { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 1px 0 #40384f; }
#sp-kayit #sp-rekorlar { border-color: #7a4300; background: linear-gradient(#fff4a8, #ffc62c 42%, #ea8a00); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #7a4300, 0 8px 10px rgba(50, 0, 40, 0.25); }
#sp-kayit #sp-rekorlar:active { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 1px 0 #7a4300; }
@media (max-height: 380px) {
	#sp-kayit { padding-top: 26px; }
	#sp-kayit .sp-ic { padding: 24px 14px 8px; max-height: calc(100vh - 50px); }
	#sp-kayit .sp-baslik { font-size: 19px; top: -20px; padding: 7px 22px 6px; }
	#sp-kayit .sp-puan { margin: 0 0 8px; padding: 4px 10px; }
	#sp-kayit .sp-puan b { font-size: 26px; }
	#sp-isim, #sp-kayit button { height: 42px; }
	#sp-durum { margin: 6px 0 8px; font-size: 13px; }
}
#sp-bildirim { position: fixed; left: 50%; top: 12px; z-index: 30000; max-width: calc(100% - 24px); box-sizing: border-box; transform: translate(-50%, -160%); transition: transform 0.35s cubic-bezier(.3, 1.5, .5, 1); padding: 10px 18px 10px 46px; border-radius: 24px; border: 3px solid #7a0d45; background: linear-gradient(#ffffff, #ffe3f1); color: #c2307a; font: 16px "Lilita One", "Arial Black", sans-serif; text-align: center; box-shadow: 0 6px 0 #c2307a, 0 10px 20px rgba(40, 0, 40, 0.35); pointer-events: none; }
#sp-bildirim::before { content: "\2605"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: linear-gradient(#fff3a0, #ffc21f 55%, #f08a00); color: #fff; font-size: 17px; text-shadow: 0 1px 0 #9a5200; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6); }
#sp-bildirim.acik { transform: translate(-50%, 0); }
#rekor-kap { position: fixed; inset: 0; z-index: 40000; background: #f5f5f5; overflow: hidden; display: none; -webkit-user-select: text; user-select: text; touch-action: auto; color: #222; }
#rekor-kap .rekor-yukleniyor { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font: 700 18px Arial, sans-serif; color: #555; }
#rekor-kap .rekor-kapat-hata { margin-top: 12px; padding: 8px 18px; font: 700 16px Arial, sans-serif; cursor: pointer; }