:root {
    /* Light theme (default) */
    --border-color: #dadce0;
    --input-bg: #ffffff;
    --text-color: #202124;
    --focus-color: #1a73e8;
    --focus-shadow: rgba(26, 115, 232, 0.2);
    --hover-color: #b8b9bc;
    --form-bg: #ffffff;
    --form-border: #dadce0;
    --label-color: #5f6368;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark theme */
        --border-color: #5f6368;
        --input-bg: #202124;
        --text-color: #e8eaed;
        --focus-color: #8ab4f8;
        --focus-shadow: rgba(138, 180, 248, 0.2);
        --hover-color: #9aa0a6;
        --form-bg: #202124;
        --form-border: #5f6368;
        --label-color: #9aa0a6;
    }
}

/* Force light theme for now (can be removed later) */
[data-theme="light"] {
    --border-color: #dadce0;
    --input-bg: #ffffff;
    --text-color: #202124;
    --focus-color: #1a73e8;
    --focus-shadow: rgba(26, 115, 232, 0.2);
    --hover-color: #b8b9bc;
    --form-bg: #ffffff;
    --form-border: #dadce0;
    --label-color: #5f6368;
}

[data-theme="dark"] {
    --border-color: #5f6368;
    --input-bg: #202124;
    --text-color: #e8eaed;
    --focus-color: #8ab4f8;
    --focus-shadow: rgba(138, 180, 248, 0.2);
    --hover-color: #9aa0a6;
    --form-bg: #202124;
    --form-border: #5f6368;
    --label-color: #9aa0a6;
}

a, body, div, p, img, h1, h2, h3, h4, h5, header, nav, main, section {
    padding: 0px;
    margin: 0px;
}
body {
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   display: flex;
   flex-direction: column;
   text-align: center;
   background-color: rgb(22, 22, 22);
}
main {
   margin: 0px auto;
   width: 100%;
   overflow: hidden;
   min-height: 100vh;
}
h1 {
   font-size: 4.5rem;
   text-align: center;
}
h2 {
   font-size: 4rem;
}
header {
   width: 100%;
   text-align: center;
   min-height: 100vh;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   background-image: url('/assets/images/bg.webp');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   justify-content: center;
}
a {
   text-decoration: none;
}
.logo {
   font-size: 8rem;
}
#info {
   display: flex;
   justify-content: center;
   align-items: center;
   background: #000;
   min-height: 100vh;
}
.info-container {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: left;
   flex-wrap: wrap;
}
.info-container .info {
   padding: 20px;
   max-width: 500px;
   font-size: 2rem;
}
.info-container .info div.name {
   font-size: 2.5rem;
   color: #c40000;
   display: inline-block;
}
.info-container .logo {
   font-size: 10rem;
}
.text-container {
   padding: 20px;
}
.text-container p {
   font-size: 2rem;
   max-width: 500px;
   margin: 0px auto;
   padding: 10px;
}
#form-container {
   padding: 20px;
}
form {
   max-width: 600px;
   margin: 0px auto;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   background-color: var(--form-bg);
   border: 1px solid var(--form-border);
   border-radius: 12px;
   overflow: hidden;
}
form .section-container {
   padding:2rem;
   display: flex;
   flex-direction: column;
   gap: 2rem;
}
form hr {
   height: 2px;
   background: rgb(30, 30, 30);
   border: none;
}
form .row {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}
form .row input,
form .row span,
form .row select,
form .row textarea {
   display: block;
   width: 100%;
   text-align: left;
}
form .row textarea {
   height: 120px;
}
form h3 {
   font-size: 2rem;
}
form .row span {
   font-size: 0.875rem;
   color: var(--label-color);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
form .row input,
form .row select,
form .row textarea {
   padding: 12px 16px;
   font-size: 1rem;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   background-color: var(--input-bg);
   color: var(--text-color);
   transition: all 0.2s ease;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

form .row input:focus,
form .row select:focus,
form .row textarea:focus {
   outline: none;
   border-color: var(--focus-color);
   box-shadow: 0 0 0 2px var(--focus-shadow);
}

form .row input:hover,
form .row select:hover,
form .row textarea:hover {
    border-color: var(--hover-color);
}
form .row input[type="submit"] {
   transition: 1s ease all;
   text-align: center;
   background-color: rgb(15, 15, 15);
   border: unset;
   padding: 10px;
   font-size: 1.5rem;
   box-shadow: 0px 5px 5px rgb(48, 48, 48);
   color: white;
   text-transform: uppercase;
   cursor: pointer;
   margin-top: 10px;
   border-radius: 5px;
   font-weight: bold;
}
form .row input[type="submit"]:hover {
   background-color: rgb(0, 0, 0);
}
#reviews {
   padding: 50px 0px;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

#reviews h2 {
   text-align: center;
   font-size: 3rem;
   color: #fff;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.reviews-container {
   position: relative;
   margin: 0 auto;
   max-width: 1400px;
   overflow: hidden;
}

.reviews-row {
   display: flex;
   margin: 2rem 0;
   position: relative;
   width: max-content;
}

.reviews-row.top {
   animation: scrollLeft 100s linear infinite;
}

.reviews-row.bottom {
   animation: scrollRight 110s linear infinite;
}

.reviews-row:hover {
   animation-play-state: paused;
}

@keyframes scrollLeft {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
   0% { transform: translateX(-50%); }
   100% { transform: translateX(0); }
}

.reviews {
   display: flex;
   gap: 1.5rem;
   flex-shrink: 0;
}

.reviews-container:hover .reviews-row {
   animation-play-state: paused;
}
#reviews .review {
   width: 450px;
   background: linear-gradient(145deg, #2a2a2a, #1f1f1f);
   border-radius: 16px;
   display: flex;
   flex-direction: row;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   overflow: visible;
   height: 200px;
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.3s ease;
   flex-shrink: 0;
}

#reviews .review:hover {
   transform: translateY(-8px);
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
   border-color: rgba(196, 0, 0, 0.3);
}
.review .img-container {
   width: 140px;
   height: 200px;
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
}

