:root {
  --p-prim: #E63956;
  --p-sec: #8C1D3A;
  --p-acc: #FFB86B;
  --bg: #0D0D12;
  --surf: #1A1A24;
  --text-p: #FAF1F3;
  --text-s: #C6B4BA;
  --font-h: 'Oswald', sans-serif;
  --font-b: 'Montserrat', sans-serif;
  --radius: 4px;
  --trans: 0.3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-b); background-color: var(--bg); color: var(--text-p); line-height: 1.6; font-size: 16px; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--p-acc); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--p-prim); }

/* Layout Helpers */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.bg-surface { background-color: var(--surf); }
.center { text-align: center; }
.w-full { width: 100%; }

/* Typography */
h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 700; color: var(--text-p); text-transform: uppercase; margin-bottom: 1rem; }
h1 { font-size: 2.5rem; letter-spacing: 1px; }
h2 { font-size: 2rem; border-bottom: 2px solid var(--p-sec); display: inline-block; padding-bottom: 5px; }
p { margin-bottom: 1rem; color: var(--text-s); }

/* Buttons */
button { font-family: var(--font-b); cursor: pointer; border: none; outline: none; transition: all var(--trans); border-radius: var(--radius); font-weight: 600; }
.btn-primary { background: linear-gradient(135deg, var(--p-prim), var(--p-sec)); color: #fff; padding: 12px 24px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(230,57,86,0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,57,86,0.5); filter: brightness(1.1); }
.btn-accent { background: var(--p-acc); color: var(--bg); padding: 12px 24px; text-transform: uppercase; }
.btn-accent:hover { background: #fff; }
.btn-text { background: transparent; color: var(--p-acc); text-decoration: underline; padding: 0; }
.btn-text:hover { color: var(--p-prim); }
.btn-large { font-size: 1.1rem; padding: 15px 30px; display: inline-block; }

/* Header */
.site-header { background: #08080C; border-bottom: 2px solid var(--p-sec); position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.8); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.brand-logo { font-family: var(--font-h); font-size: 1.5rem; color: var(--p-prim); letter-spacing: 2px; }
.brand-logo:hover { color: var(--p-acc); }
.main-nav { display: flex; gap: 20px; }
.main-nav a { font-weight: 600; text-transform: uppercase; font-size: 0.9rem; color: var(--text-p); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--p-prim); }
.auth-portal { display: flex; align-items: center; gap: 15px; }
.mobile-menu-toggle { display: none; background: transparent; flex-direction: column; gap: 5px; width: 30px; height: 24px; padding: 0; }
.hamburger-line { width: 100%; height: 3px; background: var(--text-p); transition: var(--trans); }

/* Age Badge Strip */
.age-badge-hero-strip { background: var(--p-sec); color: #fff; padding: 10px 0; font-size: 0.85rem; text-align: center; }
.age-badge { background: #000; padding: 2px 6px; border-radius: 3px; font-weight: bold; margin-right: 10px; border: 1px solid var(--p-acc); }

/* Hero Layout Asymmetric */
.hero-section { padding: 60px 20px; max-width: 1200px; margin: 0 auto; }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-story-hook h1 { line-height: 1.1; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(230,57,86,0.4); }
.hero-story-hook p { font-size: 1.1rem; margin-bottom: 30px; }
.hero-actions { margin-bottom: 30px; }
.hero-trust-row { display: flex; gap: 15px; flex-wrap: wrap; }
.trust-badge { background: rgba(255,255,255,0.05); border: 1px solid var(--p-sec); padding: 5px 12px; font-size: 0.85rem; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; color: var(--p-acc); }
.hero-visual-panel { position: relative; }
.hero-visual-panel::before { content: ''; position: absolute; inset: -10px; border: 2px solid var(--p-sec); z-index: -1; transform: translate(15px, 15px); }
.hero-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border: 1px solid var(--p-prim); box-shadow: 0 10px 30px rgba(0,0,0,0.8); }

/* Sections & Blocks */
.myth-fact-section { padding: 60px 20px; }
.myth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.myth-card { background: var(--surf); padding: 30px; border-top: 4px solid var(--p-prim); transition: transform var(--trans); }
.myth-card:hover { transform: translateY(-5px); }
.myth-title { color: var(--p-acc); font-size: 1.2rem; margin-bottom: 15px; }

.daily-events-section { padding: 60px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.event-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.event-timer-card { background: var(--bg); padding: 40px; text-align: center; border: 1px solid var(--p-sec); box-shadow: inset 0 0 50px rgba(140,29,58,0.2); }
.countdown-timer { font-family: var(--font-h); font-size: 3rem; color: var(--p-prim); margin: 20px 0; letter-spacing: 2px; text-shadow: 0 0 10px var(--p-prim); }

.world-building-section { padding: 80px 20px; }
.locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.location-card { background: var(--surf); overflow: hidden; border: 1px solid #333; }
.location-visual { height: 180px; width: 100%; object-fit: cover; background-size: cover; background-position: center; }
.bg-magma { background-color: #4a1515; background-image: radial-gradient(circle, #8C1D3A, #1A1A24); }
.bg-bellows { background-color: #2a2a35; background-image: linear-gradient(45deg, #1A1A24, #333); }
.location-card h3 { padding: 20px 20px 0; font-size: 1.3rem; }
.location-card p { padding: 0 20px 20px; }

.features-spotlight { padding: 60px 0; }
.features-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; margin-top: 40px; }
.feature-box { background: var(--bg); padding: 30px; border-left: 4px solid var(--p-acc); }

/* Game Page Specific */
.game-page main { display: flex; flex-wrap: wrap; gap: 20px; padding: 40px 20px; max-width: 1400px; margin: 0 auto; }
.wallet-sidebar-terminal { width: 320px; flex-shrink: 0; background: var(--surf); border: 1px solid var(--p-sec); padding: 20px; border-radius: var(--radius); align-self: flex-start; }
.terminal-header h3 { font-size: 1.1rem; color: var(--p-acc); border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
.wallet-display { background: var(--bg); padding: 15px; text-align: center; border: 1px solid #333; margin-bottom: 20px; }
.wallet-label { display: block; font-size: 0.85rem; text-transform: uppercase; color: var(--text-s); margin-bottom: 5px; }
.wallet-balance { font-family: var(--font-h); font-size: 2rem; color: var(--p-prim); }
.currency-sym { font-size: 1rem; color: var(--p-acc); }
.heat-gauge-widget, .rank-system-widget { margin-bottom: 20px; padding-top: 15px; border-top: 1px dotted #444; }
.heat-gauge-widget h4, .rank-system-widget h4 { font-size: 0.9rem; margin-bottom: 10px; }
.gauge-bar-bg { width: 100%; height: 12px; background: #000; border-radius: 6px; overflow: hidden; margin-bottom: 5px; border: 1px solid #333; }
.gauge-bar-fill { height: 100%; background: linear-gradient(90deg, var(--p-acc), var(--p-prim)); transition: width 0.3s; }
.gauge-status { font-size: 0.8rem; text-align: right; margin-bottom: 0; }
.current-rank { font-weight: bold; color: var(--text-p); margin-bottom: 10px; }
.achievements-list { display: flex; flex-direction: column; gap: 5px; }
.achievement-item { font-size: 0.8rem; background: #000; padding: 5px 10px; border-left: 2px solid #444; opacity: 0.5; transition: var(--trans); }
.achievement-item.unlocked { opacity: 1; border-left-color: var(--p-acc); color: var(--p-acc); }
.easter-egg-trigger-zone { text-align: center; margin-top: 30px; opacity: 0.3; transition: opacity var(--trans); }
.easter-egg-trigger-zone:hover { opacity: 0.8; }
.secret-valve { width: 50px; cursor: pointer; filter: grayscale(100%); mix-blend-mode: luminosity; }
.secret-valve.steaming { animation: shake 0.5s infinite; filter: grayscale(0) sepia(1) hue-rotate(330deg); }

/* Game Lobby Area */
.lobby-main-area { flex: 1; min-width: 0; }
.stepper-step { display: none; animation: fadeIn 0.4s ease; }
.stepper-step.active { display: block; }
.lobby-layout-rail { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.game-card { background: var(--surf); border: 1px solid #333; cursor: pointer; transition: var(--trans); display: flex; flex-direction: column; }
.game-card:hover { border-color: var(--p-prim); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(230,57,86,0.1); }
.card-visual { height: 150px; background-size: cover; background-position: center; border-bottom: 1px solid #333; object-fit: cover; }
.magma-visual { background-color: #521818; background-image: repeating-linear-gradient(45deg, #2a0b0b 0, #2a0b0b 10px, #521818 10px, #521818 20px); }
.obsidian-visual { background-color: #111; }
.wheel-visual { background-color: #1a1a1a; padding: 10px; }
.card-info { padding: 15px; }
.card-info h3 { font-size: 1.1rem; margin-bottom: 5px; }
.card-info p { font-size: 0.85rem; margin-bottom: 0; }
.highlight-card { flex-direction: row; align-items: center; border-color: var(--p-sec); }
.highlight-card .card-visual { width: 40%; height: 200px; border-bottom: none; border-right: 1px solid #333; }
.highlight-card .card-info { width: 60%; padding: 30px; }
.highlight-card .card-info h3 { font-size: 1.5rem; }
.game-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Gameplay Board UI */
.active-game-header { margin: 20px 0; text-align: center; }
.game-boards-container { background: #000; padding: 30px; border: 2px solid #333; border-radius: var(--radius); position: relative; overflow: hidden; min-height: 400px; display: flex; align-items: center; justify-content: center; }
.game-boards-container::before { content:''; position:absolute; inset:0; background: radial-gradient(circle, transparent 20%, #000 90%); pointer-events: none; z-index: 5; }
.game-board { width: 100%; max-width: 600px; margin: 0 auto; z-index: 1; }

/* Slot Styling */
.slot-frame { display: grid; gap: 10px; background: #111; padding: 10px; border: 4px solid var(--surf); border-radius: 8px; box-shadow: inset 0 0 20px #000; }
.frame-3x3 { grid-template-columns: repeat(3, 1fr); }
.frame-5x3 { grid-template-columns: repeat(5, 1fr); }
.slot-cell { background: #080808; aspect-ratio: 1; border: 1px solid #222; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.slot-cell img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,255,255,0.1)); }
.slot-cell.win-highlight { box-shadow: inset 0 0 30px var(--p-prim); border-color: var(--p-prim); }
.slot-cell.win-highlight img { filter: drop-shadow(0 0 10px var(--p-acc)); transform: scale(1.1); transition: 0.3s; }
.shake-anim { animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both; }

/* Wheel Styling */
.wheel-wrapper { position: relative; width: 350px; height: 350px; margin: 0 auto; }
.wheel-pointer { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid var(--p-prim); z-index: 10; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5)); }
.wheel-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; box-shadow: 0 0 30px rgba(230,57,86,0.2); transition: transform 3.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

.game-controls-panel { display: flex; justify-content: space-between; align-items: center; background: var(--surf); padding: 20px; margin-top: 20px; border: 1px solid #333; flex-wrap: wrap; gap: 15px; }
.bet-selector label { font-size: 0.9rem; color: var(--text-s); margin-right: 10px; }
.bet-selector select { background: #000; color: #fff; border: 1px solid var(--p-sec); padding: 8px 15px; font-family: var(--font-b); outline: none; }
.btn-play { font-size: 1.2rem; padding: 15px 40px; }
.btn-play:disabled { opacity: 0.5; cursor: not-allowed; }
.result-panel { background: #000; padding: 10px 20px; min-width: 200px; text-align: center; border: 1px solid #333; }
#game-status-msg { font-family: var(--font-h); letter-spacing: 1px; color: var(--p-acc); }
.history-panel { margin-top: 20px; background: var(--surf); padding: 15px; font-size: 0.85rem; border: 1px solid #333; }
.history-panel ul { list-style: none; display: flex; gap: 15px; flex-wrap: wrap; }
.history-panel li { background: #000; padding: 5px 10px; border-radius: 3px; }

/* Artifacts */
.artifact-zone { position: fixed; top: 50%; width: 40px; height: 40px; background: radial-gradient(circle, var(--p-acc) 10%, transparent 70%); border-radius: 50%; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.5s; z-index: 50; animation: pulse 2s infinite; }
.artifact-zone.active { opacity: 0.6; pointer-events: auto; }
.artifact-zone:hover { opacity: 1; transform: scale(1.2); }
.artifact-zone.left { left: 10px; }
.artifact-zone.right { right: 10px; }

/* Editorial Pages (About/Contact/Policy) */
.editorial-page { padding-bottom: 60px; }
.page-header { padding: 60px 20px; text-align: center; margin-bottom: 40px; }
.page-header h1 { margin-bottom: 0; }
.text-content-layout { max-width: 900px; background: var(--surf); padding: 40px; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.editorial-section, .policy-section { margin-bottom: 40px; }
.editorial-section:last-child, .policy-section:last-child { margin-bottom: 0; }
.text-link { text-decoration: underline; color: var(--p-prim); }
.policy-section ul { margin-left: 20px; margin-bottom: 1rem; color: var(--text-s); }
.policy-section li { margin-bottom: 10px; }

.contact-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 50px; }
.magma-form .form-group { margin-bottom: 20px; }
.magma-form label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
.magma-form input, .magma-form select, .magma-form textarea { width: 100%; background: var(--bg); border: 1px solid #444; color: #fff; padding: 12px; font-family: var(--font-b); outline: none; transition: border-color var(--trans); }
.magma-form input:focus, .magma-form select:focus, .magma-form textarea:focus { border-color: var(--p-prim); }
.info-card { background: var(--surf); padding: 30px; margin-bottom: 30px; border-top: 3px solid var(--p-sec); }
.faq-widget h3 { margin-bottom: 20px; }
.faq-item { border-bottom: 1px solid #333; }
.faq-question { width: 100%; text-align: left; background: transparent; padding: 15px 0; color: var(--text-p); font-size: 1rem; border: none; font-weight: 600; display: flex; justify-content: space-between; }
.faq-question::after { content: '+'; color: var(--p-acc); }
.faq-question[aria-expanded="true"]::after { content: '-'; }
.faq-answer { display: none; padding-bottom: 15px; color: var(--text-s); }
.faq-question[aria-expanded="true"] + .faq-answer { display: block; }

/* Footer */
.site-footer { background: #050508; border-top: 2px solid var(--p-sec); padding: 60px 0 20px; margin-top: auto; font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; }
.footer-brand h4 { color: var(--p-prim); letter-spacing: 1px; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--text-s); }
.footer-links a:hover { color: var(--p-acc); }
.simulated-notice { font-weight: bold; color: var(--text-p); margin-bottom: 10px; }
.no-money-text { font-size: 0.8rem; opacity: 0.7; }
.footer-partners { border-top: 1px solid #222; border-bottom: 1px solid #222; padding: 20px 0; margin-bottom: 20px; }
.partner-logos { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
.partner-logos img { height: 40px; width: auto; filter: grayscale(100%) opacity(0.6); transition: filter var(--trans); }
.partner-logos a:hover img { filter: grayscale(0) opacity(1); }
.footer-bottom { text-align: center; color: var(--text-s); font-size: 0.8rem; }

/* Modals */
.custom-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--trans); backdrop-filter: blur(5px); }
.custom-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
.modal-dialog { background: var(--surf); width: 90%; max-width: 450px; padding: 40px; position: relative; border: 1px solid var(--p-sec); transform: translateY(-20px); transition: transform var(--trans); box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.custom-modal[aria-hidden="false"] .modal-dialog { transform: translateY(0); }
.modal-dialog.modal-lg { max-width: 700px; }
.modal-close { position: absolute; top: 15px; right: 20px; background: transparent; color: var(--text-p); font-size: 1.5rem; border: none; padding: 5px; line-height: 1; }
.modal-close:hover { color: var(--p-prim); }
.modal-header { margin-bottom: 25px; text-align: center; }
.modal-body p { margin-bottom: 15px; font-size: 0.95rem; }

/* Toast */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast-msg { background: var(--p-prim); color: #fff; padding: 15px 25px; border-radius: var(--radius); box-shadow: 0 5px 15px rgba(0,0,0,0.5); font-weight: 600; transform: translateX(120%); animation: slideIn 0.3s forwards; }
.toast-msg.hide { animation: slideOut 0.3s forwards; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { to { transform: translateX(0); } }
@keyframes slideOut { to { transform: translateX(120%); } }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,184,107, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(255,184,107, 0); } 100% { box-shadow: 0 0 0 0 rgba(255,184,107, 0); } }

/* Mobile Responsive */
@media (max-width: 1024px) {
  .hero-split, .event-split { grid-template-columns: 1fr; text-align: center; }
  .hero-trust-row { justify-content: center; }
  .contact-layout { grid-template-columns: 1fr; }
  .highlight-card { flex-direction: column; }
  .highlight-card .card-visual { width: 100%; border-right: none; border-bottom: 1px solid #333; }
  .highlight-card .card-info { width: 100%; }
}
@media (max-width: 768px) {
  .main-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #08080C; flex-direction: column; padding: 20px; border-bottom: 2px solid var(--p-sec); }
  .main-nav.show { display: flex; }
  .mobile-menu-toggle { display: flex; }
  .game-page main { flex-direction: column; }
  .wallet-sidebar-terminal { width: 100%; align-self: stretch; }
  .game-rail { grid-template-columns: 1fr; }
  .game-controls-panel { justify-content: center; }
  .btn-play { width: 100%; }
  .frame-5x3 { gap: 5px; }
}
@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  .hero-section { padding: 40px 20px; }
  .stepper-step h2 { font-size: 1.5rem; }
  .slot-frame { padding: 5px; gap: 3px; border-width: 2px; }
  .wheel-wrapper { width: 280px; height: 280px; }
  .text-content-layout { padding: 20px; }
}