{% extends "layout.html" %}

{% block content %}

<style>
    body {
        overflow: hidden;
    }

    .victory-page {
        position: fixed;
        inset: 0;
        background: linear-gradient(180deg, rgba(120, 0, 40, 0.85) 0%, rgba(10, 20, 50, 0.95) 70%, rgba(5, 15, 35, 1) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
    }

    .victory-bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

        .victory-bg::before,
        .victory-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        /* feine Linien */
        .victory-bg::before {
            background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255,120,120,0.18) 1px, transparent 1px), linear-gradient(45deg, rgba(255,120,120,0.08) 1px, transparent 1px);
            background-size: 180px 180px, 180px 180px, 320px 320px, 280px 280px;
            opacity: 0.8;
        }

        /* rote Flächen / Tech-Glas */
        .victory-bg::after {
            background: linear-gradient(125deg, transparent 0%, transparent 60%, rgba(255,80,80,0.18) 60%, rgba(255,80,80,0.18) 68%, transparent 68%), linear-gradient(140deg, transparent 0%, transparent 72%, rgba(255,160,160,0.12) 72%, rgba(255,160,160,0.12) 76%, transparent 76%), linear-gradient(180deg, rgba(255,0,70,0.10) 0%, transparent 35%), linear-gradient(90deg, transparent 0%, transparent 15%, rgba(255,0,70,0.08) 15%, rgba(255,0,70,0.08) 16%, transparent 16%, transparent 70%, rgba(255,180,180,0.08) 70%, rgba(255,180,180,0.08) 71%, transparent 71%);
        }

    .panel {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 50px 40px;
        width: min(900px, 90vw);
        border-radius: 24px;
        background: rgba(10, 20, 40, 0.35);
        backdrop-filter: blur(6px);
        box-shadow: 0 0 40px rgba(0,0,0,0.35);
        animation: fadeInUp 1.1s ease;
    }

    .cancom-logo {
        font-size: 88px;
        font-weight: 900;
        letter-spacing: 1px;
        color: #e30613;
        margin-bottom: 28px;
        line-height: 1;
        text-transform: uppercase;
    }

    .success-title {
        font-size: 50px;
        font-weight: 800;
        color: white;
        margin-bottom: 24px;
    }

    .success-text {
        font-size: 30px;
        line-height: 1.5;
        color: #f4f6fb;
        margin-bottom: 30px;
    }

    .mission-badge {
        display: inline-block;
        padding: 16px 28px;
        border-radius: 14px;
        background: #e30613;
        color: white;
        font-size: 24px;
        font-weight: 700;
        box-shadow: 0 0 20px rgba(227, 6, 19, 0.35);
    }

    .corner-line {
        position: absolute;
        border: 1px solid rgba(255, 180, 180, 0.25);
        box-shadow: 0 0 18px rgba(255, 120, 120, 0.08);
    }

        .corner-line.one {
            top: 8%;
            left: 18%;
            width: 280px;
            height: 120px;
        }

        .corner-line.two {
            top: 16%;
            right: 10%;
            width: 220px;
            height: 220px;
            transform: skewX(-18deg);
        }

        .corner-line.three {
            bottom: 12%;
            right: 7%;
            width: 320px;
            height: 160px;
            transform: skewX(-25deg);
        }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @media (max-width: 768px) {
        .cancom-logo {
            font-size: 56px;
        }

        .success-title {
            font-size: 34px;
        }

        .success-text {
            font-size: 22px;
        }

        .mission-badge {
            font-size: 20px;
        }
    }
</style>

<div class="victory-page">
    <div class="victory-bg"></div>

    <div class="corner-line one"></div>
    <div class="corner-line two"></div>
    <div class="corner-line three"></div>

    <div class="panel">
        <div class="cancom-logo">CANCOM</div>

        <div class="success-title">Herzlichen Glückwunsch!</div>

        <div class="success-text">
            Ihr habt die <strong>CANCOM</strong><br>
            vor dem Hackerangriff gerettet.
        </div>

        <div class="mission-badge">Mission erfüllt</div>
    </div>
</div>

{% endblock %}