@font-face {
  font-family: 'Scheherazade New';
  src: url('./ScheherazadeNew-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      width: 100vw;
      overflow-x: hidden;
      background: #000;
      font-family: 'Scheherazade New', serif;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 20px;
      padding-bottom: 100px;
    }

    /* قطرات المطر على شكل دمعة عمودية */
    .raindrop {
      position: fixed;
      top: -20px;
      width: 1px;
      height: 10px;
      background: linear-gradient(to bottom, rgba(200, 220, 240, 0.7), rgba(255, 255, 255, 0.4));
      border-radius: 50% 50% 50% 0%;
      animation: fall linear infinite;
      z-index: 1;
    }

    @keyframes fall {
      0% { 
        transform: translateY(0); 
        opacity: 0.8; 
      }
      100% { 
        transform: translateY(110vh); 
        opacity: 0.2; 
      }
    }

    /* العنوان */
    h1 {
      font-size: 36px;
      margin-bottom: 50px;
      text-align: center;
      z-index: 2;
      letter-spacing: 2px;
      text-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
      font-weight: 700;
    }

    /* حاوية الأزرار الرئيسية */
    .buttons-container {
      display: flex;
      flex-direction: column;
      gap: 25px;
      z-index: 2;
      width: 100%;
      max-width: 340px;
      align-items: center;
    }

    /* زر التشغيل */
    .play-button {
      background: linear-gradient(to bottom, #333333, #1a1a1a);
      border: 2px solid #fff;
      color: #fff;
      font-size: 22px;
      font-family: 'Scheherazade New', serif;
      padding: 16px 25px;
      border-radius: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      text-decoration: none;
      box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    }

    .play-button:hover {
      background: linear-gradient(to bottom, #444444, #222222);
      transform: translateY(-3px);
      box-shadow: 0 6px 25px rgba(255, 255, 255, 0.25);
    }

    .play-icon {
      width: 24px;
      height: 24px;
      fill: #fff;
      margin-left: -5px;
      flex-shrink: 0;
    }

    /* المستطيل الحاوي للأيقونات */
    .icons-container {
      border: 2px solid #fff;
      border-radius: 18px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      padding: 20px 18px;
      width: 100%;
      background: linear-gradient(to bottom, rgba(40,40,40,0.6), rgba(0,0,0,0.6));
      max-width: 330px;
      box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    }

    .icon-link {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;
      padding: 10px;
      border-radius: 12px;
      text-decoration: none !important;
    }

.icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.icon-box span {
  font-size: 10px;
  opacity: 0.8;
  color: white;
  text-decoration: none !important;
}

    .icon-link:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.05);
    }

    .icon-link svg {
      width: 30px;
      height: 30px;
      fill: #fff;
      transition: all 0.3s ease;
    }

    .icon-link:hover svg {
      fill: #ddd;
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
    }
    
    /* الدائرة السفلية */
    .circle-link {
      position: fixed;
      bottom: 50px;
      left: 25px;
      width: 38px;
      height: 38px;
      background: #fff;
      border-radius: 50%;
      z-index: 2;
      transition: all 0.3s ease;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
    }

    .circle-link:hover {
      transform: scale(1.15);
      box-shadow: 0 6px 25px rgba(255, 255, 255, 0.6);
    }

    .paw-icon {
      width: 50%;
      height: 50%;
      stroke: #000 !important;
    }

    /* النص الختامي */
    footer {
      position: fixed;
      bottom: 15px;
      right: 5px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      z-index: 2;
      width: 100%;
      opacity: 0.9;
      padding: 0 10px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    /* تحسينات للشاشات الصغيرة جداً */
    @media (max-width: 360px) {
      h1 {
        font-size: 30px;
        margin-bottom: 40px;
      }

      .buttons-container {
        gap: 20px;
      }

      .icons-container {
        gap: 15px;
        padding: 18px 15px;
      }
      
      .icon-link svg {
        width: 26px;
        height: 26px;
      }

      .play-button {
        font-size: 20px;
        padding: 14px 20px;
      }

      .circle-link {
        width: 34px;
        height: 34px;
        bottom: 45px;
        left: 20px;
      }

      footer {
        font-size: 12px;
      }
    }

    /* تحسينات للشاشات المتوسطة (أجهزة لوحية) */
    @media (min-width: 768px) {
      h1 {
        font-size: 36px;
        margin-bottom: 50px;
      }

      .buttons-container {
        max-width: 340px;
        gap: 25px;
      }

      .play-button {
        font-size: 22px;
        padding: 16px 25px;
      }

      .icons-container {
        padding: 20px 18px;
        gap: 18px;
      }

      .icon-link svg {
        width: 30px;
        height: 30px;
      }

      .circle-link {
        width: 38px;
        height: 38px;
        bottom: 50px;
        left: 25px;
      }

      footer {
        font-size: 14px;
      }
    }

    /* تحسينات للشاشات الكبيرة (لابتوب وكمبيوتر) */
    @media (min-width: 1024px) {
      h1 {
        font-size: 36px;
        margin-bottom: 50px;
      }

      .buttons-container {
        gap: 25px;
        max-width: 340px;
      }

      .play-button {
        font-size: 22px;
        padding: 16px 25px;
      }

      .icons-container {
        padding: 20px 18px;
        gap: 18px;
      }

      .icon-link svg {
        width: 30px;
        height: 30px;
      }

      .circle-link {
        width: 38px;
        height: 38px;
        bottom: 50px;
        left: 25px;
      }

      footer {
        font-size: 14px;
      }
    }

    /* تحسينات للشاشات الكبيرة جداً */
    @media (min-width: 1440px) {
      .buttons-container {
        max-width: 340px;
      }

      h1 {
        font-size: 36px;
      }
    }

    /* تحسين الارتفاع للشاشات القصيرة */
    @media (max-height: 600px) {
      h1 {
        margin-bottom: 30px;
        font-size: 28px;
      }

      .buttons-container {
        gap: 18px;
      }

      footer {
        font-size: 12px;
        bottom: 10px;
      }

      .circle-link {
        bottom: 40px;
      }
    }

    /* ====== أنماط النافذة المنبثقة ====== */
    #notification-popup {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(150%);
      width: 90%;
      max-width: 420px;
      background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
      overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 9999;
    }

    #notification-popup.show {
      transform: translateX(-50%) translateY(0);
    }

    .close-btn {
      position: absolute;
      top: 12px;
      left: 12px;
      width: 24px;
      height: 24px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 2;
    }

    .close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.1);
    }

    .close-btn::before,
    .close-btn::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 2px;
      background: #fff;
    }

    .close-btn::before {
      transform: rotate(45deg);
    }

    .close-btn::after {
      transform: rotate(-45deg);
    }

    .sky-container {
      position: relative;
      height: 120px;
      background: linear-gradient(to bottom, #1a1a2e, #16213e);
      overflow: hidden;
    }

    .sky-container.day {
      background: linear-gradient(to bottom, #87CEEB, #B0D4E3);
    }

    .moon {
      position: absolute;
      top: 25px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: #f4f4f4;
      border-radius: 50%;
      box-shadow: 0 0 20px rgba(244, 244, 244, 0.5);
    }

    .sun {
      position: absolute;
      top: 25px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: #FFD700;
      border-radius: 50%;
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
    }

    .cloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50px;
      opacity: 0.8;
    }

    .sky-container.day .cloud {
      background: rgba(255, 255, 255, 0.7);
    }

    .cloud-1 {
      width: 60px;
      height: 20px;
      top: 30px;
      left: 20px;
      animation: float 8s ease-in-out infinite;
    }

    .cloud-2 {
      width: 80px;
      height: 25px;
      top: 60px;
      left: 50%;
      animation: float 10s ease-in-out infinite 2s;
    }

    .cloud-3 {
      width: 50px;
      height: 18px;
      top: 45px;
      right: 80px;
      animation: float 7s ease-in-out infinite 1s;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #fff;
      border-radius: 50%;
      animation: twinkle 2s ease-in-out infinite;
    }

    @keyframes twinkle {
      0%, 100% {
        opacity: 0.3;
      }
      50% {
        opacity: 1;
      }
    }

    .content-area {
      padding: 20px;
      background: #1a1a1a;
    }

    .message-box {
      background: #ffffff;
      color: #000;
      padding: 16px 20px;
      border-radius: 8px;
      text-align: center;
      font-size: 16px;
      line-height: 1.6;
      font-weight: 500;
    }

    @media (max-width: 480px) {
      #notification-popup {
        width: 95%;
        max-width: 360px;
      }

      .message-box {
        font-size: 14px;
        padding: 14px 16px;
      }

      .sky-container {
        height: 100px;
      }

      .moon, .sun {
        width: 40px;
        height: 40px;
        top: 20px;
        right: 25px;
      }
    }

    /* ====== توقيع أوكامي المحسن ====== */
    #okami-star {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 12px;
      height: 12px;
      pointer-events: none;
      z-index: 9999;
    }

    .okami-celestial {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
    }

    .okami-sun {
      width: 30px;
      height: 30px;
      background: radial-gradient(circle, #FFD700 0%, #FFA500 50%, transparent 70%);
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
      animation: okamiSunRise 8s ease-in-out forwards;
    }

    .okami-moon {
      width: 25px;
      height: 25px;
      background: radial-gradient(circle, #f4f4f4 0%, #d0d0d0 50%, transparent 70%);
      box-shadow: 0 0 15px rgba(244, 244, 244, 0.5);
      animation: okamiMoonRise 8s ease-in-out forwards;
    }

    .okami-cloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50px;
      opacity: 0;
    }

    .okami-cloud-1 {
      width: 40px;
      top: 32px;
      height: 12px;
      animation: okamiCloudFloat1 8s ease-in-out forwards;
    }

    .okami-cloud-2 {
      width: 35px;
      top: 10px;
      height: 10px;
      animation: okamiCloudFloat2 8.2s ease-in-out forwards 0.3s;
    }

    .okami-star-particle {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 0%, transparent 70%);
      opacity: 0;
      animation: okamiSparkle 8s ease-in-out forwards;
    }

    @keyframes okamiSunRise {
      0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3);
      }
      15% {
        opacity: 1;
        transform: translate(-10px, 10px) scale(1.2);
      }
      50% {
        opacity: 1;
        transform: translate(-40px, 25px) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-80px, 45px) scale(0.5);
      }
    }

    @keyframes okamiMoonRise {
      0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3);
      }
      15% {
        opacity: 1;
        transform: translate(-8px, 8px) scale(1.1);
      }
      50% {
        opacity: 1;
        transform: translate(-35px, 20px) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-70px, 40px) scale(0.5);
      }
    }

    @keyframes okamiCloudFloat1 {
      0% {
        opacity: 0;
        transform: translate(10px, 15px) scale(0.5);
      }
      20% {
        opacity: 0.7;
        transform: translate(-5px, 18px) scale(1);
      }
      60% {
        opacity: 0.7;
        transform: translate(-30px, 25px) scale(1.1);
      }
      100% {
        opacity: 0;
        transform: translate(-60px, 35px) scale(0.8);
      }
    }

    @keyframes okamiCloudFloat2 {
      0% {
        opacity: 0;
        transform: translate(5px, 25px) scale(0.4);
      }
      25% {
        opacity: 0.6;
        transform: translate(-10px, 30px) scale(1);
      }
      65% {
        opacity: 0.6;
        transform: translate(-35px, 38px) scale(1.05);
      }
      100% {
        opacity: 0;
        transform: translate(-65px, 48px) scale(0.7);
      }
    }

    @keyframes okamiSparkle {
      0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
      }
      20% {
        opacity: 1;
        transform: translate(-15px, 10px) scale(1.5);
      }
      50% {
        opacity: 0.8;
        transform: translate(-35px, 20px) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-60px, 35px) scale(0.5);
      }
    }

    /* نجوم للوضع الليلي */
    .okami-star-small {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #fff;
      border-radius: 50%;
      opacity: 0;
      animation: okamiStarTwinkle 4s ease-in-out forwards;
    }

    @keyframes okamiStarTwinkle {
      0%, 100% {
        opacity: 0;
      }
      10%, 90% {
        opacity: 0;
      }
      30%, 70% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }
    
    *:focus,
*:active {
  outline: none !important;
  box-shadow: none !important;
}

a, a:focus, a:active {
  -webkit-tap-highlight-color: transparent !important;
}