.review .img-container::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 40px;
   background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.review img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.review:hover img {
   transform: scale(1.1);
}

#reviews .review h4 {
   font-size: 1.25rem;
   color: #fff;
   font-weight: 600;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
   height: 1.5rem;
   line-height: 1.5rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

#reviews .data {
   padding: 1rem;
   padding-right: 2rem;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   gap:0.5rem;
}

#reviews .data p {
   font-size: 1rem;
   color: #e0e0e0;
   line-height: 1.4;
   flex: 1;
}

#reviews .data .type {
   font-size: 3rem;
   position: absolute;
   top: -15px;
   right: -15px;
   color: rgba(196, 0, 0, 0.9);
   text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
   transition: all 0.3s ease;
   z-index: 3;
   animation: float 3s ease-in-out infinite;
}

.review:hover .data .type {
   color: rgba(196, 0, 0, 1);
   transform: scale(1.2) rotate(10deg);
   box-shadow: 0 8px 25px rgba(196, 0, 0, 0.4), 0 4px 15px rgba(0, 0, 0, 0.6);
   animation-play-state: paused;
}

@keyframes float {
   0%, 100% { transform: translateY(0px) rotate(0deg); }
   25% { transform: translateY(-5px) rotate(8deg); }
   50% { transform: translateY(-10px) rotate(0deg); }
   75% { transform: translateY(-5px) rotate(-8deg); }
}

.reviews-fade {
   position: absolute;
   top: 0px;
   bottom: 0px;
   width: 120px;
   z-index: 10;
   pointer-events: none;
}

.reviews-fade.left {
   left: 0;
   background: linear-gradient(90deg, rgba(26, 26, 26, 1) 0%, rgba(26, 26, 26, 0) 100%);
}

