
.c6b{--c6-bg:#1A2130;--c6-bg2:#141B25;--c6-line:#28313F;--c6-text:#E8ECF3;--c6-soft:#C4CCD8;--c6-mute:#8A94A6;--c6-blue:#4A93FF;--c6-blue-t:#6BA7FF;--c6-green:#5FD9AF;font-family:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--c6-text);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.c6b *{box-sizing:border-box}
/* --pop: насколько персонаж выходит за верх карточки; сверху у блока оставлен такой же отступ */
.c6b{container-type:inline-size;display:flow-root;width:100%;margin:24px 0}
.c6b .c6b-card{--pop:36px;margin-top:var(--pop);position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-radius:20px;background:var(--c6-bg);border:1px solid var(--c6-line);isolation:isolate}
.c6b .c6b-art{position:relative;height:220px}
.c6b .c6b-bg{position:absolute;inset:0;overflow:hidden;border-radius:19px 19px 0 0;background:radial-gradient(90% 110% at 72% 105%,rgba(74,147,255,.28) 0%,rgba(74,147,255,0) 62%),var(--c6-bg2)}
.c6b .c6b-flag{position:absolute;left:-14%;top:10%;width:118%;height:auto;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 72%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 72%,transparent 100%)}
/* слой персонажа: выше карточки на --pop, снизу обрезан по карточке */
.c6b .c6b-pop{position:absolute;left:0;right:0;bottom:0;top:calc(-1 * var(--pop));overflow:hidden;pointer-events:none}
.c6b .c6b-hero{position:absolute;right:6%;bottom:0;height:100%;width:auto;max-width:none;filter:drop-shadow(0 12px 32px rgba(0,0,0,.45))}
.c6b .c6b-art::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(26,33,48,0) 0%,var(--c6-bg) 100%)}
.c6b .c6b-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding:6px 20px 22px}
.c6b .c6b-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c6b .c6b-over{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c6-mute)}
.c6b .c6b-pill{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.c6b .c6b-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.c6b .c6b-pill.is-open{color:var(--c6-green);background:rgba(31,192,142,.14)}
.c6b .c6b-pill.is-closed{color:var(--c6-soft);background:rgba(138,148,166,.16)}
.c6b .c6b-h{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.c6b .c6b-p{margin:0;font-size:15px;line-height:1.55;color:var(--c6-soft);max-width:34rem;text-wrap:pretty}
.c6b .c6b-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.c6b .c6b-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;border-radius:12px;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.c6b .c6b-btn.is-primary{background:var(--c6-blue);color:#0B1017}
.c6b .c6b-btn.is-primary:hover{background:#6BA7FF;color:#0B1017}
.c6b .c6b-btn.is-ghost{border:1px solid var(--c6-line);color:var(--c6-text)}
.c6b .c6b-btn.is-ghost:hover{border-color:#3A4558;color:var(--c6-text)}
.c6b .c6b-btn:focus-visible,.c6s a:focus-visible,.c6s button:focus-visible{outline:2px solid var(--c6-blue-t);outline-offset:2px}
@container (min-width:400px){.c6b .c6b-art{height:250px}.c6b .c6b-body{padding:6px 24px 26px}.c6b .c6b-h{font-size:32px}}
@container (min-width:560px){.c6b .c6b-btn{flex:0 0 auto}}
@container (min-width:680px){
 .c6b .c6b-card{--pop:48px}
 .c6b .c6b-card{grid-template-columns:minmax(0,1fr) minmax(280px,42%)}
 .c6b .c6b-art{order:2;height:auto;min-height:330px}
 .c6b .c6b-bg{border-radius:0 19px 19px 0}
 .c6b .c6b-pop{border-bottom-right-radius:19px;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%);mask-image:linear-gradient(90deg,transparent 0%,#000 16%)}
 .c6b .c6b-art::after{inset:0 auto 0 0;width:30%;height:auto;background:linear-gradient(90deg,var(--c6-bg) 0%,rgba(26,33,48,0) 100%)}
 .c6b .c6b-flag{left:-6%;top:14%;width:125%}
 .c6b .c6b-hero{right:-4%}
 .c6b .c6b-body{justify-content:center;gap:16px;padding:36px 8px 36px 40px}
 .c6b .c6b-h{font-size:38px}.c6b .c6b-p{font-size:16px}
}
@container (min-width:1000px){.c6b .c6b-card{--pop:56px}.c6b .c6b-art{min-height:360px}.c6b .c6b-body{padding:44px 16px 44px 52px;gap:18px}.c6b .c6b-h{font-size:46px}.c6b .c6b-p{font-size:17px}.c6b .c6b-hero{right:2%}}
@media (prefers-reduced-motion:no-preference){.c6b .c6b-btn{transition:background-color .15s,border-color .15s}}

.c6b .c6b-h{margin:0;border:0;padding:0;color:var(--c6-text);font-weight:800;line-height:1.05}.c6b .c6b-p{margin:0;color:var(--c6-soft)}
.c6b .c6b-btn{text-decoration:none}.c6b .c6b-btn.is-primary{color:#0B1017}.c6b .c6b-btn.is-ghost{background:transparent;color:var(--c6-text)}

.c6b .c6b-hero,.c6b .c6b-flag{margin:0;border:0;border-radius:0;box-shadow:none}
