/* ======================================================
   Myarcticfun.click — Main CSS
   Colors:
     Headings: #dac3ff (with border)
     Text: #ffe1bb
     Accents/buttons: #dac3ff
     Button text: #052105
     Button hover: #ffe1bb
     Active links: #dac3ff
     Background: #052105
   Prefix: .myarcticfun-click
   ====================================================== */

/* Root variables */
:root{
  --bg: #052105;
  --heading: #dac3ff;
  --text: #ffe1bb;
  --accent: #dac3ff;
  --btn-bg: #dac3ff;
  --btn-text: #052105;
  --btn-hover: #ffe1bb;
  --max-width: 900px;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Global reset & body */
*{box-sizing:border-box}
html,body{height:100%}
body.myarcticfun-click{
  margin:0;
  font-family:var(--font-sans);
  background-color:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  scroll-behavior:smooth;
}

/* Links */
a{color:var(--accent); text-decoration:none; transition:color .18s}
a:hover{color:var(--btn-hover)}

/* Container */
.container{max-width:1140px;margin:0 auto;padding:0 1rem}

/* NAVBAR */
.myarcticfun-click-nav{
  background:transparent;
  padding:1rem 0;
  position:flex;
  top:0;
  z-index:60;
}
.myarcticfun-click-nav .nav-logo{max-height:80px}
.myarcticfun-click-nav .nav-link{
  color:var(--text);
  margin:0 .55rem;
  font-weight:600;
}
.myarcticfun-click-nav .nav-link.active,
.myarcticfun-click-nav .nav-link:focus{color:var(--heading); text-shadow:0 0 6px rgba(218,195,255,0.14)}
.navbar-toggler .navbar-toggler-icon{color:var(--heading)}

.myarcticfun-click-play {
  padding: 3rem 1rem;
  background-color: var(--bg);
  color: var(--text);
  text-align: center;
}

.myarcticfun-click-play .section-title {
  color: var(--heading);
  font-size: 2rem;
  margin-bottom: 2rem;
}

/* Wrapper to allow some margins */
.game-wrapper {
  margin-bottom: 2.5rem;
  display: flex;
  justify-content: center;
}

/* The game frame itself */
.game-frame {
  position: relative;
  width: 100%;
  max-width: 900px; /* or some width close to driftpeakhq site width */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* Use padding-top trick to enforce 16:9 ratio */
.game-frame::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 9 / 16 */
}

.game-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .myarcticfun-click-play .section-title {
    font-size: 1.6rem;
  }
  .game-frame {
    max-width: 100%;
  }
}


/* BUTTON */
.myarcticfun-click-btn{
  display:inline-block;
  background:var(--btn-bg);
  color:var(--btn-text);
  padding:.72rem 1.75rem;
  border-radius:8px;
  font-weight:700;
  border:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  transition:transform .15s ease, background .18s ease, color .18s;
}
.myarcticfun-click-btn:hover{ background:var(--btn-hover); color:var(--btn-text); transform:translateY(-3px) }

/* DISCLAIMER CARD */
.myarcticfun-click-disclaimer-card{ padding:3.5rem 1rem; }
.disclaimer-box{
  max-width:900px;
  margin:0 auto;
  background:linear-gradient(180deg, rgba(218,195,255,0.02), rgba(0,0,0,0.02));
  border:1px solid rgba(218,195,255,0.08);
  padding:1.25rem;
  border-radius:12px;
  text-align:center;
}
.disclaimer-title{ color:var(--heading); font-size:1.4rem; margin-bottom:.5rem; -webkit-text-stroke:.4px rgba(5,33,5,0.5)}
.disclaimer-text{ color:var(--text); margin-bottom:1rem; line-height:1.6}
.disclaimer-btn{ background:var(--accent); color:var(--btn-text); padding:.6rem 1.25rem; border-radius:999px; font-weight:700; display:inline-block }
.disclaimer-btn:hover{ background:var(--btn-hover) }

/* PLAY / GAME FRAMES (900px max, 16:9, responsive) */
.myarcticfun-click-play{ padding:3.5rem 1rem; text-align:center }
.section-title{ color:var(--heading); font-size:2rem; margin-bottom:.5rem; text-shadow:0 0 8px rgba(218,195,255,0.12) }
.section-sub{ color:var(--text); margin-bottom:1.5rem }

