/* FOUNTAIN+ Phase 1 — iPhone + Android experience repair */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --tap:44px;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header) + var(--safe-top) + 12px)}
body{min-width:320px;overscroll-behavior-y:none}
img,video,iframe{max-width:100%}
button,a,input{touch-action:manipulation}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* H.O.M.S. hero repair: one readable message, never text fighting text. */
.homs-hero-copy{
  width:min(620px,calc(100vw - 48px));
  margin-left:max(3vw,calc((100vw - 1520px)/2 + 3vw));
  padding:clamp(22px,3vw,38px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(0,0,0,.92),rgba(0,0,0,.72));
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.homs-hero-copy h1{font-size:clamp(46px,6.5vw,92px);line-height:.88;margin:14px 0 16px}
.homs-hero-copy p{max-width:520px}

@media (hover:none),(pointer:coarse){
  .woven-card:hover,.series-card:hover,.btn:hover{transform:none}
  .play-pulse{opacity:1;width:48px;height:48px;font-size:14px}
  .woven-card{cursor:pointer}
}

@media (max-width:820px){
  :root{--header:62px;--mobile-rail-h:min(52svh,330px)}
  html,body{max-width:100%;overflow-x:hidden}
  body.mobile-menu-open,body.mobile-settings-open{overflow:hidden;touch-action:none}
  .shell{width:auto;margin-inline:max(16px,var(--safe-left)) max(16px,var(--safe-right))}

  /* Header: settings and menu stay visible on every phone. */
  .site-header{
    z-index:320;
    top:0;
    height:calc(var(--header) + var(--safe-top));
    min-height:calc(var(--header) + var(--safe-top));
    padding:var(--safe-top) max(12px,var(--safe-right)) 0 max(14px,var(--safe-left));
    gap:8px;
    background:linear-gradient(to bottom,rgba(5,6,7,.82),rgba(5,6,7,.18));
  }
  .site-header.scrolled{background:rgba(5,6,7,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .brand{font-size:18px;flex:1;min-width:0}
  .header-actions{display:flex!important;align-items:center;gap:7px;flex:0 0 auto}
  .header-actions .icon-btn,.header-actions .icon-btn:first-child,.menu-btn{
    display:grid!important;
    width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap);
    background:rgba(3,4,5,.72);
    border-color:rgba(255,255,255,.2);
  }
  .header-actions [data-settings-open]{font-size:19px}
  .header-actions [data-menu]{font-size:0}
  .header-actions [data-menu]::before{content:"☰";font-size:20px;line-height:1}
  .header-actions [data-menu][aria-expanded="true"]::before{content:"×";font-size:27px}

  /* Full-height mobile navigation rather than a tiny floating dropdown. */
  .nav{
    position:fixed!important;
    z-index:315;
    display:flex!important;
    top:calc(var(--header) + var(--safe-top));
    left:0!important;right:0!important;bottom:0;
    max-width:none!important;
    padding:16px max(16px,var(--safe-right)) calc(28px + var(--safe-bottom)) max(16px,var(--safe-left))!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:4px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    background:rgba(5,6,7,.985)!important;
    border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;
    box-shadow:0 30px 100px rgba(0,0,0,.8);
    transform:translateY(-12px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    white-space:normal!important;
  }
  .nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  .nav a,.nav .hire,.mobile-settings-link{
    width:100%;min-height:48px;
    display:flex;align-items:center;
    padding:13px 14px!important;
    border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#f7f4ef!important;
    font-size:12px!important;letter-spacing:.12em!important;text-align:left;
  }
  .nav a.active{color:var(--gold)!important}
  .nav a::after{display:none!important}
  .mobile-settings-link{font-weight:900;text-transform:uppercase;cursor:pointer;margin-top:8px}
  .mobile-nav-backdrop{
    position:fixed;z-index:310;inset:0;background:rgba(0,0,0,.58);
    opacity:0;visibility:hidden;pointer-events:none;transition:.2s;
  }
  .mobile-nav-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}

  /* Settings becomes a true phone sheet and remains reachable from header + menu. */
  .settings-panel{
    z-index:520;
    width:100vw;max-width:none;
    height:100dvh;min-height:var(--app-height,100dvh);
    padding:calc(18px + var(--safe-top)) max(20px,var(--safe-right)) calc(24px + var(--safe-bottom)) max(20px,var(--safe-left));
    border-left:0;overflow-y:auto;overscroll-behavior:contain;
  }
  .settings-head{position:sticky;top:calc(-18px - var(--safe-top));z-index:2;background:rgba(7,8,10,.98);padding-top:18px}
  .settings-head button{width:var(--tap);height:var(--tap);display:grid;place-items:center}
  .setting-row{min-height:82px;padding:18px 0}
  .setting-row b{font-size:15px}.setting-row small{font-size:12px}
  .setting-row input{min-width:48px;width:48px;height:28px}
  .mobile-settings-backdrop{position:fixed;z-index:510;inset:0;background:rgba(0,0,0,.72);display:none}
  .mobile-settings-backdrop.open{display:block}

  /* Dynamic viewport-safe heroes. */
  .category-hero,.homs-hero{min-height:100svh;min-height:var(--app-height,100dvh)}
  .category-hero{padding:calc(var(--header) + var(--safe-top) + 64px) 0 calc(34px + var(--safe-bottom));align-items:flex-end}
  .hero-copy{max-width:none;margin-inline:max(16px,var(--safe-left)) max(16px,var(--safe-right))!important}
  .category-hero h1{font-size:clamp(48px,15vw,78px);max-width:100%;overflow-wrap:anywhere}
  body[data-page="home"] .category-hero.hero-gold .hero-copy h1{font-size:clamp(66px,20vw,96px)}
  .category-hero p{font-size:15px;line-height:1.52;max-width:94%}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px;width:100%;margin-top:20px}
  .hero-actions .btn{width:100%;min-height:48px;padding:14px 16px}
  .hero-actions .preview-status{justify-self:start}
  .hero-player-stage{inset:calc(var(--header) + var(--safe-top)) 0 0}
  .hero-player-close{top:calc(var(--header) + var(--safe-top) + 10px);right:max(12px,var(--safe-right));width:48px;height:48px}

  /* H.O.M.S. clean phone composition. */
  .homs-hero{display:flex;align-items:flex-end;padding:calc(var(--header) + var(--safe-top) + 24px) 0 calc(22px + var(--safe-bottom))}
  .homs-hero-copy{
    width:auto;margin-inline:max(14px,var(--safe-left)) max(14px,var(--safe-right));
    padding:20px;border-radius:16px;background:rgba(0,0,0,.9)
  }
  .homs-hero-copy h1{font-size:clamp(42px,13vw,60px);line-height:.88}
  .homs-hero-copy p{font-size:14px;line-height:1.5}

  /* Thumb-friendly structure and readable hierarchy. */
  .section{padding:48px 0}
  .section-head{gap:14px;margin-bottom:18px}
  .section-head h2{font-size:clamp(34px,11vw,52px);line-height:.94}
  .section-head p{font-size:14px;line-height:1.5}
  .btn{min-height:var(--tap)}
  .filters{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{min-height:var(--tap);flex:0 0 auto;scroll-snap-align:start}

  /* Rails: real swipe behavior, cards fit the phone instead of overflowing wildly. */
  .woven-wrap{margin-inline:calc(-1 * max(16px,var(--safe-left))) calc(-1 * max(16px,var(--safe-right)))}
  .woven-rail{
    height:var(--mobile-rail-h)!important;
    gap:9px;
    padding:2px max(16px,var(--safe-right)) 14px max(16px,var(--safe-left));
    scroll-padding-inline:max(16px,var(--safe-left));
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .woven-card{flex-basis:min(88vw,560px)!important;border-radius:13px}
  .woven-card.portrait{flex-basis:min(61vw,230px)!important}
  .woven-card.square{flex-basis:min(82vw,330px)!important}
  .woven-card .card-copy{left:13px;right:13px;bottom:12px}
  .woven-card h3{font-size:19px}
  .woven-card p{font-size:8px;line-height:1.35}
  .badge,.status{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail-arrow{display:none!important}
  .mobile-cinema-trigger{
    position:absolute;z-index:15;right:10px;bottom:10px;
    width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
    display:grid;place-items:center;background:rgba(0,0,0,.78);color:#fff;font-size:18px;
    box-shadow:0 8px 28px rgba(0,0,0,.45)
  }
  .woven-card .mobile-cinema-trigger~.card-copy{right:62px}

  .series-grid{grid-template-columns:1fr!important;gap:12px}
  .series-card .media{aspect-ratio:16/9}
  .series-card .copy{min-height:0;padding:15px 16px 18px}
  .series-card h3{font-size:22px}

  /* Cinema Mode: safe-area aware, no controls trapped behind browser chrome. */
  .cinema-player{
    z-index:600;
    width:100vw;height:100dvh;min-height:var(--app-height,100dvh);
    padding:calc(8px + var(--safe-top)) max(8px,var(--safe-right)) calc(8px + var(--safe-bottom)) max(8px,var(--safe-left));
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)
  }
  .cinema-stage{width:100%;max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 16px);border-radius:15px}
  .cinema-player:not(.portrait):not(.square) .cinema-stage{aspect-ratio:16/9}
  .cinema-player.portrait .cinema-stage{width:100%;height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 16px)}
  .cinema-player.portrait iframe,.cinema-player.portrait video{width:min(94vw,calc((var(--app-height,100dvh) - 92px) * 9 / 16));max-height:calc(var(--app-height,100dvh) - 76px);border-radius:14px}
  .cinema-player.square .cinema-stage{width:100%;height:auto;max-height:calc(var(--app-height,100dvh) - 20px)}
  .cinema-player.square iframe,.cinema-player.square video{width:min(94vw,calc(var(--app-height,100dvh) - 90px))}
  .cinema-close{position:fixed;right:max(14px,var(--safe-right));top:calc(10px + var(--safe-top));width:48px;height:48px;background:rgba(0,0,0,.9)}
  .cinema-title{left:max(12px,var(--safe-left));right:70px;bottom:calc(10px + var(--safe-bottom));max-width:calc(100vw - 100px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .up-next-overlay{padding:20px max(16px,var(--safe-right)) calc(20px + var(--safe-bottom)) max(16px,var(--safe-left))}

  /* Content and battery performance. */
  .section{content-visibility:auto;contain-intrinsic-size:700px}
  .ambient-canvas{filter:blur(50px);opacity:.72}
  .grain{opacity:.045}
  .footer{padding-bottom:calc(34px + var(--safe-bottom));text-align:center}
  .footer .shell{align-items:center}
  .preview-chip{left:max(10px,var(--safe-left));bottom:calc(10px + var(--safe-bottom))}
  .intro-skip{right:max(14px,var(--safe-right));bottom:calc(14px + var(--safe-bottom));min-height:44px}
}

@media (max-width:390px){
  .brand{font-size:17px}
  .header-actions{gap:5px}
  .header-actions .icon-btn,.header-actions .icon-btn:first-child,.menu-btn{width:44px;height:44px;min-width:44px;min-height:44px}
  .category-hero h1{font-size:clamp(44px,14vw,62px)}
  body[data-page="home"] .category-hero.hero-gold .hero-copy h1{font-size:clamp(62px,19vw,84px)}
  .book-grid{grid-template-columns:1fr!important}
}

@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  :root{--header:54px;--mobile-rail-h:min(78svh,300px)}
  .category-hero{min-height:118svh;padding-top:calc(var(--header) + var(--safe-top) + 28px)}
  .category-hero h1{font-size:clamp(44px,10vw,70px)}
  .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cinema-player.portrait iframe,.cinema-player.portrait video{height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px);width:auto}
}

@media (prefers-reduced-motion:reduce){
  .nav,.mobile-nav-backdrop{transition:none!important}
}

html.mobile-save-data .ambient-canvas,html.mobile-save-data .grain{display:none}
html.mobile-save-data .section{content-visibility:auto}