/* ------------------------------------------------------------------
   Starbound Stories — Enhanced style.css
   Theme: Dark blue + neon cyan
   Drop-in replacement for your current style.css
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Inter:wght@400;500;600&display=swap');
/* -------------------------
   Variables (easy to tweak)
   ------------------------- */
:root{
  --bg-1: #0b0f2f;           /* deep navy */
  --bg-2: #1a1a3d;           /* secondary deep */
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.035);
  --card-glow: rgba(0,212,255,0.06);
  --accent: #00d4ff;         /* neon cyan */
  --accent-2: #00b8e6;
  --muted: rgba(255,255,255,0.75);
  --muted-2: rgba(255,255,255,0.55);
  --danger: #ff6b6b;
  --glass-border: rgba(255,255,255,0.04);
  --radius: 12px;
  --max-width: 1200px;
  --transition: 240ms cubic-bezier(.2,.9,.2,1);
  --shadow-1: 0 6px 20px rgba(0,0,0,0.55);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.6);
  --text: #ffffff;
  --focus-ring: rgba(0,212,255,0.18);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 1ms linear; }
}

/* -------------------------
   Base / Reset
   ------------------------- */
* { box-sizing: border-box; }
html,body { height: 100%; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  padding: 0;
  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.4;
  overflow-x: hidden;
}

/* starfield canvas sits behind content (z-order managed by app) */
#starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* -------------------------
   Splash
   ------------------------- */
#splash{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(4,7,20,0.95) 0%, rgba(8,10,28,0.95) 100%);
  transition: opacity var(--transition), visibility var(--transition);
  will-change: opacity;
}
#splash img{ width: 110px; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)); }
#splash h1{ margin: 0; font-size: 1.9rem; letter-spacing: 0.6px; font-weight:700; color:var(--text); text-transform:none;}
#splash p{ margin: 0; color: var(--muted-2); font-size: 1rem; }
#splash .spinner{ width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--accent); border-top-color: transparent; animation: spin 900ms linear infinite; margin-top: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------
   App container & layout
   ------------------------- */
#app{ position: relative; z-index: 10; min-height: 100vh; display:flex; flex-direction:column; }
.max-width { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }

/* -------------------------
   Header
   ------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 1200;
  background: linear-gradient(180deg, rgba(8,10,28,0.56), rgba(8,10,28,0.28));
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
  padding: 12px 16px;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:var(--max-width); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.logo{ width: 52px; height: auto; flex-shrink:0; border-radius:8px; }
.brand h1{ font-size: 1.05rem; margin: 0; line-height:1; font-weight:700; text-align:left; color:var(--text); }
.tagline{ margin: 0; color:var(--muted-2); font-size: 0.82rem; }

/* navigation */
.main-nav{ display:flex; gap:8px; align-items:center; }
.nav-btn{
  background: transparent; border: none; color: var(--text); cursor:pointer;
  padding:8px 10px; border-radius:10px; font-weight:600; font-size:0.95rem;
  transition: background var(--transition), transform var(--transition);
}
.nav-btn:hover{ background: rgba(255,255,255,0.02); transform: translateY(-2px); }
.nav-btn:focus{ outline: none; box-shadow: 0 0 0 6px var(--focus-ring); border-radius:10px; }

/* favorites badge */
.badge{ background: var(--accent); color: #022; padding: 3px 8px; border-radius: 999px; font-size:0.72rem; font-weight:700; margin-left:8px; }

/* header actions */
.actions{ display:flex; gap:8px; align-items:center; }
#theme-toggle, #menu-toggle{ background:transparent; border: none; color:var(--text); font-size:1.1rem; cursor:pointer; padding:8px; border-radius:8px; transition: transform var(--transition); }
#theme-toggle:hover, #menu-toggle:hover{ transform: translateY(-2px); }
#theme-toggle:focus, #menu-toggle:focus{ box-shadow: 0 0 0 6px var(--focus-ring); }

/* mobile menu */
.mobile-menu{ display:none; margin-top:8px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:8px; }

/* -------------------------
   Main content / controls
   ------------------------- */
.main{ max-width:var(--max-width); margin: 18px auto; padding: 0 16px 32px; flex:1; width:100%; }
.controls{
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin-bottom: 16px;
}
.search-wrap{ flex:1; min-width:220px; position:relative; max-width: 720px; }
#search{
  width:100%; padding:12px 14px; border-radius:12px; border:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--text); font-size: 0.97rem; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}
#search::placeholder{ color: rgba(255,255,255,0.45); }
#search:focus{ outline: none; box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 0 6px var(--focus-ring); }

/* suggestions dropdown */
.suggestions{
  position:absolute; left:0; right:0; top: calc(100% + 8px); z-index:80;
  background: linear-gradient(180deg, rgba(8,10,28,0.98), rgba(12,16,38,0.98));
  border-radius:10px; list-style:none; margin:0; padding:6px 6px; box-shadow: var(--shadow-1);
  max-height: 260px; overflow:auto; border: 1px solid var(--glass-border);
}
.suggestions li{ padding:8px 12px; cursor:pointer; color:var(--muted); font-size:0.95rem; border-radius:8px; }
.suggestions li:hover, .suggestions li:focus{ background: rgba(255,255,255,0.02); color:var(--text); outline:none; }

/* filters */
.filters{ display:flex; gap:8px; align-items:center; }
select{ padding:10px 12px; border-radius:10px; border:none; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--text); font-size:0.95rem; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 10px center; background-size: 16px; }