.reviews-fade.right {
   right: 0;
   background: linear-gradient(-90deg, rgba(26, 26, 26, 1) 0%, rgba(26, 26, 26, 0) 100%);
}
.list {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}
.list a {
   padding: 10px;
   background: rgba(114, 114, 114, 0.508);
   border-radius: 5px;
   margin: 10px;
   color: white;
   font-size: 1.2rem;
   display: block;
   max-width: 280px;
   width: 100%;
   box-shadow: 0px 2px 2px black;
   text-transform: uppercase;
   font-weight: bold;
}
.list a b {
   font-size: 2rem;
}
footer {
   background: black;
   padding: 20px;
   font-size: 1.5rem;
   z-index: 999;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
footer a {
   color: white;
}
footer span {
   font-size: 1rem;
}
@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}
@keyframes fadeOut {
   from { opacity: 1; }
   to { opacity: 0; }
}
#message.show {
   visibility: visible;
   animation: fadeIn 1s;
   top: 20px;
   overflow: hidden;
}
#message.hide {
   visibility: hidden;
   animation: fadeOut 1s;
   top: -40px;
}
#message {
   transition: all 0.3s ease;
   margin: 0px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: white;
   visibility: hidden;
   position: fixed;
   z-index: 1;
   top: -40px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   padding: 0.75rem 1.5rem;
   border-radius: 8px;
   max-width: 400px;
   text-align: center;
}
#message h5 {
   font-size: 0.9rem;
   margin: 0px 0px 0.25rem 0px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
#message p.info {
   font-size: 0.85rem;
   margin: 0px;
   line-height: 1.3;
}
.success {
   background-color: green;
}
.fail {
   background-color: red;
}
@media screen and (max-width: 600px) {
   h1 {
       font-size: 2.5rem;
   }
   #reviews .review {
       width: 320px;
       height: 160px;
   }
   .review .img-container {
       width: 100px;
       height: 160px;
   }
   .reviews-fade {
       width: 80px;
       top: -40px;
       bottom: -40px;
   }
   .reviews-row.top {
       animation-duration: 30s;
   }
   .reviews-row.bottom {
       animation-duration: 35s;
   }
   #reviews .review h4 {
       font-size: 1rem;
   }
   #reviews .review p {
       font-size: 0.8rem;
   }
   .reviews-row.top {
       animation: scrollLeft 150s linear infinite;
   }
   
   .reviews-row.bottom {
       animation: scrollRight 160s linear infinite;
   }
}

.down-arrow {
   position: absolute;
   top: calc(100vh - 80px);
   left: calc(50% - 14px);
   width: 0;
   height: 30px;
   border: 2px solid;
   border-radius: 2px;
   animation: jumpInfinite 1.5s infinite;
   color: rgba(67, 67, 67, 1);
}
.down-arrow:after {
   content: " ";
   position: absolute;
   top: 12px;
   left: -10px;
   width: 16px;
   height: 16px;
   border-bottom: 4px solid;
   border-right: 4px solid;
   border-radius: 4px;
   transform: rotateZ(45deg);
}
@keyframes jumpInfinite {
   0% { margin-top: 0; }
   50% { margin-top: 20px; }
   100% { margin-top: 0; }
}
.subscribe-button {
   display: inline-block;
   background: #c40000;
   color: white;
   text-decoration: none;
   padding: 15px 30px;
   border-radius: 5px;
   margin-top: 20px;
   font-size: 1.2rem;
   transition: background 0.3s ease;
   text-transform: uppercase;
   font-weight: bold;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.subscribe-button:hover {
   background: #a30000;
   transform: translateY(-2px);
   box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4);
}
#useLocationBtn {
   transition: all 0.3s ease;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
#useLocationBtn:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#useLocationBtn:disabled {
   cursor: not-allowed;
   opacity: 0.7;
}
@keyframes pulse {
   0% { opacity: 1; }
   50% { opacity: 0.7; }
   100% { opacity: 1; }
}
#useLocationBtn:disabled {
   animation: pulse 1.5s infinite;
}

