/* Ocean and Boats Simulator pages of zerstorengames.com: the product page, the documentation and the featured cards on the
   home and products pages. Loaded after styles.css; colors and type follow the site. Made by tools/website/obs_website.py
   in the Release desk repo. */

/* Product sub-navigation: stays at the top while the page scrolls. */
.lls-subnav{position:sticky;top:0;z-index:15;background:rgba(17,21,20,.95);border-bottom:1px solid #2c342e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lls-subnav-inner{display:flex;align-items:center;gap:1.8rem;min-height:58px}
.lls-subnav-title{font-weight:700;font-size:.95rem;letter-spacing:.02em;color:#f1f3ed;white-space:nowrap;margin-right:auto}
.lls-subnav-links{display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.lls-subnav-links::-webkit-scrollbar{display:none}
.lls-subnav-links a{font-size:.85rem;color:#b7c0b8;white-space:nowrap;padding:.55rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.lls-subnav-links a:hover{color:#f1f3ed}
.lls-subnav-links a.is-active{color:#bafa58;border-bottom-color:#bafa58}
.lls-subnav .button{min-height:38px;padding:.4rem 1rem;font-size:.82rem;white-space:nowrap}

/* Hero. */
.lls-hero h1{font-size:clamp(3.2rem,5.2vw,5.3rem)}
.lls-hero .lead{max-width:540px}
.lls-hero .hero-feature>img{object-position:40% center}
.lls-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .4rem;padding:0;list-style:none}
.lls-badges li{font-size:.7rem;letter-spacing:.11em;font-weight:600;color:#d0d9c9;border:1px solid #465046;padding:.28rem .6rem;border-radius:2px;text-transform:uppercase}
.button.lls-disabled{background:#232c21;border-color:#3c4a35;color:#9fb092;cursor:default}
.button.lls-disabled:hover{background:#232c21;border-color:#3c4a35}

/* Numbers. */
.lls-stats{background:#182118;border-block:1px solid #415234}
.lls-stats-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;padding-block:2.3rem}
.lls-stat strong{display:block;font-size:clamp(2rem,3.2vw,2.9rem);letter-spacing:-.045em;line-height:1.05;color:#bafa58;font-weight:600}
.lls-stat span{display:block;font-size:.88rem;color:#c5d2bc;margin-top:.5rem;line-height:1.5;max-width:250px}

/* Section headings with a lead beside the title. */
.lls-heading-lead{max-width:470px;margin:0;font-size:1rem}

/* Features: picture and text, alternating sides. */
.lls-feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:4rem;align-items:center;padding-block:3.4rem;border-top:1px solid #2c342e}
.lls-feature.lls-flip .lls-feature-media{order:2}
.lls-feature-media{display:block;position:relative;overflow:hidden;border:1px solid #36422e;background:#1c241c}
.lls-feature-media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s}
.lls-feature-media:hover img{transform:scale(1.025)}
.lls-feature-media:after{content:'\2197';position:absolute;right:.8rem;bottom:.8rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(12,16,13,.78);border:1px solid #586354;color:#f1f3ed;font-size:1rem;opacity:0;transition:opacity .2s}
.lls-feature-media:hover:after,.lls-feature-media:focus-visible:after{opacity:1}
.lls-feature h3{font-size:clamp(1.8rem,2.5vw,2.45rem);letter-spacing:-.04em;margin-bottom:1rem}
.lls-feature-copy>p:not(.eyebrow){font-size:1.02rem;line-height:1.7}
.lls-feature ul{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.75rem}
.lls-feature li{position:relative;padding-left:1.7rem;color:#d0d9c9;font-size:.95rem;line-height:1.55}
.lls-feature li:before{content:'';position:absolute;left:0;top:.68em;width:.8rem;height:2px;background:#bafa58}

/* Gallery. */
.lls-gallery-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:3rem 0 0;padding-top:1.3rem;border-top:1px solid #43513c}
.lls-gallery-head:first-of-type{margin-top:1rem}
.lls-gallery-head h3{font-size:1.25rem;margin:0}
.lls-gallery-head span{font-size:.75rem;letter-spacing:.12em;color:#91a583;white-space:nowrap}
.lls-gallery .gallery.lls-gallery-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lls-gallery-4 .gallery-item span{font-size:.82rem}
.lls-gallery .gallery-item{display:flex;flex-direction:column;background:#191f1a;transition:border-color .18s}
.lls-gallery .lls-shot{overflow:hidden;background:#1c241c}
.lls-gallery .gallery-item img{transition:transform .4s}
.lls-gallery .gallery-item:hover img{transform:scale(1.035)}
.lls-gallery .gallery-item span{padding:.95rem 1.1rem 1.15rem;font-size:.86rem;line-height:1.55;color:#a8b5a0}
.lls-gallery .gallery-item strong{display:block;color:#f1f3ed;font-size:1rem;font-weight:600;margin-bottom:.3rem}

/* Picture viewer. */
.lls-lightbox{padding:0;border:1px solid #465046;background:#0c100d;color:#f1f3ed;width:min(1500px,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);overflow:hidden}
.lls-lightbox::backdrop{background:rgba(4,7,5,.93)}
.lls-lightbox-stage{position:relative;background:#050806}
.lls-lightbox-stage img{display:block;width:100%;height:auto;max-height:calc(100dvh - 9rem);object-fit:contain}
.lls-lightbox-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1rem 1.3rem 1.2rem;border-top:1px solid #2c342e}
.lls-lightbox-caption strong{display:block;font-size:1.05rem;margin-bottom:.2rem}
.lls-lightbox-caption p{margin:0;font-size:.9rem;color:#b7c0b8}
.lls-lightbox-count{font-size:.75rem;letter-spacing:.12em;color:#91a583;white-space:nowrap;padding-top:.3rem}
.lls-lightbox-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid #586354;background:rgba(12,16,13,.82);color:#f1f3ed;font-size:1.7rem;line-height:1;transition:border-color .15s,color .15s}
.lls-lightbox-btn:hover{border-color:#bafa58;color:#bafa58}
.lls-lightbox-close{top:.8rem;right:.8rem;font-size:1.5rem}
.lls-lightbox-prev{left:.8rem;top:50%;transform:translateY(-50%)}
.lls-lightbox-next{right:.8rem;top:50%;transform:translateY(-50%)}

/* Technical details. */
.lls-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3.5rem;margin:0;border-top:1px solid #43513c}
.lls-specs>div{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:1rem;padding:1.15rem 0;border-bottom:1px solid #36422e}
.lls-specs dt{color:#91a583;font-size:.72rem;letter-spacing:.13em;font-weight:600;padding-top:.25rem}
.lls-specs dd{margin:0;color:#e5ecdd;font-size:.95rem;line-height:1.55}

/* Closing call to action. */
.lls-cta{display:flex;justify-content:space-between;align-items:center;gap:2rem 4rem;flex-wrap:wrap;border-top:1px solid #43513c}
.lls-cta h2{margin-bottom:.8rem}
.lls-cta p:not(.eyebrow){margin:0;max-width:520px}
.lls-cta .actions{margin:0}

/* Featured card on the home and products pages. */
.product-grid.lls-feature-grid{grid-template-columns:1fr;margin-bottom:1.5rem}
.lls-feature-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.lls-feature-card .card-image{aspect-ratio:16/10;height:100%}
.lls-feature-card .card-info{padding:2.2rem 2.4rem;display:flex;flex-direction:column;justify-content:center}
.lls-feature-card .card-info h3{font-size:clamp(1.8rem,2.6vw,2.5rem);letter-spacing:-.04em}
.lls-feature-card .card-info p:not(.eyebrow){min-height:0}
.lls-feature-card .lls-badges{margin:0 0 .2rem}
.lls-feature-card .actions{margin-top:1.3rem}

/* Four new releases in a row on the home page. */
.new-release-band .product-grid.lls-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Documentation hub. */
.lls-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.lls-guide-card{background:#191f1a;border:1px solid #30392d;padding:1.9rem 2rem;display:flex;flex-direction:column;min-width:0;transition:border-color .18s}
.lls-guide-card:first-child{grid-column:1/-1}
.lls-guide-card:hover{border-color:#697e51}
.lls-guide-card h2{font-size:1.75rem;margin-bottom:.7rem}
.lls-guide-card h2 a:hover{color:#bafa58}
.lls-guide-card>p:not(.eyebrow){font-size:.97rem;max-width:640px}
.lls-guide-card ul{list-style:none;padding:0;margin:0 0 1.5rem;columns:2;column-gap:2rem}
.lls-guide-card:first-child ul{columns:3}
.lls-guide-card li{font-size:.86rem;line-height:1.4;padding:.3rem 0;break-inside:avoid}
.lls-guide-card li a{color:#a8b5a0}
.lls-guide-card li a:hover{color:#bafa58}
.lls-guide-card .text-link{margin-top:auto;align-self:flex-start}
.lls-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.lls-topics a{display:flex;flex-direction:column;gap:.35rem;border:1px solid #30392d;padding:1.15rem 1.3rem;background:#151b16;transition:border-color .18s}
.lls-topics a:hover{border-color:#bafa58}
.lls-topics small{font-size:.7rem;letter-spacing:.13em;color:#91a583}
.lls-topics strong{font-weight:600;color:#f1f3ed;line-height:1.35}

/* Guides: guide list, the text, the contents of the page. */
.lls-doc-intro h1{font-size:clamp(2.5rem,4.2vw,3.9rem)}
.lls-docs{display:grid;grid-template-columns:220px minmax(0,1fr) 230px;gap:3.5rem;align-items:start;padding-bottom:5rem}
.lls-docs-nav,.lls-toc{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow-y:auto;scrollbar-width:thin;font-size:.88rem}
.lls-docs-nav .eyebrow,.lls-toc .eyebrow{margin-bottom:.7rem}
.lls-docs-nav nav{display:flex;flex-direction:column;margin-bottom:2rem}
.lls-docs-nav nav a{padding:.5rem .9rem;border-left:2px solid #2c342e;color:#b7c0b8;line-height:1.4;transition:color .15s,border-color .15s}
.lls-docs-nav nav a:hover{color:#f1f3ed;border-left-color:#586354}
.lls-docs-nav nav a[aria-current=page]{color:#bafa58;border-left-color:#bafa58;background:#182118}
.lls-toc nav{display:flex;flex-direction:column}
.lls-toc a{padding:.32rem 0 .32rem .9rem;border-left:1px solid #2c342e;color:#a8b5a0;line-height:1.4;transition:color .15s,border-color .15s}
.lls-toc a.lls-toc-sub{padding-left:1.8rem;font-size:.82rem}
.lls-toc a:hover{color:#f1f3ed}
.lls-toc a.is-active{color:#bafa58;border-left-color:#bafa58}
.lls-toc-mobile{display:none;border:1px solid #36422e;background:#151b16;margin-bottom:2rem}
.lls-toc-mobile summary{padding:.9rem 1.1rem;font-weight:600;cursor:pointer}
.lls-toc-mobile nav{display:flex;flex-direction:column;padding:0 1.1rem 1rem}
.lls-toc-mobile a{padding:.3rem 0;color:#b7c0b8;font-size:.9rem}
.lls-toc-mobile a.lls-toc-sub{padding-left:1rem;font-size:.85rem}
.lls-doc{max-width:820px;min-width:0}
.lls-doc>:first-child{margin-top:0}
.lls-doc h2{font-size:clamp(1.6rem,2.2vw,2rem);letter-spacing:-.03em;margin:3.2rem 0 1.1rem;padding-top:1.6rem;border-top:1px solid #2c342e;line-height:1.2}
.lls-doc h3{font-size:1.3rem;margin:2.3rem 0 .9rem;line-height:1.3}
.lls-doc h2,.lls-doc h3{position:relative;scroll-margin-top:1.5rem}
.lls-anchor{margin-left:.5rem;color:#586354;font-weight:400;opacity:0;transition:opacity .15s}
.lls-doc h2:hover .lls-anchor,.lls-doc h3:hover .lls-anchor{opacity:1}
.lls-anchor:hover{color:#bafa58}
.lls-doc p,.lls-doc li{color:#c3ccbd;font-size:1rem;line-height:1.75}
.lls-doc p{margin-bottom:1.15rem}
.lls-doc ul,.lls-doc ol{padding-left:1.45rem;margin:0 0 1.4rem}
.lls-doc li{margin:.4rem 0;padding-left:.2rem}
.lls-doc li>ul,.lls-doc li>ol{margin:.4rem 0 .6rem}
.lls-doc li>p{margin:.6rem 0 0}
.lls-doc li::marker{color:#8eaa69}
.lls-doc ol>li::marker{font-weight:600}
.lls-doc strong{color:#f1f3ed;font-weight:600}
.lls-doc em{color:#e5ecdd}
.lls-doc a{color:#d1ff91;text-decoration:underline;text-decoration-color:#61754a;text-underline-offset:3px}
.lls-doc a:hover{text-decoration-color:#bafa58}
.lls-doc a.lls-anchor{text-decoration:none}
.lls-doc code{font-family:Consolas,'SFMono-Regular',Menlo,monospace;font-size:.86em;background:#1d261b;border:1px solid #33402d;padding:.08em .35em;border-radius:3px;color:#dfffc2;overflow-wrap:anywhere}
.lls-doc pre{background:#151b16;border:1px solid #33402d;padding:1rem 1.2rem;overflow-x:auto;margin:0 0 1.4rem}
.lls-doc pre code{background:none;border:0;padding:0;font-size:.88rem}
.lls-doc blockquote{margin:0 0 1.6rem;border-left:3px solid #bafa58;background:#1d261b;padding:1rem 1.3rem}
.lls-doc blockquote p{margin:0;color:#c5d2bc;font-size:.95rem}
.lls-table{overflow-x:auto;margin:1.4rem 0 2rem;border:1px solid #36422e}
.lls-table table{border-collapse:collapse;width:100%;font-size:.9rem}
.lls-table th{background:#1b241a;color:#f1f3ed;text-align:left;font-weight:600;white-space:nowrap}
.lls-table th,.lls-table td{padding:.75rem .95rem;border-bottom:1px solid #2c342e;vertical-align:top;line-height:1.55}
.lls-table td{color:#c3ccbd}
.lls-table tr:last-child td{border-bottom:0}
.lls-table td:first-child{color:#e5ecdd;min-width:9rem}
.lls-table tbody tr:hover td{background:#161d17}
.lls-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:4rem;padding-top:2rem;border-top:1px solid #2c342e}
.lls-pager a{display:block;border:1px solid #30392d;padding:1.2rem 1.4rem;background:#191f1a;text-decoration:none;transition:border-color .18s}
.lls-pager a:hover{border-color:#bafa58}
.lls-pager small{display:block;font-size:.72rem;letter-spacing:.13em;color:#91a583;margin-bottom:.3rem}
.lls-pager strong{font-size:1.1rem;color:#f1f3ed;font-weight:600}
.lls-pager .lls-next{grid-column:2;text-align:right}

@media(max-width:1100px){.lls-docs{grid-template-columns:200px minmax(0,1fr);gap:2.5rem}
.new-release-band .product-grid.lls-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.lls-gallery .gallery.lls-gallery-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.lls-toc{display:none}
.lls-toc-mobile{display:block}
.lls-feature{gap:2.5rem}
.lls-specs{gap:0 2rem}
.lls-specs>div{grid-template-columns:8.5rem minmax(0,1fr)}
.lls-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
.lls-guide-card:first-child ul{columns:2}
}

@media(max-width:800px){.lls-subnav-title{display:none}
.lls-subnav-inner{gap:1rem;min-height:52px}
.lls-subnav-links{flex:1;gap:1.3rem}
.lls-stats-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.5rem;padding-block:1.9rem}
.lls-feature{grid-template-columns:1fr;gap:1.8rem;padding-block:2.6rem}
.lls-feature .lls-feature-media{order:0!important}
.lls-specs{grid-template-columns:1fr}
.lls-feature-card{grid-template-columns:1fr}
.lls-feature-card .card-image{height:auto}
.lls-feature-card .card-info{padding:1.5rem}
.lls-guide-grid{grid-template-columns:1fr}
.lls-docs{grid-template-columns:1fr;gap:1.5rem}
.lls-docs-nav{position:static;max-height:none;overflow:visible}
.lls-docs-nav nav{flex-direction:row;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.lls-docs-nav nav a{border:1px solid #36422e;padding:.45rem .8rem}
.lls-docs-nav nav a:hover{border-color:#586354}
.lls-docs-nav nav a[aria-current=page]{border-color:#bafa58}
.lls-lightbox-prev,.lls-lightbox-next{top:auto;bottom:.8rem;transform:none}
}

@media(max-width:520px){.lls-subnav .button{display:none}
.new-release-band .product-grid.lls-grid-4{grid-template-columns:1fr}
.lls-gallery .gallery.lls-gallery-4{grid-template-columns:1fr}
.lls-stat span{font-size:.82rem}
.lls-specs>div{grid-template-columns:1fr;gap:.3rem}
.lls-topics{grid-template-columns:1fr}
.lls-guide-card{padding:1.4rem}
.lls-guide-card ul,.lls-guide-card:first-child ul{columns:1}
.lls-pager{grid-template-columns:1fr}
.lls-pager .lls-next{grid-column:auto}
.lls-lightbox{width:100vw;max-height:100dvh;border:0}
.lls-lightbox-caption{flex-direction:column;gap:.4rem}
.lls-table{margin-inline:-.2rem}
}

/* Home, new releases: five cards in UB's four-column grid. Wide: three and two, the last two centred; two columns: the
   fifth card centred alone on its row (half the 1.5rem column gap off its width). */
@media (width > 1100px){
.new-release-band .product-grid.ub-grid-4:has(>:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}
.new-release-band .product-grid.ub-grid-4:has(>:nth-child(5))>*{grid-column:span 2}
.new-release-band .product-grid.ub-grid-4:has(>:nth-child(5))>:nth-child(4){grid-column:2/span 2}
}
@media (520px < width <= 1100px){
.new-release-band .product-grid.ub-grid-4:has(>:nth-child(5))>:nth-child(5):last-child{grid-column:1/-1;justify-self:center;width:calc(50% - .75rem)}
}

/* Home and products page: the six new releases as equal cards (site_text_fixes.py adds zg-six), three, two or one per
   row; stronger than the five-card rules above and in the other products' stylesheets. */
html body .product-grid.zg-six,html body .new-release-band .product-grid.ub-grid-4.zg-six:has(>:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
html body .new-release-band .product-grid.ub-grid-4.zg-six:has(>:nth-child(5))>article:nth-child(n),html body .product-grid.zg-six:has(>:nth-child(5))>article:nth-child(n),html body .product-grid.zg-six>article:nth-child(n){grid-column:auto;justify-self:stretch;width:auto}
@media (width <= 1100px){
html body .product-grid.zg-six,html body .new-release-band .product-grid.ub-grid-4.zg-six:has(>:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (width <= 520px){
html body .product-grid.zg-six,html body .new-release-band .product-grid.ub-grid-4.zg-six:has(>:nth-child(5)){grid-template-columns:1fr}
}