/* Web home screen. Uses the colour tokens from styles.css; every rule is direction-neutral (RTL-safe). */
.hm-hero{position:relative; overflow:hidden; padding:56px 0 40px;}
.hm-hero .ring.r1{width:420px; height:420px; top:-200px; inset-inline-end:-120px; border-color:var(--ring-1);}
.hm-hero .ring.r2{width:280px; height:280px; top:-90px; inset-inline-end:-20px; border-color:var(--ring-2);}
.hm-hero-in{position:relative; z-index:1;}
.hm-hero h1{font-size:clamp(32px,5vw,56px); margin:16px 0 14px; max-width:720px;}
.hm-hero .lede{font-size:17px; line-height:1.6; color:var(--navy-soft); max-width:560px; margin-bottom:26px;}
.hm-ctas{display:flex; flex-wrap:wrap; gap:12px;}
.hm-me{display:flex; align-items:center; gap:16px; margin:16px 0 14px;}
.hm-me h1{margin:0;}
.hm-me-av{position:relative; flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--mint-tint); display:grid; place-items:center; font:700 26px 'Sora',sans-serif; color:var(--teal-dark);}
.hm-me-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.hm-sec{padding:30px 0;}
.hm-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px;}
.hm-head h2{font-size:clamp(22px,3vw,30px); letter-spacing:-.3px;}
.hm-head p{margin-top:6px; font-size:14.5px; color:var(--navy-soft);}
.hm-arrows{display:flex; gap:8px; flex:none;}
.hm-arrow{width:40px; height:40px; border-radius:50%; border:2px solid var(--border-soft); background:transparent; color:var(--navy); cursor:pointer; display:grid; place-items:center; transition:background .15s,border-color .15s;}
.hm-arrow:hover{background:var(--paper); border-color:var(--navy-soft);}
.hm-arrow[disabled]{opacity:.35; cursor:default;}
.hm-arrow svg{width:18px; height:18px;}
html[dir="rtl"] .hm-arrow svg{transform:scaleX(-1);}
@media (hover:none){.hm-arrows{display:none;}}

/* horizontal rows: swipe on touch, arrows on mouse */
.hm-scroller{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding:4px 28px 10px; margin-inline:-28px; overscroll-behavior-x:contain;}
.hm-scroller::-webkit-scrollbar{display:none;}
.hm-scroller > *{flex:none; scroll-snap-align:start;}
.hm-scroller{scroll-padding-inline:28px;}
@media (max-width:600px){.hm-scroller{padding-inline:20px; margin-inline:-20px;}}

.hm-card{color:inherit; text-align:start; font:inherit;}
.hm-name{font:600 15px/1.35 'Inter',sans-serif; letter-spacing:0; margin-top:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
html[lang="ar"] .hm-name,html[lang="ja"] .hm-name{font-family:inherit;}
.hm-meta{font-size:13px; color:var(--navy-soft); margin-top:3px;}

/* picture with a letter behind it, so a missing image still looks intentional */
.hm-ph{position:relative; width:100%; height:100%; background:var(--blue-tint); display:grid; place-items:center; overflow:hidden;}
.hm-ph > span{font:700 34px 'Sora',sans-serif; color:var(--blue); opacity:.55;}
.hm-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--blue-tint);}

/* anime posters */
.hm-poster{width:158px;}
.hm-cover{position:relative; aspect-ratio:2/3; border-radius:14px; overflow:hidden; border:1px solid var(--border-soft);}
.hm-rank{position:absolute; inset-block-end:8px; inset-inline-start:8px; min-width:30px; height:30px; padding:0 8px; border-radius:9px; background:var(--navy); color:var(--white); font:700 14px/30px 'JetBrains Mono',monospace; text-align:center; direction:ltr;}
.hm-score{position:absolute; inset-block-start:8px; inset-inline-end:8px; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; background:rgba(14,27,46,.78); color:#fff; font:600 12px 'JetBrains Mono',monospace; direction:ltr;}
.hm-score svg{width:12px; height:12px; fill:#F7C948;}

/* what's new */
.hm-feature{width:min(340px,78vw); display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:stretch; padding:12px; border:1px solid var(--border-soft); border-radius:16px; background:var(--white);}
.hm-feature-img{aspect-ratio:2/3; border-radius:10px; overflow:hidden;}
.hm-feature-body{display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0;}
.hm-feature-body h3{font:700 17px/1.3 'Inter',sans-serif; letter-spacing:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
html[lang="ar"] .hm-feature-body h3,html[lang="ja"] .hm-feature-body h3,html[lang="ar"] .hm-article-body h3,html[lang="ja"] .hm-article-body h3{font-family:inherit;}
.hm-kind{align-self:flex-start; padding:3px 10px; border-radius:999px; font:600 11px 'JetBrains Mono',monospace; letter-spacing:1.5px; text-transform:uppercase; background:var(--blue-tint); color:var(--blue-dark);}
.hm-kind-manga{background:var(--mint-tint); color:var(--teal-dark);}
.hm-kind-article{background:var(--paper); color:var(--navy-soft);}
html[lang="ar"] .hm-kind{text-transform:none;}

/* trailers */
.hm-trailer{width:min(300px,76vw); background:none; border:0; padding:0; cursor:pointer;}
.hm-thumb{position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--blue-tint); border:1px solid var(--border-soft);}
.hm-thumb img{width:100%; height:100%; object-fit:cover;}
.hm-play{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0) 55%);}
.hm-play svg{width:52px; height:52px; padding:14px 12px 14px 16px; border-radius:50%; background:rgba(255,255,255,.94); fill:#0E1B2E; transition:transform .15s;}
html[dir="rtl"] .hm-play svg{padding:14px 16px 14px 12px;}
.hm-trailer:hover .hm-play svg,.hm-trailer:focus-visible .hm-play svg{transform:scale(1.08);}
.hm-trailer .hm-name{display:-webkit-box;}
.hm-trailer:focus-visible,.hm-arrow:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:14px;}

/* characters */
.hm-char{width:132px; text-align:center;}
.hm-char-photo{width:120px; height:120px; margin-inline:auto; border-radius:50%; overflow:hidden; border:3px solid var(--ring-2);}
.hm-love{display:inline-flex; align-items:center; gap:5px; justify-content:center;}
.hm-love svg{width:13px; height:13px; fill:#F0566E;}

/* articles */
.hm-article{width:min(360px,80vw); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden; background:var(--white);}
.hm-article-img{aspect-ratio:16/9;}
.hm-article-body{padding:14px 16px 16px;}
.hm-article-body h3{font:700 17px/1.35 'Inter',sans-serif; letter-spacing:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.hm-sub{margin-top:6px; font-size:14px; line-height:1.5; color:var(--navy-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* groups */
.hm-group{width:132px; text-align:center;}
.hm-group-icon{width:96px; height:96px; margin-inline:auto; border-radius:26px; overflow:hidden; border:1px solid var(--border-soft);}

/* trailer player */
.hm-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(8,6,4,.82);}
.hm-modal.open{display:flex;}
.hm-modal-box{position:relative; width:min(960px,100%); aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden;}
.hm-modal-box iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.hm-modal-close{position:absolute; inset-block-start:-48px; inset-inline-end:0; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:22px; cursor:pointer;}
.hm-modal-err{position:absolute; inset:0; display:grid; place-items:center; color:#fff; padding:20px; text-align:center;}

@media (max-width:860px){ .hm-hero{padding:36px 0 24px;} .hm-sec{padding:22px 0;} }
@media (prefers-reduced-motion:reduce){ .hm-scroller{scroll-behavior:auto;} }