/* =====================
   Global / Inspired by Awwwards-Winning-Website    
   Modern dark + neon accent, smooth animations, responsive
   ===================== */
:root{
  --bg:#06060a; /* deep space */
  --card:#0f1115;
  --muted:#97a0b3;
  --accent:#ffcc00; /* warm neon */
  --accent-2:#00e6ff; /* electric cyan */
  --glass: rgba(255,255,255,0.03);
  --radius:16px;
  --max-width:1100px;
  --page-pad:2rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(0,230,255,0.03), transparent),
              radial-gradient(900px 500px at 90% 90%, rgba(255,204,0,0.02), transparent),
              var(--bg);
  color:#e9eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-bottom:4rem;
}

a{color:inherit}

header{
  position:sticky;top:0;z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(10,10,12,0.6), rgba(10,10,12,0.35));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  display:flex;align-items:center;justify-content:space-between;padding:1rem var(--page-pad);
}
.brand{display:flex;align-items:center;gap:0.75rem}
.logo{
  width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#0b0b0b;
  box-shadow:0 6px 30px rgba(0,0,0,0.6), 0 0 18px rgba(0,230,255,0.06) inset;
}
h1.logo-text{font-size:1rem;margin:0}

nav{display:flex;gap:1rem;align-items:center}
nav a{color:var(--muted);text-decoration:none;padding:0.5rem 0.6rem;border-radius:8px}
nav a:hover{color:var(--accent);background:rgba(255,255,255,0.02)}

/* Landing hero */
.hero{
  max-width:var(--max-width);margin:2.25rem auto;
  padding:2.25rem;
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:center;
}
.hero-left {
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.kicker{font-weight:600;color:var(--accent);letter-spacing:1px}
.hero-title{font-size:clamp(2rem,4vw,3rem);margin:0.25rem 0 1rem}
.hero-desc{color:var(--muted);font-size:1rem}
.cta-row{margin-top:1.6rem;display:flex;gap:1rem;align-items:center}

.btn{display:inline-flex;align-items:center;gap:0.6rem;padding:0.8rem 1.1rem;border-radius:12px;font-weight:600;cursor:pointer;background:linear-gradient(90deg,var(--accent),#f7e38a);color:#0b0b0b;border:none}
.btn.alt{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--accent-2)}

.hero-right{display:flex;flex-direction:column;gap:1rem;align-items:stretch}
.preview-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius:12px;padding:0.5rem;}
.game-art{
  width:100%;
  height:260px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(10,10,10,0.8), rgba(20,20,22,0.8));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:600;
  overflow:hidden; /* Better image handling */
}

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

/* Subscribe */
.subscribe{margin-top:1rem;padding:1rem;border-radius:12px;background:var(--glass);display:flex;gap:0.6rem}
.subscribe input[type="email"]{flex:1;padding:0.6rem 0.8rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.subscribe button{padding:0.55rem 0.9rem;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent-2),#66fff5);font-weight:700;cursor:pointer}
.subscribe-btn {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg,#4bbf73,#379a5b); /* Green gradient */
  color: #fff;
  box-shadow: 0 2px 8px rgba(76,191,115,0.08);
  transition: background 0.2s, box-shadow 0.2s;
  width: auto;
  min-width: 120px; /* smaller min-width */
  max-width: 220px; /* prevent stretching */
  margin-top: 0.7rem;
  display: block;
  margin-left: 0;
}
.subscribe-btn:hover {
  background: linear-gradient(90deg,#379a5b,#4bbf73);
  box-shadow: 0 4px 16px rgba(76,191,115,0.15);
}

/* Sections */
section{max-width:var(--max-width);margin:2rem auto;padding:1rem var(--page-pad)}

.about-card {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.about-left {
  flex: 2 1 320px;
  min-width: 220px;
}

.about-right {
  flex: 1 1 320px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: auto; /* Prevent going above .about-left */
}

@media (max-width: 900px) {
  .about-card {
    flex-direction: column;
    gap: 1.2rem;
  }
  .about-left, .about-right {
    width: 100%;
    flex: unset;
  }
  .about-right {
    margin-top: 1.2rem;
  }
}

.blog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.post{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.02);
  transition: all 0.3s ease;
}
.post:hover {
  border-color: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}
.post h3 {
  margin: 0.5rem 0;
  color: var(--accent);
}
.post img {
  width: 100%;
  border-radius: 8px;
  margin-top: 0.8rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.post p {
  margin: 0.6rem 0;
}
.post ul, .post ol {
  margin: 0.6rem 0;
  padding-left: 1.5rem;
}
.post blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: var(--muted);
}
.post code {
  background: rgba(255,255,255,0.05);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

/* Blog post styles */
.blog-post {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.02);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.blog-post:hover {
  border-color: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.post-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--accent-2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-small:hover {
  background: rgba(255,255,255,0.05);
}

.btn-small.delete {
  color: var(--accent);
  border-color: rgba(255,204,0,0.3);
}

.post-title {
  margin: 0.5rem 0;
  color: var(--accent);
  font-size: 1.25rem;
}

.post-content {
  margin-top: 0.75rem;
}

.post-content h1, .post-content h2, .post-content h3 {
  color: var(--accent);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.post-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 0.75rem 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

footer{max-width:var(--max-width);margin:3rem auto 1rem;padding:1rem var(--page-pad);color:var(--muted);display:flex;justify-content:space-between;align-items:center}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: var(--card);
  margin: 10% auto;
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideIn 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--muted);
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}

/* Enhanced modal styles */
.admin-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.admin-modal-content {
  background: var(--card);
  margin: 15% auto;
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideIn 0.3s ease;
  text-align: center;
}

.admin-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--muted);
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.admin-modal-close:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(-20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fixed bottom controls - positioned at very bottom of page */
.bottom-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(6, 6, 10, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.5rem 1rem;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.bottom-controls-left {
  color: var(--muted);
  font-size: 0.75rem;
}

.bottom-controls-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bottom-controls select {
  background: var(--card);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  min-width: 80px;
}

.bottom-controls .admin-btn {
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: var(--card);
}

.bottom-controls .admin-btn:hover {
  opacity: 1;
}

.bottom-controls .admin-btn.admin-logged-in {
  color: var(--accent);
}

/* Adjust body to account for fixed bottom controls */
body {
  padding-bottom: 60px; /* Space for bottom controls */
}

/* small screens */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:1rem}
  .hero-right{order:-1}
  header{padding:0.6rem 1rem}
  .about-right{width:100%}
  .preview-card {
    height: auto;
  }
  .gallery-row {
    flex-direction: column;
    height: auto;
  }
  .gallery-row img {
    max-width: 100%;
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* Hide company info on small screens */
@media (max-width: 1000px) {
  .brand > div > div {
    display: none;
  }
}

/* subtle entrance animations inspired by the tutorial */
.fade-up{opacity:0;transform:translateY(12px);animation:fadeUp 0.7s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Slideshow image animation */
.slideshow-img {
  animation: slideIn 0.6s cubic-bezier(.77,0,.18,1) both;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}