:root{
--blue-mid:#29B6F0;
--blue-deep:#0E7FB8;
--blue-ink:#0A5A85;
--navy:#0B2740;
--bg-page:#EFF8FC;
--card-bg:#FFFFFF;
--line:#D7ECF5;
--live-red:#FF3B57;

--mint:#1FCFA0;
--amber:#FFB020;
--radius-lg:20px;
--radius-md:14px;
--radius-sm:9px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--bg-page);
color:var(--navy);
font-family:'Noto Sans JP', sans-serif;
-webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ===== visually hidden util ===== */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

:focus-visible{
outline:3px solid var(--amber);
outline-offset:2px;
border-radius:6px;
}

/* ================= TOP NAV ================= */
.topnav{
position:sticky;
top:0;
z-index:50;
background:var(--blue-mid);
border-bottom:3px solid var(--blue-deep);
}
.topnav-inner{
max-width:1280px;
margin:0 auto;
padding:10px 24px;
display:flex;
align-items:center;
gap:20px;
}

.brand{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
}
.brand-icon{
height: 60px;
width:auto;
display:block;
}

.nav-links{
display:flex;
gap:4px;
flex-shrink:0;
}
.nav-links a{
padding:9px 14px;
border-radius:999px;
font-weight:700;
font-size:14px;
color:rgba(255,255,255,.92);
transition:background .15s ease, transform .15s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.18);}
.nav-links a.active{background:rgba(255,255,255,.95); color:var(--blue-deep);}

.search-wrap{
flex:1;
max-width:440px;
margin-left:auto;
}
.search-box{
display:flex;
align-items:center;
gap:8px;
background:rgba(255,255,255,.92);
border-radius:999px;
padding:9px 16px;
box-shadow:inset 0 1px 3px rgba(10,80,120,.12);
}
.search-box svg{flex-shrink:0; color:var(--blue-deep);}
.search-box input{
border:none;
outline:none;
background:transparent;
font-size:14px;
width:100%;
color:var(--navy);
font-family:'Noto Sans JP', sans-serif;
}
.search-box input::placeholder{color:#8FB4C6;}

.nav-actions{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
}
.btn-start{
background:var(--navy);
color:#fff;
border:none;
padding:10px 18px;
border-radius:999px;
font-weight:700;
font-size:13.5px;
cursor:pointer;
display:flex;
align-items:center;
gap:7px;
transition:transform .15s ease, background .15s ease;
white-space:nowrap;
}
.btn-start:hover{background:#123655; transform:translateY(-1px);}

.icon-btn{
width:38px;height:38px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.16);
border:none;
color:#fff;
cursor:pointer;
position:relative;
transition:background .15s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.3);}
.icon-btn .dot{
position:absolute;top:6px;right:6px;
width:8px;height:8px;border-radius:50%;
background:var(--live-red);
border:2px solid var(--blue-mid);
}

.avatar-btn{
width:38px;height:38px;border-radius:50%;
background:#FF9B5C;
border:2px solid rgba(255,255,255,.85);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-family:'M PLUS Rounded 1c',sans-serif;
font-weight:800;font-size:14px;color:#7A3410;
}

/* ============ main ============ */
main{
max-width:1280px;
margin:0 auto;
padding:28px 24px 60px;
}

.section-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
}
.section-head h1{
font-family:'M PLUS Rounded 1c',sans-serif;
font-size:22px;
font-weight:800;
color:var(--navy);
margin:0;
display:flex;
align-items:center;
gap:10px;
}
.live-pulse{
width:10px;height:10px;border-radius:50%;
background:var(--live-red);
box-shadow:0 0 0 rgba(255,59,87,.5);
animation:pulse 1.8s infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(255,59,87,.45);}
70%{box-shadow:0 0 0 9px rgba(255,59,87,0);}
100%{box-shadow:0 0 0 0 rgba(255,59,87,0);}
}
.section-head .count{
font-family:'Roboto Mono',monospace;
font-size:13px;
color:var(--blue-ink);
background:#E4F5FB;
padding:4px 10px;
border-radius:999px;
}
.section-head .sub-link{
font-size:13px;
font-weight:700;
color:var(--blue-deep);
}
.section-head .sub-link:hover{text-decoration:underline;}

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:22px;
}

.card{
background:var(--card-bg);
border-radius:var(--radius-lg);
overflow:hidden;
border:1px solid var(--line);
transition:transform .18s ease, box-shadow .18s ease;
cursor:pointer;
}
.card:hover{
transform:translateY(-4px);
box-shadow:0 14px 28px rgba(11,60,90,.14);
}

.thumb{
position:relative;
aspect-ratio:16/9;
overflow:hidden;
background:#0B2740;
}
.thumb-icon{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
opacity:.34;
}
.thumb-icon svg{width:46%;height:46%;}

