/* =========================================================
   CODE GEASS — Lelouch / C.C. login theme for CodyChat 11
   Based on the existing AnimeViolet structure.
   Visual direction: Zero, Black Knights, Britannian red/black,
   C.C. emerald accents, Geass eye, scanlines and controlled glitch.
   ========================================================= */

:root{
	--cg-bg:#050609;
	--cg-bg-2:#0b0b10;
	--cg-panel:rgba(12,13,18,.90);
	--cg-panel-2:rgba(21,13,19,.92);
	--cg-line:rgba(255,255,255,.12);
	--cg-text:#f4f1ef;
	--cg-muted:#a69fa2;

	/* Lelouch / Zero */
	--cg-red:#a80f22;
	--cg-red-bright:#e01d38;
	--cg-blood:#650a18;
	--cg-purple:#54205f;

	/* C.C. */
	--cg-green:#73c8a3;
	--cg-green-dark:#254d43;
	--cg-gold:#d5b26a;

	/* Geass */
	--cg-geass:#d71939;
}

html,body{min-height:100%}
body{
	background:#050609;
	color:var(--cg-text);
}

#login_wrap.av-login-wrap{
	position:relative;
	min-height:100vh;
	overflow:hidden;
	color:var(--cg-text);
	font-family:Inter,"Segoe UI",Arial,sans-serif;
	background:
		radial-gradient(circle at 13% 22%,rgba(130,10,30,.24),transparent 30%),
		radial-gradient(circle at 83% 28%,rgba(75,28,75,.18),transparent 28%),
		linear-gradient(135deg,#09090d 0%,#050609 48%,#11080d 100%);
}

/* ------------------------- Atmosphere ------------------------- */
.av-atmosphere{
	position:absolute;
	inset:0;
	pointer-events:none;
	overflow:hidden;
}

/* Britannian technical grid */
.av-grid{
	position:absolute;
	inset:0;
	opacity:.16;
	background-image:
		linear-gradient(rgba(205,30,52,.13) 1px,transparent 1px),
		linear-gradient(90deg,rgba(205,30,52,.13) 1px,transparent 1px);
	background-size:48px 48px;
	-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 86%);
	mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 86%);
}

/* Two distant lights: Lelouch red / C.C. green */
.av-orb{
	position:absolute;
	border-radius:50%;
	filter:blur(18px);
	opacity:.58;
}
.av-orb-one{
	width:480px;height:480px;left:-220px;top:12%;
	background:rgba(168,15,34,.18);
	box-shadow:0 0 150px rgba(224,29,56,.18);
}
.av-orb-two{
	width:380px;height:380px;right:-160px;bottom:-100px;
	background:rgba(78,174,136,.10);
	box-shadow:0 0 140px rgba(115,200,163,.12);
}

/* Geass fragments */
.av-petal{
	position:absolute;
	color:rgba(224,29,56,.55);
	font-size:18px;
	text-shadow:0 0 12px rgba(224,29,56,.55);
	animation:cgFloat 8s ease-in-out infinite, cgFlicker 5s steps(2,end) infinite;
}
.av-petal-one{top:20%;left:4%}
.av-petal-two{top:69%;right:5%;animation-delay:-2.4s}
.av-petal-three{top:11%;right:27%;animation-delay:-4.2s}

@keyframes cgFloat{
	0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
	50%{transform:translate3d(7px,-24px,0) rotate(18deg)}
}
@keyframes cgFlicker{
	0%,89%,100%{opacity:.55}
	90%{opacity:.12}
	92%{opacity:.8}
}

/* Scanline overlay */
#login_wrap.av-login-wrap:after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:20;
	opacity:.055;
	background:repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 2px,
		#fff 3px,
		transparent 4px
	);
	mix-blend-mode:screen;
}

/* ------------------------- Top bar ------------------------- */
.av-topbar{
	position:relative;
	z-index:25;
	width:min(1240px,calc(100% - 40px));
	margin:0 auto;
	min-height:65px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
}

.av-brand{
	display:flex;
	align-items:center;
	gap:12px;
	color:var(--cg-text)!important;
	text-decoration:none!important;
}

