@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root {
   --bg: #1C1C1D;
   --grid: rgba(255, 255, 255, 0.035);
   --grid-size: 48px;
   --panel: rgba(20, 20, 22, 0.74);
   --panel-strong: rgba(16, 16, 18, 0.9);
   --line: rgba(255, 255, 255, 0.1);
   --soft: rgba(255, 255, 255, 0.68);
}

* {
   box-sizing: border-box;
}

html,
body {
   width: 100%;
   min-height: 100%;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}

html {
   background: var(--bg);
}

body {
   min-height: 100vh;
   background-color: var(--bg);
   background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
   background-size: var(--grid-size) var(--grid-size);
   background-position: 0 0;
   background-attachment: fixed;
   color: white;
   font-family: "Poppins", sans-serif;
   text-align: center;
}

#particles-js,
.particles-js-canvas-el {
   display: none !important;
}

html.in-frame.minecraft-theme,
html.in-frame.minecraft-theme body,
html.in-frame.theme-minecraft,
html.in-frame.theme-minecraft body {
   background: transparent !important;
   background-color: transparent !important;
   background-image: none !important;
}

html.minecraft-theme:not(.in-frame),
html.minecraft-theme:not(.in-frame) body {
   background: #000;
   background-image: none;
}

html.minecraft-theme body::before,
html.minecraft-theme body::after {
   display: none;
   content: none;
}

html.minecraft-theme #minecraft-theme-layer {
   position: fixed;
   inset: 0;
   width: 100vw;
   height: 100vh;
   z-index: 0;
   pointer-events: none;
   overflow: hidden;
   background: #000;
}

html.minecraft-theme #minecraft-theme-layer canvas {
   display: block;
   width: 100%;
   height: 100%;
}

nav,
main,
.results,
.movie,
#player-container,
.source-box {
   position: relative;
   z-index: 1;
}

nav {
   width: 100%;
   min-height: 68px;
   padding: 0 28px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: rgba(19, 19, 21, 0.88);
   border-bottom: 1px solid rgba(255, 255, 255, 0.07);
   backdrop-filter: blur(14px);
}

html.minecraft-theme nav {
   background: rgba(19, 19, 21, 0.62);
   backdrop-filter: blur(10px);
}

nav h1 {
   margin: 0;
   font-size: 25px;
   font-weight: 800;
   letter-spacing: -0.05em;
}

nav div {
   display: flex;
   align-items: center;
   gap: 20px;
}

nav a {
   color: rgba(255, 255, 255, 0.76);
   text-decoration: none;
   font-size: 0.95rem;
   font-weight: 700;
   transition: color 150ms ease;
}

nav a:hover {
   color: white;
}

main {
   width: min(1280px, calc(100vw - 44px));
   margin: 0 auto;
   padding: 42px 0 70px;
}

main > h1 {
   margin: 0 0 28px;
   font-size: clamp(34px, 5vw, 54px);
   line-height: 1;
   font-weight: 800;
   letter-spacing: -0.06em;
}

p {
   font-size: 25px;
}

.source-box,
main > div:first-child {
   width: 100%;
   margin: 0 0 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.source-box label,
main > div:first-child label {
   color: white;
   font-size: 1rem;
   font-weight: 700;
}

#player-source {
   height: 30px;
   padding: 0 8px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 7px;
   background: rgba(22, 22, 24, 0.9);
   color: white;
   font-family: "Poppins", sans-serif;
   font-size: 0.88rem;
   outline: none;
}

#search {
   width: min(620px, calc(100vw - 44px));
   height: 52px;
   padding: 0 18px;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 12px;
   outline: none;
   background: rgba(20, 20, 22, 0.76);
   color: white;
   font-family: "Poppins", sans-serif;
   font-size: 15px;
   text-align: center;
   transition:
      background 150ms ease,
      border-color 150ms ease;
}

#search::placeholder {
   color: rgba(255, 255, 255, 0.42);
}

#search:placeholder-shown {
   font-style: italic;
}

#search:focus {
   border-color: rgba(255, 255, 255, 0.28);
   background: rgba(24, 24, 26, 0.92);
}

button {
   padding: 12px 18px;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 12px;
   outline: none;
   background: rgba(20, 20, 22, 0.78);
   color: white;
   font-family: "Poppins", sans-serif;
   cursor: pointer;
   transition:
      background 150ms ease,
      border-color 150ms ease,
      color 150ms ease;
   font-size: 15px;
   font-weight: 700;
}

button:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.22);
   color: white;
}

.results {
   width: min(1280px, calc(100vw - 44px));
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   gap: 22px;
   margin: 24px auto 0;
}

.movie {
   width: 100%;
   padding: 12px;
   border: 1px solid rgba(255, 255, 255, 0.09);
   border-radius: 16px;
   background: var(--panel);
   text-align: center;
   overflow: hidden;
   transition:
      background 150ms ease,
      border-color 150ms ease,
      transform 150ms ease;
}

