/* General Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Target Page Styles (The Bank) */
.target-body {
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    width: 100%;
    max-width: 600px;
    background: white;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

header {
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

header h1 {
    color: #0056b3;
}

nav a {
    margin-right: 15px;
    text-decoration: none;
    color: #666;
}

.transfer-panel {
    text-align: center;
}

.btn-confirm {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
    transition: background 0.3s;
}

.btn-confirm:hover {
    background-color: #218838;
}

.btn-cancel {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
}

/* Attacker Page Styles (The Decoy) */
.attacker-body {
    background-color: #1a1a1a;
    color: #f0f0f0;
    text-align: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.decoy-container {
    position: relative;
    z-index: 1; /* Below the iframe container if we were doing a real attack, but here we want the user to fix it */
    padding-top: 50px;
}

.decoy-container h1 {
    color: #ffcc00;
    font-size: 3em;
    margin-bottom: 20px;
    animation: pulse 1s infinite;
}

.btn-claim {
    background-color: #ff0000;
    color: white;
    border: 4px solid #fff;
    padding: 20px 40px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    margin-top: 30px;
    /* This button is just a visual decoy */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Iframe Container - The Core of Clickjacking */
.iframe-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* On top of the decoy */
    opacity: 0.0; /* Invisible! Change to 0.5 to see it */
    /* pointer-events: none;  <-- This would prevent clicks, but we WANT clicks to go through */
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* 
       The challenge for the user: 
       The iframe is currently loading the full page.
       They need to position the iframe so the "CONFIRM TRANSFER" button 
       aligns perfectly with the "CLAIM PRIZE" button.
       
       Currently, it's just full screen, so clicking "CLAIM PRIZE" might miss the target button
       depending on screen size. 
       
       To make it a puzzle, let's offset it slightly or require them to change opacity to see.
    */
    position: absolute;
    top: -100px; /* Misaligned initially */
    left: -50px;
}

/* Hint Box */
.hint-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    padding: 15px;
    border: 1px solid #444;
    border-radius: 5px;
    max-width: 300px;
    text-align: left;
    z-index: 10;
}

.hint-box h3 {
    color: #00ff00;
    margin-bottom: 5px;
}

/* Success Page */
.success-body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.success-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.flag-box {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.flag {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2em;
    color: #00ff00;
}

.btn-back {
    display: inline-block;
    margin-top: 20px;
    color: white;
    text-decoration: none;
    border: 1px solid white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.2);
}