/* =========================================================
   SeanTylerLee.com • styles.css (Always Dark / Neon-Glassy)
   ========================================================= */

/* ---- Tokens ---- */
:root{
  --bg0:#0a2347;              /* deep indigo */
  --bg1:#0e2e5f;              /* top gradient */
  --text:#e8f0ff;             /* near-white on dark */
  --muted:#a9b8d0;
  --accent:#2ea8ff;           /* electric blue */
  --accent-soft:#75c6ff;      /* glow edge */
  --card-bg: rgba(255,255,255,0.06);
  --card-brd: rgba(180,200,255,0.18);
  --radius:14px;
}

/* ---- Reset / Base ---- */
*{ box-sizing:border-box }
html,body{ height:100% }

/* ===== Global background (smooth gradient + subtle noise) ===== */
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  background-image:
    url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">\
  <filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter>\
  <rect width="100%" height="100%" filter="url(%23n)" opacity="0.025"/>\
</svg>'),
    radial-gradient(1200px 600px at 50% -200px, rgba(46,168,255,.22), transparent 60%),
    radial-gradient(900px 900px at 80% 10%, rgba(117,198,255,.15), transparent 55%),
    linear-gradient(180deg, var(--bg1) 0%, #12396f 25%, #0f2f5f 50%, #0c2957 75%, var(--bg0) 100%);
  background-blend-mode:overlay,normal,normal,normal;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-size:128px 128px,auto,auto,auto;
  min-height:100vh;
}

/* Respect iPhone safe areas (notch) */
.safe-top{ padding-top:env(safe-area-inset-top) }

/* ---- HERO (logo + tagline + contact) ---- */
.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 16px 12px; text-align:center;
}
.hero-logo{
  width:80%; max-width:340px; height:auto; object-fit:contain; margin-bottom:12px;
  filter:drop-shadow(0 10px 24px rgba(46,168,255,.45));
}
.hero-tag{ margin:0; font-size:15px; line-height:1.4; color:var(--muted) }
.hero-contact{ margin:8px 0 0; font-size:13px; color:var(--text) }
.hero-contact a{ color:var(--accent); text-decoration:none }
.hero-contact a:hover{ text-decoration:underline }

/* (legacy) header image */
.header-banner{
  display:block; width:100%; height:clamp(80px,22vh,180px); object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(46,168,255,.45));
}