/* -------------------------
   Book grid & cards
   ------------------------- */
.book-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 6px;
}
.book-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
  position: relative;
  overflow: visible;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition), box-shadow var(--transition), outline var(--transition);
  border: 1px solid var(--glass-border);
  min-height: 220px;
  display:flex;
  flex-direction:column;
}
.book-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-2); outline: 2px solid var(--card-glow); }
.book-card img{ width:100%; height:150px; object-fit:cover; border-radius:8px; display:block; }
.book-card h3{ margin:10px 0 6px; font-size:1.02rem; line-height:1.15; color:var(--text); }
.book-card p{ margin:0; color:var(--muted-2); font-size:0.9rem; }

/* price and actions area sticks to bottom */
.book-card .price{ margin-top:10px; font-weight:700; color:var(--accent); font-size:0.95rem; }
.card-actions{ margin-top:auto; display:flex; gap:8px; align-items:center; }

/* favorite button */
.favorite-btn{
  position:absolute; top:12px; right:12px; background:transparent; border:none; cursor:pointer; font-size:1.1rem; padding:6px; border-radius:8px; transition: transform var(--transition);
}
.favorite-btn:hover{ transform: scale(1.05); }
.favorite-btn.favorited{ color: var(--danger); text-shadow: 0 6px 18px rgba(255,107,107,0.08); }

/* featured tag */
.featured{
  position:absolute; left:12px; top:12px; background: linear-gradient(90deg, rgba(255,184,107,0.12), rgba(255,211,155,0.08)); color:var(--text); padding:6px 8px; border-radius:8px; font-weight:700; font-size:0.78rem;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:700; font-size:0.92rem; cursor:pointer; border:none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn:active{ transform: translateY(1px); }
.btn.buy{ background: linear-gradient(90deg, #ff7b7b, #ff6b6b); color: #fff; box-shadow: 0 6px 18px rgba(255,107,107,0.08); }
.btn.free{ background: linear-gradient(90deg, #00d4ff, #00b8e6); color: #001; box-shadow: 0 6px 18px rgba(0,212,255,0.06); }

/* -------------------------
   Loading spinner & skeletons
   ------------------------- */
.loading-spinner{
  width:44px; height:44px; border:4px solid var(--accent); border-top-color: transparent; border-radius:50%; animation: spin 1s linear infinite; margin:auto;
}

/* skeleton placeholder card (if needed) */
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.02) 100%);
  border-radius:10px; height:220px; position:relative; overflow:hidden;
}
.skeleton::after{
  content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.03), rgba(255,255,255,0.00)); animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer{ to { transform: translateX(100%); } }

/* -------------------------
   Modal
   ------------------------- */
.modal{
  position: fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(2,4,12,0.7), rgba(2,4,12,0.85));
  padding: 20px;
}
.modal-inner{
  width:100%; max-width:640px; border-radius:14px; background: linear-gradient(180deg,#1b1b3a,#2e2e5c); padding:18px; box-shadow: var(--shadow-2); position:relative; color:var(--text);
}
.modal img{ width:100%; height:280px; object-fit:cover; border-radius:10px; margin-bottom:12px; }
.modal h3{ margin:6px 0 2px; font-size:1.25rem; }
.modal p{ margin:6px 0; color:var(--muted-2); }
.modal-close{ position:absolute; top:12px; right:12px; background:transparent; border:none; color:var(--text); font-size:1.4rem; cursor:pointer; padding:8px; border-radius:8px; }
.modal-close:focus{ box-shadow: 0 0 0 6px var(--focus-ring); }

/* -------------------------
   Footer
   ------------------------- */
.site-footer{ text-align:center; padding:18px 10px; color:var(--muted); border-top:1px solid var(--glass-border); font-size:0.92rem; }

/* -------------------------
   Accessibility helpers
   ------------------------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* -------------------------
   Responsive rules
   ------------------------- */
@media (max-width: 980px){
  .book-card{ min-height: 230px; }
  .book-card img{ height:160px; }
  .brand h1{ font-size:1rem; }
}
@media (max-width: 768px){
  .header-inner{ gap:10px; align-items:center; }
  .main-nav{ display:none; }
  .mobile-menu{ display:block; }
  .controls{ gap:10px; flex-direction:column; align-items:stretch; }
  .filters{ width:100%; justify-content:space-between; }
  .book-grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
  .book-card img{ height:140px; }
  .modal img{ height:200px; }
}
@media (max-width: 420px){
  .logo{ width:44px; }
  .brand h1{ font-size:0.98rem; }
  .btn{ font-size:0.88rem; padding:8px; }
}

/* -------------------------
   Theme override (light) — kept minimal in case you use theme toggle
   ------------------------- */
:root.light{
  --bg-1: #f7fbff;
  --bg-2: #eef6ff;
  --surface: rgba(10,20,30,0.04);
  --surface-2: rgba(10,20,30,0.03);
  --card-glow: rgba(0,120,200,0.06);
  --accent: #007fbf;
  --accent-2: #0066a3;
  --muted: rgba(7,42,64,0.9);
  --muted-2: rgba(7,42,64,0.7);
  --text: #072a40;
  --glass-border: rgba(7,42,64,0.06);
  --shadow-1: 0 6px 18px rgba(10,20,30,0.06);
  --shadow-2: 0 10px 30px rgba(10,20,30,0.06);
}

/* End of style.css */