/* TIPITY Bible — responsive, ad-safe, all devices */
:root{
  --bg1:#0d0d0d;
  --bg2:#1a1a1a;
  --accent:#c0392b;
  --accent2:#e74c3c;
  --fg:#f0f0f0;
  --fg-muted:#b0b0b0;
  --glass: rgba(255,255,255,0.07);
  --glass-strong: rgba(255,255,255,0.12);
  --shadow: 0 20px 40px rgba(0,0,0,.5);
  --radius: 16px;
  --footer-h: 110px; /* legal links + ad dock */
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  min-height:100%; height:100%; width:100%;
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color:var(--fg);
  background: var(--bg1);
}
body{
  display:flex; flex-direction:column;
}

/* ===== SCREENS ===== */
.screen{ display:none; flex-direction:column; flex:1; overflow:hidden; }
.screen.active{ display:flex; }

/* ===== APP HEADER ===== */
.app-header{
  padding: clamp(.6rem, 1.5vw, 1rem) clamp(.75rem, 2vw, 1.5rem);
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg,#c0392b,#8b1a1a);
  flex-shrink:0;
  z-index:10;
}
.app-header h1{font-weight:800; letter-spacing:.5px; font-size:clamp(1.1rem,3vw,1.5rem);}
.top-actions{display:flex; align-items:center; gap:.5rem;}
.voice-label{opacity:.85; font-size:clamp(.8rem,1.5vw,.9rem);}
#voiceSelect{
  max-width: min(55vw, 280px);
  padding:.45rem .6rem; border-radius:10px; border:1px solid rgba(255,255,255,.2);
  background:var(--glass); color:var(--fg); font-size:clamp(.75rem,1.3vw,.85rem);
}

/* ===== APP MAIN ===== */
.app-main{
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding: clamp(.5rem,2vw,1rem);
  display:flex; flex-direction:column; gap:.8rem;
}
.card{
  background:var(--glass); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.verse-card{padding:.75rem;}
#verseDisplay{
  width:100%; min-height:30vh; max-height:50vh; resize:vertical;
  border:0; outline:0; background:transparent; color:var(--fg);
  font-size: clamp(.95rem, 1.8vw, 1.1rem); line-height:1.55;
  font-family:inherit;
}
.controls{display:flex; flex-direction:column; gap:.6rem;}
.row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-content:center;}
.ref-input{
  flex:1; min-width:0; width:100%;
  padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:var(--glass-strong); color:var(--fg); font-size:clamp(.85rem,1.5vw,1rem);
  box-shadow:var(--shadow);
}
.btn{
  padding:.75rem 1rem; border:0; border-radius:14px; cursor:pointer;
  color:#fff; background:linear-gradient(180deg,#c0392b,#8b1a1a);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  font-weight:700; letter-spacing:.2px; font-size:clamp(.8rem,1.4vw,.9rem);
  transition: transform .04s ease, filter .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.12); box-shadow: 0 16px 30px rgba(0,0,0,.45);}
.btn:active{transform: translateY(1px) scale(.995);}
.btn.primary{background:linear-gradient(180deg,#e74c3c,#c0392b);}
.btn.success{background:linear-gradient(180deg,#fff,#d9d9d9); color:#1a1a1a;}
.btn.danger{background:linear-gradient(180deg,#8b1a1a,#5c1010); color:#fff;}
.btn.install-btn{background:linear-gradient(180deg,#fff,#e0e0e0); color:#1a1a1a; animation:install-pulse 2s ease-in-out infinite;}
@keyframes install-pulse{0%,100%{box-shadow:0 10px 22px rgba(0,0,0,.35)} 50%{box-shadow:0 0 16px rgba(231,76,60,.5)}}
.hold{position:relative;}
.hold .mic{font-size:1.1rem; margin-right:.4rem;}
.hold.listening{box-shadow: 0 0 0 6px rgba(231,76,60,.25), var(--shadow);}
.hold.listening::after{
  content:""; position:absolute; inset:-6px; border-radius:20px;
  border:2px dashed rgba(231,76,60,.6); animation:pulse 1.2s linear infinite;
}
@keyframes pulse{0%{opacity:0;transform:scale(.95)} 50%{opacity:1} 100%{opacity:0;transform:scale(1.05)}}
.status{text-align:center; opacity:.85; min-height:1.2em;}

/* ===== LEGAL IN-APP SCREEN ===== */
.legal-topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(11,15,20,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:10px clamp(.75rem,2vw,1.5rem);
  flex-shrink:0;
}
.backlink{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--fg); text-decoration:none; font-weight:700;
  background:#0ea5c6; border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:10px 14px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.22); font-size:clamp(.85rem,1.4vw,.95rem);
}
.backlink:hover{filter:brightness(1.05);}
.legal-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto !important;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:auto;
  touch-action:pan-y pinch-zoom;
  padding: 10px clamp(.75rem,3vw,1.5rem) 20px;
}
/* Legal content styling */
.legal-scroll .lp-card{
  background:rgba(18,24,33,.9); border:1px solid #1d2633;
  border-radius:14px; padding:22px; margin:16px 0;
}
.legal-scroll h1{font-size:clamp(1.5rem,4vw,2rem); margin:10px 0 6px;}
.legal-scroll h2{font-size:clamp(1.1rem,3vw,1.4rem); margin:24px 0 10px;}
.legal-scroll h3{font-size:clamp(1rem,2.5vw,1.15rem); margin:18px 0 8px; color:#9bff9b;}
.legal-scroll ul{padding-left:22px;}
.legal-scroll a{color:#00e5ff;}
.legal-scroll .lp-meta{color:#6b7a90; font-size:clamp(.8rem,1.3vw,.9rem);}
.legal-scroll .lp-pill{
  display:inline-block; border:1px solid #1d2633;
  padding:4px 10px; border-radius:999px; color:#6b7a90; font-size:13px;
}

/* ===== FOOTER (always visible, never reloads) ===== */
.app-footer{
  flex-shrink:0;
  z-index:9999;
  background:rgba(0,0,0,.5);
  border-top:1px solid rgba(255,255,255,.1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.legal-links{
  text-align:center; padding:6px 8px;
  font-size:clamp(.75rem,1.3vw,.85rem);
}
.legal-links a{color:var(--fg); text-decoration:none; opacity:.9;}
.legal-links a:hover{text-decoration:underline;}
#adDock{
  min-height:50px;
  display:flex; align-items:center; justify-content:center;
  padding:4px 0;
}
/* Hide ad dock on legal screen */
body.legal-open #adDock,
body.legal-open .legal-links{ display:none; }

/* ===== DESKTOP ===== */
@media (min-width:700px){
  .app-main{max-width:680px; margin:0 auto; width:100%;}
  #verseDisplay{min-height:35vh;}
  .legal-scroll{max-width:900px; margin:0 auto;}
}
@media (min-width:1024px){
  .app-main{max-width:760px;}
  .row{justify-content:flex-start;}
}