/* ---- Page container ---- */
.container{
  padding:16px;
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
.page-title{
  font-size:20px; font-weight:700; margin:6px 0 14px 2px; letter-spacing:.2px; position:relative;
}
.page-title::after{
  content:""; display:block; height:2px; width:56px; margin-top:6px;
  background:linear-gradient(90deg,var(--accent),transparent);
  box-shadow:0 0 12px var(--accent); border-radius:2px;
}

/* =========================================================
   App list / Cards
   ========================================================= */
.app-list{ display:grid; gap:14px }

/* Card surface (glassy, always dark) */
.app-card{
  display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center;
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius:var(--radius);
  padding:12px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.25), 0 0 .5px 1px rgba(46,168,255,.06) inset;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.app-card:hover{ transform:translateY(-1px); border-color:rgba(117,198,255,.35) }

.app-icon{
  width:72px; height:72px; border-radius:14px; object-fit:cover;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 4px 18px rgba(46,168,255,.18);
}

.app-body{ display:grid; gap:6px }
.app-title{ margin:0; font-size:18px; font-weight:700 }
.app-desc{ margin:0; font-size:14px; line-height:1.35; color:var(--muted) }

/* =========================================================
   Buttons (legacy + bubble)
   ========================================================= */
.app-buttons{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap }

/* legacy classes if any are still used */
.download-btn,
.website-btn{
  display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none;
  font-weight:700; font-size:14px; line-height:1;
  border:1px solid rgba(0,0,0,0.12);
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .15s ease;
  color:#05182e;
}
.download-btn{
  color:#05182e;
  background:linear-gradient(180deg,var(--accent-soft),var(--accent));
  box-shadow:0 2px 10px rgba(46,168,255,.35), 0 0 14px rgba(46,168,255,.45);
}
.download-btn:hover{ box-shadow:0 3px 12px rgba(46,168,255,.45), 0 0 18px rgba(46,168,255,.55) }
.website-btn{
  color:var(--text);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(180,200,255,0.22);
  box-shadow:0 1px 6px rgba(0,0,0,.2);
}
.website-btn:hover{ border-color:rgba(117,198,255,.45) }
.download-btn:active, .website-btn:active{ transform:translateY(1px) }

/* Bubble buttons (preferred) */
.bubble-btn{
  flex:1; text-align:center; padding:10px 14px; border-radius:999px;
  font-size:14px; font-weight:700; text-decoration:none;
  transition:all .2s ease; border:1px solid rgba(0,0,0,0.12);
}
.bubble-btn.download{
  background:linear-gradient(180deg,var(--accent-soft),var(--accent));
  color:#05182e; box-shadow:0 2px 8px rgba(46,168,255,.45);
}
.bubble-btn.download:hover{ box-shadow:0 4px 12px rgba(46,168,255,.6) }
.bubble-btn.website{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(180,200,255,0.22);
  color:var(--text);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.bubble-btn.website:hover{
  border-color:rgba(117,198,255,.45);
  box-shadow:0 2px 8px rgba(46,168,255,.35);
}
.bubble-btn:active{ transform:translateY(1px) }

/* Accessible focus rings */
.download-btn:focus-visible,
.website-btn:focus-visible,
.app-card-link:focus-visible,
.bubble-btn:focus-visible{
  outline:3px solid rgba(46,168,255,.55);
  outline-offset:2px; border-radius:12px;
}

/* =========================================================
   Full-link card (Advertisements)
   ========================================================= */
.app-card-link{
  display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center;
  background:var(--card-bg); border:1px solid var(--card-brd); border-radius:var(--radius);
  padding:12px; text-decoration:none; color:inherit; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.25), 0 0 .5px 1px rgba(46,168,255,.06) inset;
}
.app-card-link *{ pointer-events:none }
.app-card-link:hover{ filter:brightness(1.03) }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  margin-top:40px; padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  color:var(--muted); font-size:12px; text-align:center;
  border-top:1px solid rgba(180,200,255,.16);
}

/* =========================================================
   Small screens polish
   ========================================================= */
@media (max-width:360px){
  .app-card,.app-card-link{ grid-template-columns:64px 1fr }
  .app-icon{ width:64px; height:64px }
  .hero-logo{ max-width:300px; width:84vw }
}

/* ========= HARD OVERRIDES: keep everything dark/glassy ========= */
:root, html, body { color-scheme: dark; }            /* iOS/Safari hint */
body { background-color: #0a2347; }                  /* solid fallback */

/* Kill any light-mode backgrounds from earlier rules or UA styles */
.app-card,
.app-card-link {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-brd) !important;
  color: var(--text) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.25),
              0 0 .5px 1px rgba(46,168,255,.06) inset !important;
}

/* Text colors inside cards */
.app-title { color: var(--text) !important; }
.app-desc  { color: var(--muted) !important; }

/* Buttons in cards */
.bubble-btn.download,
.download-btn {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent)) !important;
  color: #05182e !important;
}
.bubble-btn.website,
.website-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(180,200,255,0.22) !important;
  color: var(--text) !important;
}

/* Disable any accidental light-mode blocks */
@media (prefers-color-scheme: light) {
  .app-card, .app-card-link { background: var(--card-bg) !important; }
}

/* If some element is injecting white, fade it out */
.card, .panel, .tile {
  background: transparent !important;
  border-color: var(--card-brd) !important;
}

.full-screen-image {
  margin: 0;
  padding: 0;
  height: 100vh;           /* fill the viewport height */
  width: 100vw;            /* fill the viewport width */
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  background: #05182e;        /* optional background */
}

.full-screen-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;     /* scale down without cropping */
}

.ad-card {
  margin: 0;
  padding: 0;
}

.ad-card img {
  display: block;     /* removes the inline gap */
  width: 100vw;       /* full width of the screen */
  height: 100vh;      /* full height of the screen */
  object-fit: contain; /* keeps proportions */
}