.scanline{
position:absolute;
left:0;right:0;
height:40%;
background:rgba(255,255,255,.12);
transform:translateY(-100%);
transition:transform .9s ease;
pointer-events:none;
}
.card:hover .scanline{transform:translateY(250%);}

.badge-live{
position:absolute;
top:10px;left:10px;
background:var(--live-red);
color:#fff;
font-weight:700;
font-size:11.5px;
letter-spacing:.04em;
padding:5px 9px 5px 8px;
border-radius:6px;
display:flex;
align-items:center;
gap:5px;
z-index:2;
}
.badge-live .ant{
display:flex;gap:2px;
}
.badge-live .ant span{
width:3.5px;height:3.5px;border-radius:50%;
background:#fff;
animation:blink 1.4s infinite;
}
.badge-live .ant span:nth-child(2){animation-delay:.35s;}
@keyframes blink{
0%,60%,100%{opacity:1;}
30%{opacity:.25;}
}

.badge-viewers{
position:absolute;
bottom:9px;right:10px;
background:rgba(6,26,40,.72);
color:#fff;
font-family:'Roboto Mono',monospace;
font-size:12px;
font-weight:600;
padding:4px 9px;
border-radius:999px;
display:flex;
align-items:center;
gap:5px;
z-index:2;
backdrop-filter:blur(2px);
}

.cat-tag{
position:absolute;
bottom:9px;left:10px;
background:rgba(255,255,255,.9);
color:var(--blue-deep);
font-size:11px;
font-weight:700;
padding:4px 9px;
border-radius:999px;
z-index:2;
}

.card-body{
display:flex;
gap:11px;
padding:13px 14px 16px;
}
.card-avatar{
width:38px;height:38px;
border-radius:50%;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-family:'M PLUS Rounded 1c',sans-serif;
font-weight:800;
font-size:14px;
color:#fff;
margin-top:2px;
}
.card-text{min-width:0;}
.card-title{
font-size:14.5px;
font-weight:700;
color:var(--navy);
line-height:1.4;
line-clamp:2;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
margin:0 0 4px;
}
.card-name{
font-size:12.5px;
color:var(--blue-ink);
font-weight:500;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin:0 0 2px;
}
.card-tags{
font-size:11.5px;
color:#7C9CAE;
}

/* thumbnail palette variety */
.thumb.p1{background:#1F7FB8;}
.thumb.p2{background:#6B4FA6;}
.thumb.p3{background:#1C9873;}
.thumb.p4{background:#C0463B;}
.thumb.p5{background:#3E6FC2;}
.thumb.p6{background:#C68A2E;}
.thumb.p7{background:#1E8C8C;}
.thumb.p8{background:#A24FA0;}

.av1{background:#FF8A65;}
.av2{background:#42A5F5;}
.av3{background:#26C281;}
.av4{background:#FFB74D;}
.av5{background:#9575CD;}
.av6{background:#F06292;}
.av7{background:#4FC3F7;}
.av8{background:#7CB342;}

.skel{
background:var(--card-bg);
border-radius:var(--radius-lg);
overflow:hidden;
border:1px solid var(--line);
}
.skel .thumb{
background:#E4F2F8;
animation:pulse-fade 1.4s ease infinite;
}
.skel .line{
height:11px;border-radius:6px;
background:#E4F2F8;
animation:pulse-fade 1.4s ease infinite;
margin-bottom:8px;
}
.skel .card-avatar{background:#E4F2F8;}
@keyframes pulse-fade{
0%,100%{opacity:1;}
50%{opacity:.45;}
}

.state-message{
grid-column:1/-1;
text-align:center;
padding:60px 20px;
color:var(--blue-ink);
}
.state-message .state-title{
font-family:'M PLUS Rounded 1c',sans-serif;
font-weight:800;
font-size:17px;
color:var(--navy);
margin:0 0 6px;
}
.state-message p{
font-size:13.5px;
color:#7C9CAE;
margin:0 0 16px;
}
.retry-btn{
background:var(--blue-deep);
color:#fff;
border:none;
padding:9px 20px;
border-radius:999px;
font-weight:700;
font-size:13px;
cursor:pointer;
}
.retry-btn:hover{background:var(--navy);}

footer{
text-align:center;
padding:10px 30px 50px;
color:#8FAFC1;
font-size:12px;
}

/* ============ responsive ============ */
@media (max-width:900px){
.nav-links{display:none;}
}
@media (max-width:640px){
.topnav-inner{flex-wrap:wrap; padding:10px 16px;}
.search-wrap{order:3; max-width:none; width:100%; margin:0;}
.btn-start span{display:none;}
.btn-start{padding:10px 12px;}
main{padding:20px 16px 50px;}
.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
}

@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}