@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root {
--ink:#19191d;
--muted:#777880;
--line:#e9e8e6;
--red:#d94d5c;
--cream:#f8f7f4;
--dark:#17181b
}
* {
box-sizing:border-box
}
body {
margin:0;
color:var(--ink);
font-family:'DM Sans','Noto Sans JP',sans-serif;
background:#fff
}
a {
text-decoration:none;
color:inherit
}
 .site-header {
height:76px;
padding:0 max(5vw,28px);
display:flex;
align-items:center;
gap:48px;
border-bottom:1px solid #f0efed;
background:#fff
}
.brand {
display:flex;
align-items:center;
gap:10px;
white-space:nowrap
}
.brand-mark {
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:var(--red);
color:white;
font-size:20px
}
.brand b {
font-size:19px;
letter-spacing:-.6px;
display:block
}
.brand small {
font-size:9px;
color:var(--muted);
display:block;
margin-top:2px
}
.site-header nav {
display:flex;
gap:25px;
font-size:13px;
font-weight:700;
flex:1
}
.site-header nav a:first-child {
color:var(--red)
}
.header-actions {
display:flex;
align-items:center;
gap:16px;
font-size:12px
}
.welcome {
color:var(--muted)
}
.text-link {
font-weight:700
}
.button {
border:0;
border-radius:5px;
background:var(--red);
color:white;
padding:14px 22px;
font:700 13px inherit;
display:inline-block;
cursor:pointer;
box-shadow:0 8px 18px #d94d5c26
}
.button.small {
padding:10px 15px;
font-size:11px
}
.hero {
background:var(--dark);
color:white;
min-height:490px;
padding:72px max(7vw,32px);
display:flex;
align-items:center;
justify-content:center;
gap:8vw;
overflow:hidden;
position:relative
}
.hero:after {
content:'';
position:absolute;
width:700px;
height:700px;
border-radius:50%;
right:-130px;
top:-280px;
background:radial-gradient(circle,#da596944 0,transparent 66%);
pointer-events:none
}
.hero-copy {
position:relative;
z-index:1;
max-width:570px;
text-align:center
}
.eyebrow {
font:700 11px 'DM Sans';
letter-spacing:2.4px;
color:var(--red);
margin:0 0 14px
}
.hero h1 {
font-size:clamp(32px,4.2vw,60px);
line-height:1.23;
margin:0 0 19px;
letter-spacing:-2px
}
.hero h1 em {
font-style:normal;
color:#f3a3a7
}
.hero h1 .l1,
.hero h1 .l2 {
display:block;
white-space:nowrap;
line-height:1.02
}
.hero h1 .l1 {
margin-bottom:-0.55em
}
.hero-lead {
line-height:1.9;
color:#c7c7ca;
font-size:14px
}
.search {
height:52px;
display:flex;
margin:28px auto 18px;
max-width:490px
}
.search input {
border:0;
padding:0 18px;
flex:1;
font:14px inherit;
border-radius:5px 0 0 5px
}
.search button {
border:0;
background:var(--red);
color:#fff;
padding:0 24px;
font-weight:700;
border-radius:0 5px 5px 0
}
.quick-tags {
display:flex;
gap:8px;
align-items:center;
justify-content:center;
font-size:11px;
color:#98999e;
flex-wrap:wrap
}
.quick-tags a {
border:1px solid #53545b;
padding:5px 9px;
border-radius:20px;
color:#eee
}
.hero-poster {
height:310px;
width:285px;
min-width:285px;
border:1px solid #5a5b61;
border-radius:10px;
background:linear-gradient(145deg,#492f42,#c26c64 48%,#111d29 49%,#293e4b);
position:relative;
overflow:hidden;
box-shadow:20px 20px 50px #0006;
z-index:1
}
.poster-orbit {
position:absolute;
width:250px;
height:250px;
border:1px solid #ffffff50;
border-radius:50%;
top:-70px;
right:-80px
}
.poster-label {
position:absolute;
top:19px;
left:20px;
background:var(--red);
padding:6px 9px;
font-size:9px;
font-weight:700
}
.play {
position:absolute;
left:50%;
top:45%;
transform:translate(-50%,-50%);
width:58px;
height:58px;
border:2px solid #fff;
border-radius:50%;
display:grid;
place-items:center;
padding-left:3px;
font-size:18px;
color:#fff
}
.poster-caption {
position:absolute;
left:20px;
bottom:20px;
display:grid;
gap:6px
}
.poster-caption b {
font-size:18px
}
.poster-caption small {
color:#ddd
}
.section {
padding:72px max(5vw,28px) 0;
max-width:1400px;
margin:auto
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:25px
}
.section-heading h2 {
font-size:25px;
margin:0;
letter-spacing:-.8px
}
.section-heading>a {
font-size:12px;
font-weight:700
}
.section-heading>a span {
color:var(--red);
margin-left:7px
}
.section-note {
font-size:11px;
color:var(--muted)
}
.movie-grid {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:17px
}
.movie-card {
border:1px solid var(--line);
border-radius:8px;
overflow:hidden;
transition:transform .2s,box-shadow .2s;
background:#fff
}
.movie-card:hover {
transform:translateY(-5px);
box-shadow:0 12px 25px #17181b12
}
.movie-art,.rank-art,.detail-art {
background:linear-gradient(140deg,var(--accent),#222 72%);
position:relative;
min-height:160px;
overflow:hidden
}
.movie-art .thumb,
.rank-art .thumb {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0
}
.movie-art:after,.rank-art:after,.detail-art:after {
content:'';
position:absolute;
inset:30% -20% -40%;
background:radial-gradient(ellipse,#fff4,transparent 58%);
transform:rotate(-15deg)
}
.art-kicker {
position:absolute;
top:13px;
left:13px;
color:#fff;
font-size:10px;
font-weight:700;
z-index:1
}
.movie-art .play {
width:38px;
height:38px;
font-size:11px;
top:50%
}
.duration {
position:absolute;
bottom:9px;
right:9px;
background:#17181dcc;
border-radius:3px;
padding:4px 6px;
font-size:10px;
z-index:1
}
.movie-info {
padding:13px
}
.movie-info h3 {
font-size:14px;
margin:0 0 6px
}
.movie-info p {
font-size:10px;
color:var(--muted);
margin:0 0 11px
}
.pill {
font-size:10px;
color:var(--red);
background:#fff0f1;
padding:5px 7px;
border-radius:3px
}
.card-rating {
float:right;
font-size:11px;
color:#d49a34
}
.genre-section {
background:var(--cream);
max-width:none;
margin-top:72px;
padding-bottom:75px;
padding-left:max(5vw,28px);
padding-right:max(5vw,28px)
}
.genres {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
max-width:1300px;
margin:auto
}
.genres a {
padding:15px 18px;
background:#fff;
border-radius:6px;
font-size:13px;
font-weight:700;
border:1px solid #efeeec
;display:flex;align-items:center;gap:12px;transition:transform .2s,box-shadow .2s
}
.genres a:hover {
transform:translateY(-3px);
box-shadow:0 8px 18px #17181b12
}
.genre-icon {
display:grid;
place-items:center;
width:42px;
min-width:42px;
max-width:42px;
height:42px;
min-height:42px;
max-height:42px;
flex:0 0 42px;
border-radius:12px;
font-size:23px;
font-style:normal;
line-height:1;
overflow:hidden
}
.genre-icon svg {
display:block;
width:24px !important;
height:24px !important;
max-width:24px;
max-height:24px;
min-width:24px;
min-height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.genre-icon.action { color:#e48720 }
.genre-icon.scifi { color:#288fa3 }
.genre-icon.anime { color:#8562c9 }
.genre-icon.romance { color:#d65370 }
.genre-icon.horror { color:#595f91 }
.genre-icon.comedy { color:#d39a18 }
.genre-icon.action { background:#fff0df }
.genre-icon.scifi { background:#e5f3f6 }
.genre-icon.anime { background:#f1eafd }
.genre-icon.romance { background:#ffeaef }
.genre-icon.horror { background:#e9e9f2 }
.genre-icon.comedy { background:#fff5d9 }
.genres strong {
color:var(--red);
font-size:23px;
margin-right:0;
vertical-align:middle
}
.ranking {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px
}
.rank-card {
display:block
}
.rank {
font:700 20px 'DM Sans';
color:#c5c5c7;
display:block;
margin:0 0 6px
}
.rank-card:first-child .rank {
color:var(--red)
}
.rank-art {
min-height:180px;
border-radius:7px;
margin-bottom:12px
}
.rank-art .tiny {
width:34px;
height:34px;
font-size:10px
}
.rank-card b {
display:block;
font-size:13px
}
.rank-card small {
display:block;
color:var(--muted);
font-size:10px;
margin-top:6px
}
footer {
background:var(--dark);
color:#fff;
margin-top:90px;
padding:47px max(7vw,28px) 24px
}
.footer-inner {
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
max-width:1120px;
margin:auto
}
.footer-inner p {
color:#a3a4a9;
font-size:11px;
line-height:1.8
}
.footer-inner>div:not(:first-child) {
display:grid;
align-content:start;
gap:13px;
font-size:11px;
color:#a3a4a9
}
.footer-inner>div:not(:first-child)>b {
color:#fff;
margin-bottom:3px
}
.copyright {
border-top:1px solid #35363a;
margin:40px auto 0;
padding-top:20px;
max-width:1120px;
color:#777;
font-size:10px
}
.detail-hero {
background:var(--dark);
color:#fff;
padding:75px max(10vw,30px);
display:flex;
gap:70px;
align-items:center
}
.detail-art {
width:310px;
min-width:310px;
height:350px;
border-radius:8px
}
.detail-player {
width:520px;
min-width:520px;
aspect-ratio:16 / 9;
position:relative;
border-radius:8px;
overflow:hidden;
background:#000;
z-index:1
}
.detail-player iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0
}
.detail-art .play {
top:50%
}
.detail-copy {
max-width:560px
}
.detail-copy h1 {
font-size:clamp(30px,4vw,50px);
margin:0 0 8px
}
.subtitle {
color:#f0a0a6;
font-size:17px
}
.detail-copy>p:not(.eyebrow):not(.subtitle) {
color:#c5c5c7;
line-height:1.9
}
.meta {
display:flex;
gap:20px;
color:#aaa;
font-size:12px;
margin:25px 0
}
.meta strong {
color:#e5ad43
}
.review-layout {
max-width:1120px;
margin:auto;
padding:70px 28px;
display:grid;
grid-template-columns:1.5fr 1fr;
gap:80px
}
.review {
border-top:1px solid var(--line);
padding:23px 0
}
.review-head {
display:flex;
justify-content:space-between
}
.stars {
color:#d49a34;
font-size:13px
}
.stars i {
color:#ddd;
font-style:normal
}
.review p {
font-size:13px;
line-height:1.8
}
.review small {
color:var(--muted);
font-size:10px
}
.review-form {
background:var(--cream);
border-radius:8px;
padding:25px;
height:max-content
}
.review-form h3 {
margin-top:0
}
.review-form label,.auth-card label {
display:grid;
gap:7px;
font-size:12px;
font-weight:700;
margin:16px 0
}
.review-form select,.review-form textarea,.auth-card input {
border:1px solid #ddd;
border-radius:4px;
background:#fff;
padding:12px;
font:13px inherit
}
.review-form textarea {
min-height:130px;
resize:vertical
}
.empty {
background:var(--cream);
padding:28px;
color:var(--muted);
font-size:13px
}
.auth-card {
max-width:470px;
margin:80px auto;
padding:42px;
border:1px solid var(--line);
border-radius:8px
}
.auth-card h1 {
font-size:32px;
margin:0 0 8px
}
.auth-card>p:not(.eyebrow) {
color:var(--muted);
font-size:13px
}
.auth-card form {
margin-top:30px
}
.auth-card input {
width:100%
}
.auth-card small {
color:var(--muted);
font-weight:400
}
.auth-card .button {
width:100%;
margin-top:12px
}
.auth-foot {
text-align:center;
margin-bottom:0
}
.auth-card a {
color:var(--red);
font-weight:700
}
.error {
background:#fff0f1;
color:#bd3b4c;
padding:12px;
font-size:12px;
border-radius:4px
}

@media(max-width:800px) {
.site-header {
height:auto;
padding:16px 20px;
gap:17px;
flex-wrap:wrap
}
.site-header nav {
order:3;
flex-basis:100%;
gap:17px;
overflow:auto;
padding-bottom:2px
}
.header-actions {
margin-left:auto
}
.welcome {
display:none
}
.hero {
padding:54px 25px;
display:block
}
.hero-poster {
display:none
}
.section {
padding-top:52px
}
.movie-grid {
grid-template-columns:repeat(2,1fr);
gap:12px
}
.movie-art {
min-height:145px
}
.movie-grid .movie-card:nth-child(n+5) {
display:none
}
.genres {
grid-template-columns:repeat(2,1fr)
}
.ranking {
grid-template-columns:repeat(2,1fr)
}
.rank-card:nth-child(n+5) {
display:none
}
.rank-art {
min-height:150px
}
.detail-hero {
padding:45px 25px;
display:block
}
.detail-player {
width:100%;
min-width:0;
margin-bottom:35px
}
.review-layout {
display:block;
padding:50px 25px
}
.review-form {
margin-top:50px
}
.footer-inner {
grid-template-columns:1fr 1fr;
gap:28px
}
.footer-inner>div:first-child {
grid-column:1/-1
}
.section-heading {
align-items:start;
gap:15px;
flex-direction:column
}
.section-note {
display:none
}

}