.myarcticfun-click-game-frame{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto 2rem;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 32px rgba(0,0,0,0.65);
  /* aspect ratio for broad support */
  position:relative;
  padding-top:56.25%; /* 16:9 */
  max-height:506px; /* ensures it doesn't get too tall on large screens */
}
.myarcticfun-click-game-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* FEATURES */
.myarcticfun-click-features{ padding:3.5rem 1rem; }
.feature-box{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border:1px solid rgba(218,195,255,0.05);
  padding:1.5rem;
  border-radius:10px;
  color:var(--text);
  transition:transform .18s, box-shadow .18s;
}
.feature-box:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,0.6) }
.feature-icon{ font-size:2.2rem; color:var(--heading); margin-bottom:.6rem; -webkit-text-stroke:.4px rgba(5,33,5,0.2) }

/* ABOUT */
.myarcticfun-click-about{ padding:3.5rem 1rem; }
.about-img{ max-width:320px; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.55) }
.myarcticfun-click-about .section-title{ text-align:left }

/* REVIEWS */
.myarcticfun-click-reviews{ padding:3.5rem 1rem; text-align:center }
.reviews-grid{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:1.5rem;
}
.review-card{
  background:linear-gradient(180deg, rgba(218,195,255,0.02), rgba(0,0,0,0.02));
  border:1px solid rgba(218,195,255,0.05);
  padding:1.5rem;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.review-text{ font-style:italic; color:var(--text); margin-bottom:.8rem }
.review-author{ color:var(--heading); font-weight:700 }

/* ==============================
   CONTACT SECTION — MyArcticFun.click
   ============================== */
.myarcticfun-click-contact {
  background-color: rgba(5, 33, 5, 0.9);
  color: var(--text);
  padding: 4rem 1.5rem;
}

.section-title {
  color: var(--heading);
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.myarcticfun-click-contact .section-sub {
  max-width: 780px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: var(--text);
  opacity: 0.9;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-info {
  background-color: rgba(218, 195, 255, 0.08);
  border: 1px solid rgba(218, 195, 255, 0.15);
  border-radius: 10px;
  color: var(--text);
}

.contact-info a {
  color: var(--accent);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* FORM */
.contact-form {
  background-color: rgba(218, 195, 255, 0.08);
  border: 1px solid rgba(218, 195, 255, 0.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(218, 195, 255, 0.2);
  border-radius: 6px;
  font-size: 1rem;
  color: var(--text);
  background-color: rgba(5, 33, 5, 0.6);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 10px rgba(218, 195, 255, 0.2);
}

/* BUTTON */
.myarcticfun-click-btn {
  background-color: var(--button);
  color: var(--button-text);
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(218, 195, 255, 0.25);
  cursor: pointer;
}

.myarcticfun-click-btn:hover {
  background-color: var(--button-hover);
  color: var(--button-text-hover, #052105);
  box-shadow: 0 0 25px rgba(218, 195, 255, 0.35);
}

/* STATUS MESSAGE */
.form-status {
  font-size: 0.95rem;
  text-align: center;
  transition: opacity 0.4s ease;
}

.form-status.success {
  color: #b3ffb3;
}

.form-status.error {
  color: #ff9f9f;
}

/* ==============================
   FOOTER — Myarcticfun.click
   ============================== */
.myarcticfun-click-footer {
  background: rgba(5, 33, 5, 0.98);
  color: var(--text);
  text-align: center;
  padding: 4rem 1rem 2rem;
  border-top: 1px solid rgba(218, 195, 255, 0.15);
  position: relative;
  overflow: hidden;
}

/* Subtle aurora-like background gradient glow */
.myarcticfun-click-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(218,195,255,0.05), transparent 70%);
  opacity: 0.6;
  z-index: 0;
}

.myarcticfun-click-footer .container {
  position: relative;
  z-index: 1;
}

/* LOGO */
.footer-logo {
  max-width: 130px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(218,195,255,0.15));
  margin-bottom: 1.5rem;
}

/* DISCLAIMER BOX */
.footer-disclaimer {
  background-color: rgba(218,195,255,0.05);
  border: 1px solid rgba(218,195,255,0.15);
  color: var(--text);
  max-width: 780px;
  margin: 0 auto 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: 0 0 20px rgba(218,195,255,0.05);
}

.footer-disclaimer strong {
  color: var(--accent);
}

.disclaimer-heading {
  color: var(--heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* FOOTER LINKS */
.footer-links {
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0;
}

.footer-links li a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-links li a:hover {
  color: var(--button-hover);
  text-shadow: 0 0 8px rgba(218,195,255,0.3);
}

/* COPYRIGHT */
.footer-copy {
  font-size: 0.9rem;
  color: rgba(255, 225, 187, 0.85);
}

.footer-copy .link-accent {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.footer-copy .link-accent:hover {
  color: var(--button-hover);
  text-shadow: 0 0 8px rgba(218,195,255,0.3);
}

/* RESPONSIVE */
@media (max-width: 576px) {
  .footer-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* popup */
.myarcticfun-click-popup{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.85); z-index:9999; opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s;
}
.myarcticfun-click-popup.active{ opacity:1; visibility:visible }
.myarcticfun-click-popup .popup-inner{
  background:linear-gradient(180deg, rgba(5,33,5,0.98), rgba(5,33,5,0.98));
  border:2px solid rgba(218,195,255,0.12);
  color:var(--text); padding:1.75rem; border-radius:12px; max-width:520px; text-align:center;
  box-shadow:0 18px 48px rgba(0,0,0,0.7);
}
.myarcticfun-click-popup h3{ color:var(--heading); margin-bottom:.6rem }
.myarcticfun-click-popup p{ color:var(--text); line-height:1.6 }

/* popup buttons */
.popup-buttons .myarcticfun-click-btn{ min-width:130px }
.popup-buttons .exit{ background:transparent; color:var(--heading); border:1px solid rgba(218,195,255,0.12) }
.popup-buttons .exit:hover{ background:var(--btn-hover); color:var(--btn-text) }

/* scroll button */
.myarcticfun-click-scroll{
  position:fixed; right:24px; bottom:24px; width:40px; height:40px; border-radius:50%; border:none;
  background:var(--btn-bg); color:var(--btn-text); display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,0.6); cursor:pointer; opacity:0; visibility:hidden; transition:all .18s; z-index:999;
}
.myarcticfun-click-scroll.show{ opacity:1; visibility:visible }
.myarcticfun-click-scroll:hover{ background:var(--btn-hover); }

/* small elements */
.form-status{ min-height:20px; color:var(--text) }

/* responsive */
@media (max-width: 992px){
  .contact-grid{ grid-template-columns: 1fr; }
  .hero-title{ font-size:2.2rem }
  .reviews-grid{ grid-template-columns: 1fr; }
  .myarcticfun-click-game-frame{ max-width:100%; padding-top:56.25%; max-height: calc(100vw * 9 / 16); }
}
@media (max-width:576px){
  .hero-title{ font-size:1.8rem }
  .feature-box{ padding:1.1rem }
  .about-img{ max-width:260px }
}


/* LEGAL SECTIONS */
.myarcticfun-click-legal {
  background-color: rgba(5, 33, 5, 0.92);
  color: var(--text, #e4e4e4);
  border-top: 1px solid rgba(218,195,255,0.1);
  border-bottom: 1px solid rgba(218,195,255,0.1);
  padding: 4rem 1.5rem;
}

.myarcticfun-click-legal .section-title {
  color: var(--heading, #fafafa);
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 0 20px rgba(218,195,255,0.35);
  margin-bottom: 2rem;
}

.myarcticfun-click-legal .subheading {
  color: var(--accent, #a8f0c5);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: capitalize;
}

.myarcticfun-click-legal p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text, #d9d9d9);
  max-width: 900px;
  margin: 0 auto 1.5rem;
}

.myarcticfun-click-legal strong {
  color: var(--accent, #a8f0c5);
}

.myarcticfun-click-legal .container {
  max-width: 1100px;
  margin: 0 auto;
}