gmp-place-autocomplete {
   flex: 2;
   /* Style the Google Places input to match our theme */
   --gmpx-color-surface: var(--input-bg);
   --gmpx-color-on-surface: var(--text-color);
   --gmpx-color-outline: var(--border-color);
   --gmpx-color-primary: var(--focus-color);
   --gmpx-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   --gmpx-font-size-base: 1rem;
   --gmpx-border-radius: 8px;
   --gmpx-color-outline-variant: var(--hover-color);
}

/* Platform selector styles */
.platform-selector {
   width: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.platform-options {
   width: 100%;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
   align-items: center;
}

.platform-option {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem;
   border: 2px solid #555;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: rgba(255, 255, 255, 0.05);
   flex:1;
}

.platform-option:hover {
   border-color: #c40000;
   background-color: rgba(196, 0, 0, 0.1);
   transform: translateY(-2px);
}

/* Xbox hover - Green */
.platform-option[data-platform="xbox"]:hover {
   border-color: #28a745;
   background-color: rgba(40, 167, 69, 0.1);
   transform: translateY(-2px);
}

/* PC hover - Red (default) */
.platform-option[data-platform="pc"]:hover {
   border-color: #c40000;
   background-color: rgba(196, 0, 0, 0.1);
   transform: translateY(-2px);
}

/* PlayStation hover - Blue */
.platform-option[data-platform="playstation"]:hover {
   border-color: #007bff;
   background-color: rgba(0, 123, 255, 0.1);
   transform: translateY(-2px);
}

.platform-option.selected {
   border-color: #c40000;
   background-color: rgba(196, 0, 0, 0.2);
   box-shadow: 0 4px 12px rgba(196, 0, 0, 0.3);
}

/* Xbox selection - Green */
.platform-option[data-platform="xbox"].selected {
   border-color: #28a745;
   background-color: rgba(40, 167, 69, 0.2);
   box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* PC selection - Red (default) */
.platform-option[data-platform="pc"].selected {
   border-color: #c40000;
   background-color: rgba(196, 0, 0, 0.2);
   box-shadow: 0 4px 12px rgba(196, 0, 0, 0.3);
}

/* PlayStation selection - Blue */
.platform-option[data-platform="playstation"].selected {
   border-color: #007bff;
   background-color: rgba(0, 123, 255, 0.2);
   box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.platform-icon {
   width: 48px;
   height: 48px;
   filter: brightness(0) invert(1);
   transition: all 0.3s ease;
   /* Ensure SVGs scale properly */
   object-fit: contain;
}

.platform-option.selected .platform-icon {
   filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(0deg);
}

/* Hover effect for icons */
.platform-option:hover .platform-icon {
   transform: scale(1.1);
}

.platform-label {
   font-size: 1rem;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* Game selector styles */
.game-selector {
   width: 100%;
}

.game-options {
   display: flex;
   gap: 0.5rem;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
}

.game-option {
font-size: 0.8rem;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 0.5rem;
   border: 2px solid #555;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: rgba(255, 255, 255, 0.05);
   
   position: relative;
}

.game-option:hover:not(.disabled) {
   border-color: #c40000;
   background-color: rgba(196, 0, 0, 0.1);
   transform: translateY(-2px);
}

.game-option.selected {
   border-color: #c40000;
   background-color: rgba(196, 0, 0, 0.2);
   box-shadow: 0 4px 12px rgba(196, 0, 0, 0.3);
}

.game-option.disabled {
   opacity: 0.3;
   cursor: not-allowed;
   filter: grayscale(100%);
}

.game-option.disabled:hover {
   transform: none;
   border-color: #555;
   background-color: rgba(255, 255, 255, 0.05);
}

.game-option:hover:not(.disabled) {
   transform: translateY(-2px);
}

.form-row .game-label {
   font-size: 0.8rem;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-align: center;
}

.game-option.disabled .game-label {
   color: #888;
}

.no-subscribers {
   text-align: center;
   padding: 2rem;
   margin: 2rem 0;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.no-subscribers p {
   margin: 0.5rem 0;
   font-size: 1.1rem;
   color: #ccc;
}

.no-subscribers p:first-child {
   font-size: 1.3rem;
   color: #fff;
   font-weight: bold;
}

#address-container {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}