html.minecraft-theme .movie,
html.minecraft-theme button,
html.minecraft-theme #search,
html.minecraft-theme #player-source {
   background: rgba(22, 22, 24, 0.68);
   backdrop-filter: blur(8px);
}

.movie:hover {
   background: rgba(255, 255, 255, 0.055);
   border-color: rgba(255, 255, 255, 0.18);
   transform: translateY(-3px);
}

.movie img {
   width: 100%;
   aspect-ratio: 2 / 3;
   object-fit: cover;
   border-radius: 12px;
   display: block;
   margin-bottom: 12px;
   background: #111;
}

.movie h2 {
   margin: 10px 0 12px;
   color: white;
   font-size: 1rem;
   line-height: 1.25;
   font-weight: 700;
}

.watch-btn {
   width: 100%;
   padding: 10px;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.055);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: white;
   font-family: "Poppins", sans-serif;
   cursor: pointer;
   transition:
      background 150ms ease,
      border-color 150ms ease;
   font-size: 14px;
   font-weight: 700;
}

.watch-btn:hover {
   background: rgba(255, 255, 255, 0.11);
   border-color: rgba(255, 255, 255, 0.22);
   color: white;
}

#next-page {
   margin: 34px 0 0;
}

#player-container {
   width: min(1500px, calc(100vw - 72px));
   height: min(780px, calc(100vh - 235px));
   margin: 0 auto;
   border-radius: 18px;
   background: #000;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 0;
}

html.minecraft-theme #player-container {
   background: #000;
   backdrop-filter: none;
}

#player-container h1 {
   margin: 0;
   color: white;
   font-size: 1.4rem;
}

iframe,
#player-container iframe {
   width: 100%;
   height: 100%;
   border: none;
   display: block;
   background: #000;
}

body:has(#player-container) {
   height: 100vh;
   overflow: hidden !important;
   display: flex;
   flex-direction: column;
}

body:has(#player-container) nav {
   flex: 0 0 68px;
   height: 68px;
}

body:has(#player-container) main {
   flex: 1;
   width: 100%;
   max-width: none;
   height: calc(100vh - 68px);
   margin: 0;
   padding: 34px 44px 122px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   overflow: hidden !important;
}

body:has(#player-container) .source-box,
body:has(#player-container) main > div:first-child {
   width: 100%;
   margin: 0 0 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex: 0 0 auto;
}

body:has(#player-container) #player-container {
   width: min(1500px, calc(100vw - 88px));
   height: min(600px, calc(100vh - 270px));
   aspect-ratio: 16 / 9;
   margin: 0 auto;
   border-radius: 18px;
   background: #000;
   overflow: hidden !important;
}

body:has(#player-container) iframe,
body:has(#player-container) #player-container iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
   background: #000;
}

body:has(#player-container) *,
body:has(#player-container) *::-webkit-scrollbar {
   scrollbar-width: none !important;
}

body:has(#player-container) *::-webkit-scrollbar {
   width: 0 !important;
   height: 0 !important;
}

* {
   scrollbar-width: thin;
   scrollbar-color: #2f2f34 transparent;
}

*::-webkit-scrollbar {
   width: 8px;
   height: 8px;
}

*::-webkit-scrollbar-track {
   background: transparent;
}

*::-webkit-scrollbar-thumb {
   background: #2f2f34;
   border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
   background: #45454b;
}

*::-webkit-scrollbar-button {
   display: none;
   width: 0;
   height: 0;
}

@media (max-width: 900px) {
   main {
      padding: 28px 14px 100px;
   }

   .source-box,
   main > div:first-child {
      flex-direction: column;
      margin-bottom: 24px;
   }

   #player-container {
      width: calc(100vw - 28px);
      height: min(540px, calc(100vh - 220px));
      border-radius: 14px;
   }

   body:has(#player-container) nav {
      flex-basis: 58px;
      height: 58px;
   }

   body:has(#player-container) main {
      height: calc(100vh - 58px);
      padding: 24px 18px 118px;
   }

   body:has(#player-container) .source-box,
   body:has(#player-container) main > div:first-child {
      margin-bottom: 20px;
   }

   body:has(#player-container) #player-container {
      width: calc(100vw - 36px);
      height: min(500px, calc(100vh - 245px));
      border-radius: 14px;
   }
}

@media (max-width: 700px) {
   nav {
      min-height: 58px;
      padding: 0 16px;
   }

   nav h1 {
      font-size: 20px;
   }

   nav div {
      gap: 12px;
   }

   nav a {
      font-size: 0.86rem;
   }

   main > h1 {
      font-size: 34px;
   }

   .results {
      width: calc(100vw - 28px);
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 14px;
   }

   .movie {
      padding: 9px;
      border-radius: 14px;
   }

   .movie img {
      border-radius: 10px;
   }
}