.av-brand-mark{
	position:relative;
	display:grid;
	place-items:center;
	width:46px;height:46px;
	border-radius:4px;
	background:linear-gradient(145deg,#16070b,var(--cg-red));
	border:1px solid rgba(224,29,56,.75);
	box-shadow:0 10px 34px rgba(120,8,24,.30),inset 0 1px rgba(255,255,255,.18);
	transform:skewX(-4deg);
}
.av-brand-mark:before{
	content:"";
	position:absolute;
	inset:5px;
	border:1px solid rgba(213,178,106,.42);
}
.av-brand-mark i{font-size:19px}
.av-brand strong,.av-brand small{display:block}
.av-brand strong{
	font-size:17px;
	line-height:1.15;
	letter-spacing:1.8px;
	text-transform:uppercase;
}
.av-brand small{
	margin-top:4px;
	color:#9d777e;
	font-size:8px;
	font-weight:900;
	letter-spacing:2.3px;
}

.av-top-actions{display:flex;align-items:center;gap:12px}
.av-live-chip{
	display:flex;
	align-items:center;
	gap:8px;
	padding:8px 13px;
	border:1px solid rgba(213,178,106,.20);
	border-radius:3px;
	background:rgba(0,0,0,.28);
	font-size:10px;
	color:#c9c1bf;
	text-transform:uppercase;
	letter-spacing:1px;
}
.av-live-chip i{
	width:7px;height:7px;border-radius:50%;
	background:var(--cg-green);
	box-shadow:0 0 11px var(--cg-green);
}

.av-language{
	width:55px;height:30px;
	display:flex;align-items:center;justify-content:center;gap:5px;
	border:1px solid rgba(224,29,56,.32);
	border-radius:3px;
	color:#fff;
	background:rgba(0,0,0,.32);
	cursor:pointer;
	transition:all .2s ease;
}
.av-language:hover{
	border-color:var(--cg-red-bright);
	box-shadow:0 0 18px rgba(224,29,56,.18);
}

.av-language img {
    width: 19px;
    height: 16px;
    border-radius: 20%;
    object-fit: cover;
}

/* ------------------------- Main ------------------------- */
.av-main{
	position:relative;
	z-index:2;
	width:min(1240px,calc(100% - 40px));
	min-height:calc(100vh - 160px);
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
	align-items:center;
	gap:clamp(30px,5vw,78px);
	padding:5px 0;
}

.av-hero{
	position:relative;
	min-height:600px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	top: -5%;
}

.av-kicker{
	display:flex;
	align-items:center;
	gap:10px;
	color:#c69ca4;
	font-size:9px;
	font-weight:900;
	letter-spacing:2.8px;
	text-transform:uppercase;
	z-index:3;
}
.av-kicker i{
	width:42px;height:1px;
	background:linear-gradient(90deg,var(--cg-red-bright),transparent);
}

.av-hero h1{
	position:relative;
	z-index:2;
	max-width:590px;
	margin:18px 0 10px;
	font-size:clamp(42px,5.1vw,78px);
	line-height:.94;
	letter-spacing:-3px;
	font-weight:950;
	text-transform:uppercase;
	text-shadow:0 15px 55px rgba(0,0,0,.60);
}

/* Chromatic/glitch entrance on the main title */
.av-hero h1:before,
.av-hero h1:after{
	content:attr(data-text);
	position:absolute;
	inset:0;
	pointer-events:none;
	opacity:0;
}
.av-hero h1:before{
	color:var(--cg-red-bright);
	transform:translate(3px,0);
	clip-path:inset(0 0 68% 0);
	animation:cgTitleGlitch 6s steps(1,end) infinite;
}
.av-hero h1:after{
	color:var(--cg-green);
	transform:translate(-3px,0);
	clip-path:inset(67% 0 0 0);
	animation:cgTitleGlitch 6s steps(1,end) infinite reverse;
}

@keyframes cgTitleGlitch{
	0%,82%,100%{opacity:0}
	83%{opacity:.7;transform:translate(5px,-1px)}
	84%{opacity:0}
	87%{opacity:.55;transform:translate(-4px,1px)}
	88%{opacity:0}
}

.av-lead{
	position:relative;
	z-index:2;
	max-width:380px;
	margin:0;
	color:var(--cg-muted);
	font-size:14px;
	line-height:1.75;
}

/* ------------------------- Character / moon ------------------------- */
.av-character-stage{
	position:absolute;
	right:-4%;
	bottom:0;
	width:78%;
	height:88%;
	pointer-events:none;
}

.av-moon{
	position:absolute;
	width:67%;
	aspect-ratio:1;
	right:7%;
	top:10%;
	border-radius:50%;
	background:
		radial-gradient(circle at 35% 30%,rgba(255,255,255,.13),transparent 16%),
		linear-gradient(145deg,#331528,#130a10 63%,#08070b);
	border:1px solid rgba(213,178,106,.20);
	box-shadow:
		0 0 100px rgba(115,24,44,.24),
		inset 12px 12px 45px rgba(255,255,255,.035);
}
.av-moon:before{
	content:"";
	position:absolute;
	inset:7%;
	border:1px solid rgba(213,178,106,.20);
	border-radius:50%;
}
.av-moon:after{
	content:"GEASS";
	position:absolute;
	left:13%;
	bottom:13%;
	color:rgba(224,29,56,.18);
	font-size:9px;
	font-weight:900;
	letter-spacing:5px;
	transform:rotate(-18deg);
}

.av-character-frame{
	position:absolute;
	inset:0;
	-webkit-mask-image:radial-gradient(ellipse 68% 70% at 58% 52%,#000 56%,rgba(0,0,0,.96) 70%,transparent 98%);
	mask-image:radial-gradient(ellipse 68% 70% at 58% 52%,#000 56%,rgba(0,0,0,.96) 70%,transparent 98%);
	transform: scaleX(-1);
}

.av-character-frame img{
	width:103%;
	height:90%;
	object-fit:contain;
	object-position:center bottom;
	filter:saturate(.84) contrast(1.10) sepia(.08) drop-shadow(0 28px 32px rgba(0,0,0,.62));
	animation:cgCharacterIn .9s cubic-bezier(.18,.78,.28,1) both;
}

@keyframes cgCharacterIn{
	0%{opacity:0;transform:translateX(28px) scale(1.035);filter:brightness(1.8) saturate(.2)}
	65%{opacity:1;transform:translateX(-4px) scale(1)}
	100%{opacity:1;transform:translateX(0) scale(1)}
}

.av-character-tag{
	position:absolute;
	right:4%;
	bottom:15%;
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 12px;
	border:1px solid rgba(213,178,106,.24);
	border-radius:2px;
	background:rgba(10,8,11,.82);
	backdrop-filter:blur(10px);
	font-size:9px;
	font-weight:900;
	letter-spacing:1.7px;
	color:#ddd2d0;
	box-shadow:5px 5px 0 rgba(101,10,24,.18);
}
.av-character-tag i{color:var(--cg-green)}

.av-hero-copy{
	position:absolute;
	z-index:3;
	left:0;
	bottom:3%;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.av-hero-copy strong{
	font-size:31px;
	line-height:1;
	letter-spacing:2px;
	text-transform:uppercase;
}
.av-hero-copy em{color:var(--cg-red-bright);font-style:normal}
.av-hero-copy span{
	color:#8f8588;
	font-size:10px;
	letter-spacing:1.6px;
	text-transform:uppercase;
}

/* ------------------------- Login panel ------------------------- */
.av-panel{
	position:relative;
	padding:28px;
	border:1px solid rgba(213,178,106,.18);
	border-radius:4px;
	background:
		linear-gradient(145deg,rgba(32,17,23,.95),rgba(8,9,13,.94));
	box-shadow:
		0 34px 90px rgba(0,0,0,.58),
		12px 12px 0 rgba(101,10,24,.08),
		inset 0 1px rgba(255,255,255,.07);
	backdrop-filter:blur(20px);
	animation:cgPanelIn .65s cubic-bezier(.18,.72,.24,1) both;
}

@keyframes cgPanelIn{
	0%{opacity:0;transform:translateY(18px) skewX(-1deg)}
	100%{opacity:1;transform:translateY(0) skewX(0)}
}

.av-panel:before{
	content:"";
	position:absolute;
	inset:-1px;
	z-index:-1;
	border-radius:5px;
	background:linear-gradient(135deg,rgba(224,29,56,.38),transparent 36%,rgba(115,200,163,.10));
	opacity:.75;
}
.av-panel:after{
	content:"ZERO / 01";
	position:absolute;
	right:20px;
	top:13px;
	color:rgba(213,178,106,.25);
	font-size:7px;
	font-weight:900;
	letter-spacing:2px;
}

.av-panel-head{display:flex;align-items:center;gap:16px}
.av-logo{
	width:66px;height:66px;flex:0 0 66px;
	display:grid;place-items:center;
	border-radius:3px;
	background:linear-gradient(145deg,rgba(168,15,34,.22),rgba(115,200,163,.05));
	border:1px solid rgba(213,178,106,.24);
	box-shadow:inset 0 0 0 3px rgba(0,0,0,.18);
}
.av-logo img{max-width:52px;max-height:52px;object-fit:contain}

.av-panel-head h2{
	margin:1px 0 3px;
	font-size:26px;
	line-height:1;
	text-transform:uppercase;
	letter-spacing:1px;
}
.av-panel-head p{margin:0;color:var(--cg-muted);font-size:11px}
.av-japanese{
	display:block;
	color:var(--cg-green);
	font-size:10px;
	font-weight:900;
	letter-spacing:2px;
}

/* ------------------------- Action buttons ------------------------- */
.av-actions{display:grid;gap:10px;margin-top:15px}

.av-action{
	position:relative;
	width:100%;
	min-height:67px;
	display:grid;
	grid-template-columns:46px 1fr 18px;
	align-items:center;
	gap:12px;
	padding:9px 14px 9px 10px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:3px;
	color:var(--cg-text);
	text-align:left;
	background:rgba(255,255,255,.035);
	cursor:pointer;
	overflow:hidden;
	transition:
		transform .18s cubic-bezier(.2,.9,.25,1),
		border-color .18s ease,
		background .18s ease,
		box-shadow .18s ease;
}

.av-action:before{
	content:"";
	position:absolute;
	left:0;top:0;bottom:0;
	width:3px;
	background:var(--cg-red);
	transform:scaleY(0);
	transform-origin:center;
	transition:transform .18s ease;
}
.av-action:hover{
	transform:translateX(5px);
	border-color:rgba(224,29,56,.50);
	background:rgba(168,15,34,.10);
	box-shadow:-8px 0 24px rgba(168,15,34,.08);
}
.av-action:hover:before{transform:scaleY(1)}
.av-action:active{transform:translateX(2px) scale(.995)}

.av-action-primary{
	border-color:rgba(224,29,56,.56);
	background:linear-gradient(100deg,rgba(125,11,29,.94),rgba(43,14,21,.95));
	box-shadow:0 15px 34px rgba(94,8,24,.22);
}
.av-action-primary:hover{
	background:linear-gradient(100deg,#a80f22,#47101c);
	border-color:rgba(224,29,56,.82);
}

.av-action-icon{
	width:46px;height:46px;
	display:grid;place-items:center;
	border-radius:2px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.08);
	box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.av-action strong,.av-action small{display:block}
.av-action strong{
	font-size:13px;
	letter-spacing:.8px;
	text-transform:uppercase;
}
.av-action small{
	margin-top:3px;
	color:rgba(255,255,255,.52);
	font-size:9px;
	letter-spacing:.3px;
}

/* Subtle Zero-style signal interference */
.av-action:nth-child(3n+1):hover .av-action-icon{
	animation:cgSignal .42s steps(2,end);
}
@keyframes cgSignal{
	0%,100%{transform:translateX(0)}
	25%{transform:translateX(-2px)}
	50%{transform:translateX(3px)}
	75%{transform:translateX(-1px)}
}

/* ------------------------- Community ------------------------- */
.av-divider{
	display:flex;align-items:center;gap:12px;
	margin:18px 0 12px;
	color:#766c70;
	font-size:8px;font-weight:900;letter-spacing:2px;
}
.av-divider:before,.av-divider:after{
	content:"";flex:1;height:1px;
	background:linear-gradient(90deg,transparent,rgba(213,178,106,.20));
}
.av-divider:after{transform:scaleX(-1)}

.av-active-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.av-active-head strong,.av-active-head small{display:block}
.av-active-head strong{
	font-size:12px;
	letter-spacing:1px;
	text-transform:uppercase;
}
.av-active-head small{margin-top:3px;color:var(--cg-muted);font-size:9px}
.av-active-head>span{
	padding:6px 10px;
	border-radius:2px;
	color:#a6ddc3;
	background:rgba(115,200,163,.08);
	border:1px solid rgba(115,200,163,.12);
	font-size:9px;
	letter-spacing:1px;
}

.av-active-list{
	display:flex;gap:8px;margin-top:10px;overflow-x:auto;
	padding:2px 1px 8px;scrollbar-width:none;
}
.av-active-list::-webkit-scrollbar{display:none}
.av-member{width:54px;flex:0 0 54px;text-align:center}
.av-avatar{
	position:relative;display:block;width:48px;height:48px;margin:0 auto;
	padding:2px;border-radius:3px;
	background:linear-gradient(145deg,var(--cg-red-bright),var(--cg-gold),var(--cg-green));
}
.av-avatar img{
	width:100%;height:100%;object-fit:cover;
	border:2px solid #100b0e;border-radius:2px;
}
.av-avatar i{
	position:absolute;right:-1px;bottom:0;width:9px;height:9px;
	border:2px solid #130b0e;border-radius:50%;
	background:var(--cg-green);
	box-shadow:0 0 8px rgba(115,200,163,.75);
}
.av-member>span:last-child{
	display:block;margin-top:6px;overflow:hidden;color:#cfc6c5;
	font-size:9px;white-space:nowrap;text-overflow:ellipsis;
}
.av-empty{
	width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
	min-height:54px;border:1px dashed rgba(213,178,106,.16);
	border-radius:3px;color:#847a7e;font-size:10px;
}

/* ------------------------- Radio ------------------------- */
.av-player{
	display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:13px;
	margin-top:12px;padding:12px;
	border:1px solid rgba(213,178,106,.15);
	border-radius:3px;background:rgba(2,3,5,.52);
}
.av-player.is-empty{opacity:.65}
.av-cover{
	position:relative;width:54px;height:54px;display:grid;place-items:center;
	overflow:hidden;border-radius:2px;color:#fff;
	background:linear-gradient(145deg,#6c0c1d,#1a1116 58%,#17382e);
	border:1px solid rgba(213,178,106,.18);
}
.av-cover:before{
	content:"";position:absolute;width:36px;height:36px;
	border:1px solid rgba(213,178,106,.25);border-radius:50%;
}
.av-cover i{position:relative;z-index:2}
.av-cover span{
	position:absolute;inset:auto -15px -20px auto;width:44px;height:44px;
	border-radius:50%;background:rgba(115,200,163,.28);filter:blur(8px);
}
.av-track{min-width:0;position:relative}
.av-track small{
	display:block;color:#d39aa3;font-size:8px;font-weight:900;letter-spacing:1.4px;
}
.av-track strong{
	display:block;margin-top:4px;overflow:hidden;font-size:11px;
	white-space:nowrap;text-overflow:ellipsis;
}
.av-equalizer{display:flex;align-items:flex-end;gap:2px;height:10px;margin-top:5px}
.av-equalizer i{
	display:block;width:2px;height:3px;border-radius:0;background:var(--cg-green);
}
.av-player.is-playing .av-equalizer i{animation:cgEq .75s ease-in-out infinite alternate}
.av-player.is-playing .av-equalizer i:nth-child(2){animation-delay:-.4s}
.av-player.is-playing .av-equalizer i:nth-child(3){animation-delay:-.2s}
.av-player.is-playing .av-equalizer i:nth-child(4){animation-delay:-.55s}
@keyframes cgEq{to{height:10px}}

.av-player-buttons{display:flex;align-items:center;gap:4px}
.av-player-buttons button{
	width:31px;height:31px;display:grid;place-items:center;
	border:0;border-radius:2px;color:#aaa0a3;background:transparent;cursor:pointer;
}
.av-player-buttons button:hover{color:#fff;background:rgba(168,15,34,.16)}
.av-player-buttons .av-play{
	width:39px;height:39px;color:#f5eeee;
	background:linear-gradient(145deg,#c91c35,#70101e);
	border:1px solid rgba(224,29,56,.52);
	box-shadow:0 8px 20px rgba(115,10,27,.25);
}

/* ------------------------- Footer ------------------------- */
.av-panel-footer{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	margin-top:17px;padding-top:15px;
	border-top:1px solid rgba(213,178,106,.10);
	color:#857a7e;font-size:9px;
}
.av-panel-footer span{display:flex;align-items:center;gap:6px}
.av-panel-footer i{color:var(--cg-green)}
.av-panel-footer button{
	border:0;padding:4px;color:#c79ca4;background:transparent;cursor:pointer;font-size:9px;
}
.av-panel-footer button:hover{color:#fff}

.av-footer{
	position:relative;z-index:3;width:min(1240px,calc(100% - 40px));
	min-height:50px;margin:0 auto;display:flex;align-items:center;
	justify-content:space-between;gap:24px;
	border-top:1px solid rgba(213,178,106,.10);
	color:#71686c;font-size:9px;letter-spacing:.5px;
}
.av-footer nav{display:flex;gap:18px}
.av-footer a{color:#91878a!important;text-decoration:none!important}
.av-footer a:hover{color:#fff!important}

.av-login-wrap .section{position:absolute;width:1px;height:1px;overflow:hidden}

/* ------------------------- CodyChat native modal ------------------------- */
body:has(.av-login-wrap) #small_modal_in{
	max-width:430px;
	border:1px solid rgba(224,29,56,.38);
	border-radius:3px;
	background:linear-gradient(145deg,#211016,#0d0c10);
	box-shadow:0 30px 90px rgba(0,0,0,.72),8px 8px 0 rgba(101,10,24,.12);
}
body:has(.av-login-wrap) #small_modal_content{color:#fff}
body:has(.av-login-wrap) #small_modal_content .full_input,
body:has(.av-login-wrap) #small_modal_content select{
	min-height:48px;
	border:1px solid rgba(213,178,106,.16);
	border-radius:3px;
	color:#fff;
	background:rgba(255,255,255,.055);
}
body:has(.av-login-wrap) #small_modal_content .full_input:focus,
body:has(.av-login-wrap) #small_modal_content select:focus{
	border-color:rgba(224,29,56,.72);
	box-shadow:0 0 0 2px rgba(224,29,56,.08);
}
body:has(.av-login-wrap) #small_modal_content .theme_btn{
	border-radius:3px;
	background:linear-gradient(100deg,#a80f22,#4d101b);
	border:1px solid rgba(224,29,56,.52);
}

/* Modal entrance "signal error" */
body:has(.av-login-wrap) #small_modal_in{
	animation:cgModalIn .34s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes cgModalIn{
	0%{opacity:0;transform:translateY(14px) scale(.985);filter:contrast(1.5)}
	72%{opacity:1;transform:translateY(-2px) scale(1.002)}
	100%{opacity:1;transform:translateY(0) scale(1);filter:none}
}

/* Keep the original transparent CodyChat intro layer */
#intro_top{background:rgb(4 47 76 / 0%) !important}
#intro_top::before{background:rgb(4 47 76 / 0%) !important}

/* ------------------------- Responsive ------------------------- */
@media (max-width:1050px){
	.av-main{grid-template-columns:minmax(0,.95fr) minmax(390px,1.05fr);gap:30px}
	.av-hero{min-height:650px}
	.av-hero h1{font-size:54px}
	.av-character-stage{width:95%;right:-13%}
}

@media (max-width:820px){
	.av-topbar{min-height:72px}
	.av-main{
		width:min(620px,calc(100% - 28px));
		grid-template-columns:1fr;
		padding-top:10px;
	}
	.av-hero{
		min-height:640px;
		border:1px solid rgba(213,178,106,.13);
		border-radius:4px;
		overflow:hidden;
		padding:28px;
		background:linear-gradient(180deg,rgba(101,10,24,.16),rgba(5,4,8,.22));
	}
	.av-hero h1{max-width:90%;font-size:clamp(42px,11vw,66px)}
	.av-character-stage{width:92%;height:76%;right:-7%;bottom:0}
	.av-character-tag{right:7%}
	.av-hero-copy{left:28px;bottom:24px}
	.av-panel{margin-top:-18px}
}

@media (max-width:560px){
	.av-topbar{width:calc(100% - 24px)}
	.av-brand strong{max-width:155px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
	.av-brand small,.av-live-chip{display:none}
	.av-main{width:calc(100% - 18px);gap:16px;padding-bottom:28px}
	.av-hero{min-height:400px;padding:22px;border-radius:4px}
	.av-kicker{font-size:8px}
	.av-hero h1{margin-top:13px;font-size:42px;letter-spacing:-2px}
	.av-lead{max-width:60%;font-size:12px}
	.av-character-stage{width:112%;height:78%;right:-25%}
	.av-moon{width:60%;right:17%;top:14%}
	.av-character-tag{display:none}
	.av-hero-copy{left:22px;bottom:20px}
	.av-hero-copy strong{font-size:25px}
	.av-panel{padding:20px 16px;border-radius:4px}
	.av-panel-head{gap:12px}
	.av-logo{width:56px;height:56px;flex-basis:56px;border-radius:3px}
	.av-logo img{max-width:44px;max-height:44px}
	.av-panel-head h2{font-size:22px}
	.av-action{min-height:62px;grid-template-columns:42px 1fr 16px}
	.av-action-icon{width:42px;height:42px}
	.av-player{grid-template-columns:48px 1fr auto;gap:9px;padding:9px}
	.av-cover{width:48px;height:48px}
	.av-player-buttons button:not(.av-play){display:none}
	.av-footer{
		width:calc(100% - 24px);
		flex-direction:column;
		justify-content:center;
		gap:8px;
		padding:18px 0;
	}
}

/* Respect accessibility settings */
@media (prefers-reduced-motion:reduce){
	.av-petal,
	.av-player.is-playing .av-equalizer i,
	.av-character-frame img,
	.av-panel,
	.av-hero h1:before,
	.av-hero h1:after,
	body:has(.av-login-wrap) #small_modal_in{
		animation:none!important;
	}
	.av-action{transition:none}
}

/* ===== ZERO / BLACK KNIGHTS — tactical mecha effects ===== */
.av-character-stage{right:-5%;width:83%;height:91%}
.cg-target-ring{position:absolute;z-index:1;left:43%;top:30%;border:1px solid rgba(201,170,105,.20);border-radius:50%;transform:translate(-50%,-50%)}
.cg-target-ring-1{width:49%;aspect-ratio:1;animation:cgReticle 16s linear infinite}
.cg-target-ring-2{width:31%;aspect-ratio:1;border-color:rgba(226,26,55,.25);animation:cgReticleReverse 10s linear infinite}
.cg-target-ring:before,.cg-target-ring:after{content:"";position:absolute;left:50%;top:50%;background:rgba(201,170,105,.22);transform:translate(-50%,-50%)}
.cg-target-ring:before{width:115%;height:1px}.cg-target-ring:after{height:115%;width:1px}
@keyframes cgReticle{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cgReticleReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.cg-crosshair{position:absolute;z-index:3;width:18px;height:18px;border:1px solid rgba(226,26,55,.55)}
.cg-crosshair:before,.cg-crosshair:after{content:"";position:absolute;background:rgba(226,26,55,.45)}
.cg-crosshair:before{width:30px;height:1px;left:-7px;top:8px}.cg-crosshair:after{height:30px;width:1px;left:8px;top:-7px}
.cg-crosshair-a{left:22%;top:35%;animation:cgLock 3.4s ease-in-out infinite}.cg-crosshair-b{right:7%;top:51%;animation:cgLock 4.2s ease-in-out infinite reverse}
@keyframes cgLock{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.cg-mecha-label{position:absolute;z-index:8;color:rgba(201,170,105,.58);font-size:7px;font-weight:900;letter-spacing:2px;text-transform:uppercase;padding:5px 7px;border-left:2px solid #e21a37;background:rgba(0,0,0,.38)}
.cg-label-top{right:7%;top:15%}.cg-label-bottom{left:8%;bottom:17%;border-left-color:#69c7a2}
.av-character-frame img{transform-origin:58% 80%;animation:cgMechaEntrance .95s cubic-bezier(.16,.8,.2,1) both,cgMechaIdle 6s ease-in-out 1s infinite;filter:saturate(.78) contrast(1.16) brightness(.96) drop-shadow(0 30px 28px rgba(0,0,0,.72))}
@keyframes cgMechaEntrance{0%{opacity:0;transform:translate(45px,10px) scale(1.07) rotate(1deg);filter:brightness(1.8) saturate(.1) contrast(1.6)}55%{opacity:1;transform:translate(-7px,-2px) scale(1.01) rotate(-.25deg)}100%{opacity:1;transform:translate(0) scale(1) rotate(0);filter:saturate(.78) contrast(1.16) brightness(.96) drop-shadow(0 30px 28px rgba(0,0,0,.72))}}
@keyframes cgMechaIdle{0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}22%{transform:translate3d(-2px,-5px,0) rotate(-.25deg) scale(1.003)}50%{transform:translate3d(3px,2px,0) rotate(.22deg) scale(.998)}76%{transform:translate3d(-1px,-3px,0) rotate(-.12deg) scale(1.002)}}
.av-character-frame:after{content:"";position:absolute;inset:16% 17% 12% 15%;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent 43%,rgba(226,26,55,.18) 50%,transparent 57%);mix-blend-mode:screen;opacity:0;animation:cgEnergyPulse 7s ease-in-out infinite}
@keyframes cgEnergyPulse{0%,70%,100%{opacity:0;transform:translateX(-30%)}74%{opacity:.8}78%{opacity:0;transform:translateX(30%)}}
.av-atmosphere:before,.av-atmosphere:after{content:"";position:absolute;left:-10%;width:120%;height:1px;background:linear-gradient(90deg,transparent,rgba(226,26,55,.42),transparent);opacity:.35;animation:cgScan 7s linear infinite}.av-atmosphere:before{top:28%}.av-atmosphere:after{top:72%;animation-delay:-3.2s}
@keyframes cgScan{0%{transform:translateX(-8%)}50%{transform:translateX(8%)}100%{transform:translateX(-8%)}}
.av-hero h1:before,.av-hero h1:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}.av-hero h1:before{color:#e21a37;transform:translate(4px,0);clip-path:inset(8% 0 67% 0);animation:cgGlitch 5.5s steps(1,end) infinite}.av-hero h1:after{color:#69c7a2;transform:translate(-3px,0);clip-path:inset(69% 0 4% 0);animation:cgGlitch 5.5s steps(1,end) infinite reverse}
@keyframes cgGlitch{0%,82%,100%{opacity:0}83%{opacity:.7}84%{opacity:0}87%{opacity:.48}88%{opacity:0}}
@media(max-width:560px){.cg-mecha-label{display:none}.cg-target-ring-1{width:45%}.cg-target-ring-2{width:28%}}
@media(prefers-reduced-motion:reduce){.cg-target-ring,.cg-crosshair,.av-character-frame img,.av-character-frame:after,.av-hero h1:before,.av-hero h1:after,.av-atmosphere:before,.av-atmosphere:after{animation:none!important}}