@import url('https://googleapis.com');
:root{--bg:#08090d;--card:#11131a;--text:#f5f6f8;--muted:#969eac;--line:#252936;--purple:#8b5cf6;--cyan:#22d3ee;--green:#39d98a;--yellow:#e8c547}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 8%,#8b5cf61c,transparent 28rem),radial-gradient(circle at 10% 50%,#22d3ee0c,transparent 25rem),var(--bg);color:var(--text);font:15px/1.6 Inter,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.nav{height:72px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:#08090dcc;backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}.logo{font:700 1.4rem "Space Grotesk"}.logo span{color:var(--cyan)}nav{display:flex;gap:28px}nav a,.ig{font-size:.82rem;color:var(--muted);display:inline-flex;align-items:center;gap:8px}nav a:hover,.ig:hover{color:white}
main{width:min(1120px,90%);margin:auto}section{padding:105px 0}.hero{min-height:calc(100vh - 72px);display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:70px}.eyebrow{margin:0 0 14px;color:var(--cyan);font:700 .7rem Inter;letter-spacing:.18em}h1,h2,h3{font-family:"Space Grotesk",sans-serif}h1{font-size:clamp(4rem,10vw,7.5rem);line-height:.88;letter-spacing:-.07em;margin:0}h1 em{font-style:normal;background:linear-gradient(100deg,#fff,#9ca3ff,var(--cyan));background-clip:text;color:transparent}.lead{max-width:650px;color:var(--muted);font-size:1.05rem;margin:30px 0}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#ffffff08;color:var(--text);padding:11px 18px;border-radius:10px;cursor:pointer;gap:10px}.btn:hover{transform:translateY(-2px);border-color:#ffffff33}.btn.main{background:#f5f5f5;color:#08090d;font-weight:700}.hero code{display:block;color:#596170;margin-top:30px}.photo{aspect-ratio:4/5;max-width:370px;width:100%;justify-self:end;border:1px solid var(--line);border-radius:24px;display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,#ffffff0d,#ffffff02),#11131a;box-shadow:0 30px 80px #0008}.photo strong{font:700 5rem "Space Grotesk";letter-spacing:-.08em}.photo small{color:var(--muted);letter-spacing:.16em;font-size:.62rem;margin-top:15px}
h2{font-size:clamp(2.4rem,5vw,4rem);line-height:1;letter-spacing:-.055em;margin:0 0 35px}.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:15px}.card{border:1px solid var(--line);background:#ffffff06;border-radius:18px}.big{padding:35px;min-height:330px}.big>span{color:#596170;font:12px monospace}.big h3{font-size:2rem;margin-top:55px}.big p{max-width:650px;color:var(--muted)}.facts{display:grid;grid-template-columns:1fr 1fr;gap:15px}.facts .card{padding:20px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:4px;}.facts b{font-size:1.4rem}.facts small{color:#666e7c;font-size:.6rem;letter-spacing:.12em;margin-top:4px;display:inline-block;}.facts strong{font-size:.95rem;margin-top:2px;}

/* قسم الألعاب */
.games{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.game{height:390px;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;align-items:end;padding:32px;}
.game h3{font-size:2rem;margin:10px 0 0}.game p{color:#c0c6d0;margin:0}.game label,.wordle label{font-size:.58rem;letter-spacing:.13em;border:1px solid #ffffff26;padding:5px 8px;border-radius:20px}

@media screen and (min-width: 1px) {
    .game.cs { background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.85)), url('../assets/images/cs.jpg'), url('assets/images/cs.jpg'); background-size: cover; background-position: center; }
    .game.mc { background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.85)), url('../assets/images/mincraft.png'), url('assets/images/mincraft.png'); background-size: cover; background-position: center; }
}

/* تنسيق شريط التنقل العلوي وقص حواف شعار إنستغرام الدائرية */
.btn-logo { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; }
.nav-links { display: flex; gap: 15px; align-items: center; }

/* بطاقات الاهتمامات */
.interests { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.interests .card { padding: 30px; display: flex; gap: 20px; align-items: center; }
.interests .emoji { font-size: 2rem; }
.interests h3 { margin: 0 0 5px; font-size: 1.4rem; }
.interests p { margin: 0; color: var(--muted); }

/* تنسيق مشغل الموسيقى وقائمة الأغاني */
.player { padding: 30px; display: flex; gap: 25px; align-items: center; margin-bottom: 20px;}
.cover { width: 80px; height: 80px; background: var(--purple); border-radius: 12px; display: grid; place-content: center; font-size: 2rem;}
.track { flex: 1; }
.track small { color: var(--cyan); letter-spacing: 0.1em; font-size: 0.7rem; }
.track h3 { margin: 5px 0 2px; font-size: 1.4rem; }
.track p { margin: 0 0 15px; color: var(--muted); font-size: 0.9rem; }
#seek { width: 100%; accent-color: var(--cyan); margin: 0; }
.times { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 5px; }
.controls { display: flex; gap: 10px; }
.controls button { width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--line); background: #ffffff08; color: white; cursor: pointer; display: grid; place-content: center; }
.controls button:hover { background: #ffffff15; }
.playlist { display: flex; flex-direction: column; gap: 8px; }
.playlist button { width: 100%; text-align: left; padding: 14px 20px; background: #ffffff04; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; transition: 0.2s; }
.playlist button:hover, .playlist button.active { background: #ffffff0c; color: white; border-color: var(--cyan); }

/* شبكة بطاقات قنوات التواصل المربعة */
.connect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 35px;
}
.connect-card {
    aspect-ratio: 1 / 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.connect-card:hover {
    transform: translateY(-5px);
    border-color: var(--cyan);
    background: #ffffff0c;
}

/* إصلاح وقص الزوايا البيضاء للشعارات في البطاقات المربعة لتحويلها إلى دائرية احترافية */
.square-logo {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 30px;
}
.sub-header {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--cyan);
    margin-bottom: 5px;
}
.connect-card h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text);
}

/* تنسيق الـ Wordle Frame */
.wordle-frame { width: 100%; height: 520px; overflow: hidden; border-radius: 18px; padding: 0; background: #121213; position: relative; }
.wordle-frame iframe { width: 100%; height: 100%; border: 0; display: block; position: absolute; top: 0; left: 0; }

/* حركات الإيقاع الراقص المنظم للموقع */
@keyframes rhythmicDance {
    0%, 60%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    15% { transform: translateY(-6px) scale(0.995) rotate(-0.3deg); }
    30% { transform: translateY(1px) scale(1.004) rotate(0.3deg); }
    45% { transform: translateY(-2px) scale(0.998) rotate(-0.1deg); }
}
body.dancing main { animation: rhythmicDance 0.75s infinite cubic-bezier(0.25, 1, 0.5, 1); }
body.dancing .player.card { box-shadow: 0 0 35px rgba(34, 211, 238, 0.4); border-color: var(--cyan); }

@media (max-width: 850px) {
    .connect-grid { grid-template-columns: 1fr; }
    .connect-card { aspect-ratio: auto; height: 180px; }
}
@media (max-width: 700px) {
    .hero, .about-grid, .games, .interests { grid-template-columns: 1fr; }
    .wordle-frame { height: 460px; }
    .wordle-frame iframe { width: 118%; height: 118%; transform: scale(0.85); transform-origin: top left; }
}