:root {
          /* Modern Dark Theme */
          --bg-color: #121212; /* Dark background */
          --text-color: #E0E0E0; /* Light text */
          --header-bg: #1E1E1E; /* Slightly lighter header */
          --primary-color: #f0870e; /* Purple accent */
          --primary-hover: #fff; /* Darker purple */
          --card-bg: #1E1E1E; /* Card background */
          --border-color: #333333; /* Borders */
          --search-bg: #2D2D2D; /* Search field */
          --section-title-color: #f0870e; /* Section titles */
          --icon-color: #03DAC6; /* Teal accent */
          --active-tab-bg: rgba(187, 134, 252, 0.1); /* Active tab */
          --detail-separator: rgba(255, 255, 255, 0.1); /* Separators */
          --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Card shadow */
          --highlight-color: #f0870e; /* Highlights */
          --rating-color: #FFD700; /* Gold for ratings */
          --success-color: #03DAC6; /* Teal for success */
          --warning-color: #FFA500; /* Orange for warnings */
          --error-color: #CF6679; /* Error color */
          --android-color: #3DDC84; /* Android green */
          --ios-color: #007AFF; /* iOS blue */
          --size-color: #03DAC6; /* Size indicator */
          --download-color: #f0870e; /* Download button */
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Product Sans', sans-serif;
          letter-spacing: -0.3px;
      }
      
      body {
          background-color: var(--header-bg);
          color: var(--text-color);
          line-height: 1.6;
          transition: all 0.3s ease;
          padding-bottom: 0;
          user-select: none;
      }
      
      .container {
          max-width: 600px;
          margin: auto;
          padding: 15px;
          overflow: hidden;
          background-color: var(--bg-color);
          border-radius: 30px;
          min-height: calc(100vh - 80px);
          position: relative;
      }
      
      @media (min-width: 768px) {
          .container {
              width: 100%;
              max-width: 1200px;
              margin-top: 30px;
              min-height: calc(100vh - 120px);
              border-radius: 40px 40px 0 0;
              display: flex;
              flex-direction: column;
          }
      }
      
      header {
          background-color: var(--header-bg);
          padding: 15px 15px;
          position: sticky;
          top: 0;
          z-index: 100;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 0 0 20px 20px;
          transition: all 0.3s ease;
      }
      
      header.shrink {
          padding: 5px 15px;
      }
      
      @media (min-width: 768px) {
          header.shrink {
              padding: 30px 15px;
          }
      }
      
      .header-right {
          display: flex;
          align-items: center;
          gap: 10px;
      }
      
      .logo-dark {
          display: block;
          width: 40px;
          height: 30px;
          margin-left: 1px;
      }
      
      .search-container {
          flex: 1;
          position: relative;
      }
      
      .fa-star {
          color: var(--rating-color);
      }
      
      .search-input::placeholder {
          color: var(--text-color);
          font-size: 16px;
          font-weight: 400;
          opacity: 0.7;
      }
      
      .search-input {
          width: 200px;
          padding: 12px 15px 12px 40px;
          border-radius: 15px;
          border: none;
          background-color: var(--search-bg);
          color: var(--text-color);
          font-size: 15px;
          transition: all 0.3s;
      }
      
      .search-input:focus {
          outline: none;
          box-shadow: 0 0 0 2px var(--primary-color);
      }
      
      .search-icon {
          position: absolute;
          left: 15px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--text-color);
          cursor: pointer;
      }
      
      .searching .search-icon {
          animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
          0% { transform: translateY(-50%) rotate(0deg); }
          100% { transform: translateY(-50%) rotate(360deg); }
      }
      
      .search-loading {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: none;
          justify-content: center;
          align-items: center;
          z-index: 10;
          width: 100%;
          height: 100%;
      }
      
      .search-loading.active {
          display: flex;
      }
      
      .search-spinner {
          width: 50px;
          height: 50px;
          border: 5px solid rgba(187, 134, 252, 0.2);
          border-radius: 50%;
          border-top-color: var(--primary-color);
          animation: spin 1s ease-in-out infinite;
      }
        
      .games-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          margin-top: 4px;
          position: relative;
          min-height: 200px;
          margin-bottom: 40px;
      }
      
      @media (min-width: 768px) {
          .games-grid {
              grid-template-columns: repeat(3, 1fr);
              gap: 15px;
          }
      }
      
      @media (min-width: 1024px) {
          .games-grid {
              grid-template-columns: repeat(4, 1fr);
          }
      }
      
      .game-card {
          background-color: var(--card-bg);
          border-radius: 16px;
          padding: 10px 15px;
          box-shadow: var(--card-shadow);
          transition: transform 0.2s, box-shadow 0.2s;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          opacity: 0;
          transform: translateY(20px);
          animation: cardEntrance 0.5s ease forwards;
          animation-delay: calc(var(--order) * 0.1s);
          position: relative;
      }
      
      @keyframes cardEntrance {
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
      
      .game-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
      }
      
      .game-icon-container {
          position: relative;
          display: flex;
          justify-content: center;
          margin-bottom: 10px;
      }
      
      .game-icon {
          width: 90px;
          height: 90px;
          background-color: #f0f0f0;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
      }
      
      .game-icon img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      
      .game-title {
          font-size: 16px;
          font-weight: bold;
          margin: 5px 0;
          text-align: center;
          color: var(--text-color);
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.2;
          flex-grow: 1;
      }
      
      .game-details {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin: auto;
      }
      
      .detail-row {
          display: flex;
          justify-content: center;
          gap: 15px;
      }
      
      .detail-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          line-height: 1.2;
          min-width: 60px;
      }
      
      .detail-item:not(:last-child)::after {
          content: '';
          position: absolute;
          right: -8px;
          top: 50%;
          transform: translateY(-50%);
          height: 60%;
          width: 1px;
          background-color: var(--detail-separator);
      }
      
      .detail-label {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 11px;
          color: #97A6BD;
          margin-bottom: 3px;
      }
      
      .detail-value {
          font-size: 12px;
          font-weight: 500;
          color: var(--text-color);
          text-align: center;
      }
      
      .platform-item {
          display: flex;
          align-items: center;
          gap: 5px;
          margin: 3px 0;
      }
      
      .fa-android {
          font-size: 14px;
          color: var(--android-color);
      }
      
      .fa-apple {
          font-size: 15px;
          color: var(--ios-color);
      }
      
      .install-btn {
          background-color: var(--primary-color);
          color: #121212;
          border: none;
          border-radius: 10px;
          padding: 8px 12px;
          font-size: 13px;
          font-weight: 600;
          margin-top: 10px;
          cursor: pointer;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
      }
      
      .install-btn:hover {
          background-color: var(--primary-hover);
          transform: translateY(-2px);
      }
      
      .install-btn i {
          font-size: 14px;
      }
      
      .app-detail-view {
          position: fixed;
          top: 72px;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: var(--bg-color);
          z-index: 2000;
          overflow-y: auto;
          transform: translateY(100%);
          transition: transform 0.4s ease-out;
          max-width: 600px;
          margin: 0 auto;
          border-radius: 30px 30px 0 0;
      }

      @media (min-width: 768px) {
          .app-detail-view {
              left: auto;
              width: 100%;
              right: 0;
              max-width: 600px;
              top: 120px;
          }
      }

      .app-detail-view.active {
          transform: translateY(0);
      }
      
      .app-detail-view.active ~ .container .games-grid .game-card {
          display: none !important;
      }
      
      .app-detail-cover {
          width: 100%;
          height: 180px;
          position: relative;
          overflow: hidden;
      }
      
      .app-detail-cover img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: blur(5px);
          opacity: 0.8;
      }
      
      .close-detail {
          position: absolute;
          top: 15px;
          right: 15px;
          background-color: transparent;
          border: none;
          color: white;
          width: 26px;
          height: 23px;
          border-radius: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 2;
          border: 2px solid white;
      }
      
      .close-detail i {
          font-size: 20px;
          color: white;
      }
      
      .app-detail-content {
          padding: 20px;
          margin-top: -40px;
          position: relative;
          z-index: 1;
      }
      
      .app-detail-header {
          display: flex;
          align-items: flex-end;
          margin-bottom: 20px;
      }
      
      .app-detail-icon {
          width: 100px;
          height: 100px;
          border-radius: 20px;
          overflow: hidden;
          margin-right: 15px;
          background-color: var(--card-bg);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          position: relative;
          top: -10px;
          border: 1px solid var(--bg-color);
      }

      .app-detail-icon img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      
      .app-detail-title {
          font-size: 20px;
          font-weight: bold;
          color: var(--text-color);
          margin-bottom: 10px;
          flex: 1;
      }
      
      .app-detail-info {
          display: flex;
          justify-content: space-between;
          margin: 0px 0;
          flex-wrap: wrap;
          gap: 15px;
          padding: 0 0 5px;
      }
      
      .app-detail-info-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 70px;
          flex: 1;
          position: relative;
      }
      
      .app-detail-info-item:not(:last-child)::after {
          content: '';
          position: absolute;
          right: -8px;
          top: 50%;
          transform: translateY(-50%);
          height: 60%;
          width: 1px;
          background-color: var(--detail-separator);
      }
      
      .app-detail-info-label {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 10px;
          color: #97A6BD;
          margin-bottom: 5px;
      }
      
      .app-detail-ifo-label i {
          color: var(--primary-color);
          font-size: 12px;
      }
      
      .app-detail-info-value {
          font-size: 13px;
          font-weight: 500;
          color: var(--text-color);
      }
      
      .app-detail-install-btn {
          background-color: var(--primary-color);
          color: #121212;
          padding: 14px 24px;
          font-size: 16px;
          font-weight: 600;
          border: none;
          border-radius: 12px;
          cursor: pointer;
          box-shadow: 0 0px 0px rgba(187, 134, 252, 0.3);
          margin-top: 5px;
          width: 100%;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
      }
      
      .app-detail-install-btn:hover {
          background-color: var(--primary-hover);
          transform: translateY(-2px);
      }
      
      .app-detail-features {
          text-align: left;
          margin-top: 20px;
      }
      
      .app-detail-features h3 {
          font-size: 16px;
          margin-bottom: 10px;
          color: var(--text-color);
      }
      
      .app-detail-features ul {
          padding-left: 20px;
      }
      
      .app-detail-features li {
          margin-bottom: 8px;
          font-size: 14px;
          color: var(--text-color);
      }
      
      .no-results {
          text-align: center;
          padding: 40px 20px;
          grid-column: 1 / -1;
          color: var(--text-color);
          opacity: 0.7;
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
      }
      
      .no-results i {
          font-size: 40px;
          margin-bottom: 15px;
          color: var(--primary-color);
      }

      .no-results p {
          font-size: 16px;
          color: var(--text-color);
      }

      .download-modal {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: var(--card-bg);
          padding-bottom: 20px;
          box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
          z-index: 3000;
          transition: transform 0.3s ease-out;
          max-width: 600px;
          margin: 0 auto;
          transform: translateY(100%);
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          border-top-right-radius: 25px;
          border-top-left-radius: 25px;
      }

      .download-modal.active {
          transform: translateY(0);
      }
      
      .download-header {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          width: 100%;
          padding: 16px;
          background-color: var(--bg-color);
          border-top-right-radius: 25px;
          border-top-left-radius: 25px;
      }
      
      .modified {
          color: var(--primary-color);
          font-size: 10px;
          border: 1px solid var(--primary-color);
          border-radius: 18px;
          text-align: left;
          padding: 0 3px;
          align-self: flex-start;
          font-weight: bold;
          margin-left: -2px;
      }
     
      .download-icon {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          overflow: hidden;
          margin-right: 15px;
      }

      .download-icon img {
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
      
      .titles {
          display: flex;
          flex-direction: column;
      }
      
      .download-title {
          font-size: 16px;
          font-weight: bold;
          text-align: left;
          flex: 1;
          color: var(--text-color);
      }
      
      .circular-progress {
          position: relative;
          width: 240px;
          height: 240px;
          margin-top: 20px;
      }

      .progress-circle {
          fill: none;
          stroke: var(--primary-color);
          stroke-width: 2;
          stroke-linecap: round;
          transform-origin: 50% 50%;
          stroke-dasharray: 30, 300;
          stroke-dashoffset: 0;
          animation: 
              spin 3s linear infinite,
              stretch 3s ease-in-out infinite;
      }

      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

      @keyframes stretch {
          0% { stroke-dasharray: 100, 500; }
          50% { stroke-dasharray: 0, 600; }
          60% { stroke-dasharray: 50, 600; }
          75% { stroke-dasharray: 80, 600; }
          100% { stroke-dasharray: 100, 500; }
      }
     
      .progress-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          width: 100%;
      }

      .progress-text {
          font-size: 16px;
          color: var(--text-color);
          margin-bottom: 5px;
          font-weight: 300;
          animation: pulse 3s infinite;
      }

      .progress-percent {
          font-size: 45px;
          font-weight: lighter;
          color: var(--text-color);
          margin-bottom: 5px;
      }

      .progress-size {
          font-size: 13px;
          color: var(--text-color);
          font-weight: 200;
      }

      .download-message {
          text-align: center;
          margin-top: 15px;
          font-size: 18px;
          color: var(--text-color);
          opacity: 0;
          height: 20px;
          font-weight: 500;
      }

      @keyframes zoomBounceDrop {
          0% { 
              transform: scale(0); 
              opacity: 0; 
          }
          20% { 
              transform: scale(1.2); 
          }
          40% { 
              transform: scale(0.95); 
          }
          60% { 
              transform: scale(1.1); 
          }
          80% { 
              transform: scale(0.98); 
          }
          100% { 
              transform: scale(1); 
              opacity: 1; 
          }
      }

      .message-visible {
          animation: zoomBounceDrop 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }

      @keyframes pulse {
          0% { transform: scale(0.9); opacity: 0.9; }
          50% { transform: scale(1); opacity: 1; }
          100% { transform: scale(0.9); opacity: 1; }
      }

      .overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.8);
          z-index: 2000;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease;
      }

      .overlay.active {
          opacity: 1;
          pointer-events: auto;
      }

      .rights {
          color: #97A6BD;
          font-size: 9px;
          font-weight: 400;
          text-align: center;
          margin-top: auto;
          margin-bottom: 0;
          padding-top: 20px;
          border-top: 1px solid var(--card-bg);
          width: 100%;
          position: relative;
          z-index: 1;
      }
      
      .search-loading.active ~ .container .games-grid {
          visibility: hidden;
      }
      
      .search-loading.active ~ .container .no-results {
          display: none;
      }
      
      .trending-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
          padding: 0 5px;
      }

      .section-title {
          font-size: 20px;
          font-weight: bold;
          color: var(--text-color);
      }

      .view-all-btn {
          background: none;
          border: none;
          color: var(--primary-color);
          font-weight: bold;
          font-size: 14px;
          cursor: pointer;
          padding: 5px 10px;
          border-radius: 10px;
          transition: all 0.3s;
      }

      .view-all-btn:hover {
          background-color: var(--search-bg);
      }
      
      .game-covers-container {
          width: 100%;
          overflow: hidden;
          border-radius: 20px;
          margin-bottom: 20px;
          position: relative;
          height: 180px;
          transition: all 0.3s ease;
      }

      .game-covers-slider {
          display: flex;
          height: 100%;
          transition: transform 0.8s ease;
          width: calc(400% + 30px);
      }

      .game-cover {
          position: relative;
          width: calc(25% - 8px);
          height: 100%;
          border-radius: 20px;
          overflow: hidden;
          cursor: pointer;
          flex-shrink: 0;
          margin-right: 10px;
      }

      .game-cover:last-child {
          margin-right: 0;
      }

      .game-cover::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
              to right,
              rgba(0, 0, 0, 0.8) 0%,
              rgba(0, 0, 0, 0.7) 25%,
              rgba(0, 0, 0, 0.4) 50%,
              rgba(0, 0, 0, 0.1) 75%,
              rgba(0, 0, 0, 0) 100%
          );
          z-index: 2;
          pointer-events: none;
      }

      .game-cover img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      .cover-info {
          position: absolute;
          left: 20px;
          bottom: 40px;
          color: white;
          text-shadow: 0 1px 3px rgba(0,0,0,0.5);
          max-width: 70%;
          z-index: 2;
      }
      
      .game-name {
          font-size: 20px;
          margin-bottom: 6px;
          font-weight: 600;
      }
      .game-rating {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 15px;
          margin-bottom: 8px;
      }

      .game-rating i {
          color: #FFD700;
      }
      .cover-dots {
          position: absolute;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 6px;
          z-index: 3;
      }

      .cover-dots .dot {
          width: 6px;
          height: 6px;
          background: #bbb;
          border-radius: 50%;
          transition: background 0.3s;
      }

      .cover-dots .dot.active {
          background: #fff;
      }

      .locker-iframe {
          width: 100%;
          height: 450px;
          border: none;
          border-radius: 10px;
          margin-top: 20px;
          display: none;
      }

      .locker-iframe.active {
          display: block;
      }

      .close-download {
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: transparent;
          border: none;
          color: white;
          width: 26px;
          height: 23px;
          border-radius: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 2;
          border: 2px solid white;
      }

      .close-download i {
          font-size: 20px;
          color: white;
      }