* { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body { font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; background:#f0f2f5; color:#1c1e21; line-height:1.75; }
        :root {
            --sf-yellow: #ffcc00;
            --sf-dark: #0b0b1e;
            --sf-red: #ff4757;
            --sf-blue: #3498db;
            --sf-bg-gradient: linear-gradient(115deg, #0b0b1e 0%, #1a1a2e 55%, #16213e 100%);
            --sf-card-bg: #ffffff;
        }
        .top-banner { background: var(--sf-bg-gradient); color: white; padding: 1rem 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
        .my-logo { font-size: 2.2rem; font-weight:800; letter-spacing:-1px; text-decoration:none; color: var(--sf-yellow); text-shadow: 2px 2px 0 #722F37; font-style:italic; }
        .my-logo a { color: inherit; text-decoration:none; }
        .site-tag { font-size:0.85rem; opacity:0.8; letter-spacing:2px; }
        .burger { display:none; font-size:2rem; cursor:pointer; background:none; border:none; color:var(--sf-yellow); transition:0.2s; }
        .nav-links { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; list-style:none; }
        .nav-links a { color: #eee; text-decoration:none; font-weight:500; padding:0.4rem 0.8rem; border-radius:30px; transition:0.2s; }
        .nav-links a:hover { background: rgba(255,204,0,0.8); color:#000; }
        .breadcrumb-trail { background:#fff; padding:0.75rem 2rem; font-size:0.9rem; border-bottom:1px solid #ddd; box-shadow:0 2px 4px rgba(0,0,0,0.02); }
        .breadcrumb-trail a { color: var(--sf-blue); text-decoration:none; }
        .breadcrumb-trail a:hover { text-decoration:underline; }
        .container { max-width: 1300px; margin: 0 auto; padding: 20px; display:flex; flex-wrap:wrap; gap:30px; }
        .content-main { flex: 1 1 60%; min-width:0; }
        .sidebar-extra { flex: 0 0 340px; display:flex; flex-direction:column; gap:20px; }
        .feature-card { background:var(--sf-card-bg); border-radius:28px; padding:2rem; margin-bottom:2.5rem; box-shadow:0 15px 40px rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.03); }
        .section-title { font-size:2rem; font-weight:800; margin-bottom:1rem; border-left: 10px solid var(--sf-red); padding-left:1.2rem; }
        .section-subtitle { font-weight:600; color:#34495e; }
        h1 { font-size:2.6rem; font-weight:800; background: linear-gradient(120deg, #110d0f, #e74c3c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom:0.5rem; line-height:1.2; }
        h2 { font-size:1.8rem; margin:2.2rem 0 1rem; font-weight:700; border-bottom:4px solid var(--sf-yellow); display:inline-block; }
        h3 { font-size:1.5rem; margin:1.8rem 0 0.8rem; font-weight:600; color:#2c3e50; }
        h4 { font-size:1.2rem; margin:1.2rem 0 0.4rem; font-weight:600; color: #555; }
        .search-box { background:#fff; border-radius:60px; display:flex; align-items:center; padding:0.2rem 0.2rem 0.2rem 1.5rem; box-shadow:0 4px 12px rgba(0,0,0,0.05); border: 1px solid #eee; }
        .search-box input { border:none; flex:1; padding:0.7rem; font-size:1rem; background:transparent; outline: none; }
        .search-box button { background:var(--sf-dark); border:none; color:white; width:50px; height:50px; border-radius:50%; cursor:pointer; transition:0.2s; }
        .search-box button:hover { background:var(--sf-red); }
        .img-responsive { width:100%; height:auto; border-radius:24px; margin:1.5rem 0; box-shadow:0 6px 20px rgba(0,0,0,0.15); }
        .fighter-img { width:100%; max-width:340px; border-radius:18px; border:3px solid #aaa; }
        .grid-char { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin:1.5rem 0; }
        .char-card { background:white; border-radius:22px; box-shadow:0 8px 25px rgba(0,0,0,0.05); overflow:hidden; transition:0.25s ease; border:1px solid #f0f0f0; }
        .char-card:hover { transform: translateY(-8px); box-shadow:0 18px 35px rgba(0,0,0,0.12); border-color:var(--sf-yellow); }
        .char-card .card-img { background:#1e1e2a; min-height:190px; display:flex; align-items:center; justify-content:center; color:var(--sf-yellow); font-size:3.5rem; }
        .card-body { padding: 1.2rem; }
        .char-name { font-weight:700; font-size:1.2rem; }
        .interaction-box { background: #fff; border-radius:26px; padding:1.8rem; }
        .form-group { margin-bottom:1.4rem; }
        .form-group label { font-weight:600; display:block; margin-bottom:0.3rem; }
        .form-control { width:100%; border:2px solid #e1e8ed; padding:0.8rem; border-radius:40px; background:#f9fafa; transition:0.2s; }
        .form-control:focus { border-color:var(--sf-blue); outline:none; }
        textarea.form-control { border-radius:25px; resize:vertical; }
        .btn-primary { background: var(--sf-dark); color:#ffcc00; border:none; padding:0.8rem 2.2rem; border-radius:300px; font-weight:700; cursor:pointer; transition:0.2s; font-size:1rem; }
        .btn-primary:hover { background: var(--sf-red); color:white; transform: scale(0.98); }
        .rating-stars { display:inline-block; font-size:1.5rem; color:#ddd; }
        .rating-stars i { cursor:pointer; }
        .friend-link { background:#151526; color:#ccc; display:block; padding:2rem 2rem 1rem; border-radius:30px; margin-top:2rem; font-size:0.95rem; }
        .friend-link a { color:var(--sf-yellow); text-decoration:none; margin:0 0.5rem; }
        .friend-link a:hover{ text-decoration:underline; }
        .footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:1rem; }
        @media (max-width: 900px) {
            .container { flex-direction: column; }
            .sidebar-extra { flex: 1 1 100%; }
            .burger { display:block; }
            .nav-links { display:none; width:100%; flex-direction:column; align-items:flex-start; background:#151526; padding:1rem; border-radius:20px; margin-top:0.5rem; }
            .nav-links.open { display:flex; }
            .top-banner { padding:0.8rem 1.2rem; }
        }
        @media (max-width: 600px) {
            h1 { font-size: 1.9rem; }
            .feature-card { padding:1.2rem; }
        }
        ::-webkit-scrollbar { width:8px; }
        ::-webkit-scrollbar-thumb { background:#b0b0b0; border-radius:20px; }