<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Crimson Circle</title>
<style>
/* ===== Reset & Base ===== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 50%, #0a0a0a 100%);
color: #e0d5c1;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
/* ===== Container ===== */
.container {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 40px 36px;
background: rgba(18, 12, 10, 0.92);
border: 1px solid rgba(180, 40, 40, 0.35);
border-radius: 16px;
box-shadow:
0 0 40px rgba(180, 20, 20, 0.15),
inset 0 0 60px rgba(60, 10, 10, 0.25);
backdrop-filter: blur(2px);
transition: box-shadow 0.5s ease;
}
/* ===== Header ===== */
h1 {
font-size: 2rem;
font-weight: 300;
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
color: #b83030;
text-shadow: 0 0 12px rgba(200, 30, 30, 0.5), 0 2px 0 #000;
padding-bottom: 16px;
border-bottom: 1px solid rgba(180, 40, 40, 0.3);
margin-bottom: 24px;
}
/* ===== Body Text ===== */
p {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 18px;
color: #ccc0af;
}
/* ===== List ===== */
ul {
list-style: none;
margin: 0 0 24px 0;
padding: 0;
}
ul li {
position: relative;
padding: 10px 16px 10px 40px;
margin-bottom: 8px;
background: rgba(60, 20, 20, 0.25);
border-left: 3px solid #8a2b2b;
border-radius: 0 6px 6px 0;
font-size: 0.95rem;
color: #d6c9b8;
transition: background 0.2s ease, border-color 0.2s ease;
}
ul li::before {
content: "◈";
position: absolute;
left: 14px;
top: 10px;
color: #b83030;
font-size: 1rem;
}
ul li:hover {
background: rgba(80, 25, 25, 0.35);
border-left-color: #c94444;
}
/* ===== Puzzle Section ===== */
#game {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid rgba(180, 40, 40, 0.25);
text-align: center;
}
#game p {
font-style: italic;
color: #a09080;
font-size: 0.95rem;
}
/* ===== Input & Button ===== */
input[type="number"] {
width: 120px;
padding: 10px 14px;
font-size: 1.1rem;
text-align: center;
background: #1e1412;
color: #e0d5c1;
border: 1px solid #5a2a2a;
border-radius: 8px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
margin-right: 8px;
}
input[type="number"]:focus {
border-color: #b83030;
box-shadow: 0 0 12px rgba(180, 40, 40, 0.3);
}
/* Hide spinner for number input */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
button {
padding: 10px 28px;
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #e0d5c1;
background: linear-gradient(180deg, #6e1e1e, #441212);
border: 1px solid #8a2b2b;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
button:hover {
background: linear-gradient(180deg, #8a2828, #551818);
box-shadow: 0 0 18px rgba(180, 40, 40, 0.3);
}
button:active {
transform: scale(0.97);
}
/* ===== Message ===== */
#message {
min-height: 1.6em;
margin-top: 16px;
font-size: 1rem;
color: #c95a5a;
text-shadow: 0 0 6px rgba(200, 60, 60, 0.3);
transition: color 0.3s ease;
}
/* ===== Symbol / Emblem ===== */
.cult-emblem {
display: block;
width: 120px;
height: 120px;
margin: 0 auto 20px auto;
border-radius: 50%;
border: 2px solid #8a2b2b;
box-shadow: 0 0 30px rgba(180, 40, 40, 0.2);
background: radial-gradient(circle at 40% 40%, #2e1212, #0f0808);
}
/* ===== Responsive ===== */
@media (max-width: 520px) {
.container {
padding: 24px 18px;
}
h1 {
font-size: 1.4rem;
letter-spacing: 2px;
}
input[type="number"] {
width: 90px;
margin-right: 6px;
}
button {
padding: 10px 18px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Emblem -->
<svg class="cult-emblem" viewBox="0 0 100 100" aria-hidden="true">
<circle cx="50" cy="50" r="46" fill="none" stroke="#8a2b2b" stroke-width="2"/>
<circle cx="50" cy="50" r="36" fill="none" stroke="#6a1f1f" stroke-width="1.5" stroke-dasharray="4 4"/>
<polygon points="50,18 58,38 80,38 62,52 68,72 50,58 32,72 38,52 20,38 42,38" fill="#8a2b2b" opacity="0.6"/>
<circle cx="50" cy="50" r="6" fill="#b83030" opacity="0.8"/>
</svg>
<h1>Welcome, Initiate</h1>
<p>
You have proven your worth… for now. The Crimson Circle observes
your every move. Step carefully — not all who wander are lost, but
many who find are never the same.
</p>
<ul>
<li>Whispers carry further than screams in the dark.</li>
<li>The seal must remain unbroken until the blood moon rises.</li>
<li>Trust no one — not even the symbols on this page.</li>
</ul>
<p>
<strong>Next clue:</strong>
<span style="color:#b83030; letter-spacing:1px;">Project Wiki — Chamber 7</span>
</p>
<!-- Puzzle -->
<div id="game">
<p>Speak the number that opens the inner door…</p>
<input type="number" id="guess" placeholder="___" aria-label="Enter the number">
<button onclick="checkGuess()">Submit</button>
<p id="message"></p>
</div>
</div>
<script>
function checkGuess() {
const guess = document.getElementById("guess").value;
const msg = document.getElementById("message");
if (guess == 42) {
document.body.innerHTML = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Initiate — Ascended</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0a0000 0%, #1c0505 50%, #0a0000 100%);
color: #ffd7d7;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.ascended {
max-width: 600px;
padding: 40px;
text-align: center;
background: rgba(24, 8, 8, 0.95);
border: 1px solid #b83030;
border-radius: 20px;
box-shadow: 0 0 60px rgba(180, 20, 20, 0.25);
}
h1 {
font-size: 2.2rem;
font-weight: 300;
letter-spacing: 6px;
text-transform: uppercase;
color: #d43a3a;
text-shadow: 0 0 20px rgba(200, 40, 40, 0.5);
margin-bottom: 16px;
}
p {
font-size: 1.1rem;
line-height: 1.7;
color: #ccb8b0;
margin-bottom: 20px;
}
.seal {
display: block;
width: 100px;
height: 100px;
margin: 0 auto 24px auto;
}
.clue {
color: #b83030;
letter-spacing: 2px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="ascended">
<svg class="seal" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="46" fill="none" stroke="#d43a3a" stroke-width="2"/>
<circle cx="50" cy="50" r="34" fill="none" stroke="#8a2b2b" stroke-width="1.5" stroke-dasharray="3 5"/>
<polygon points="50,15 60,38 85,38 65,55 73,80 50,65 27,80 35,55 15,38 40,38" fill="#d43a3a" opacity="0.5"/>
<circle cx="50" cy="50" r="8" fill="#d43a3a" opacity="0.7"/>
<text x="50" y="54" text-anchor="middle" fill="#ffd7d7" font-size="14" font-weight="bold" font-family="serif">7</text>
</svg>
<h1>The Veil Parts</h1>
<p>You have spoken the true number. The inner door groans open, revealing a corridor lined with candles that burn with crimson flames.</p>
<p><span class="clue">NEXT CLUE:</span> Project Wiki — Chamber 7</p>
</div>
</body>
</html>
`;
} else {
msg.innerHTML = "Incorrect. The door stays shut.";
}
}
</script>
</body>
</html>
