:root {
  --color-bg: #100713;
  --color-bg-soft: #1b0b22;
  --color-panel: #25102d;
  --color-panel-light: #34143d;
  --color-text: #fff8ff;
  --color-muted: #d8c7dc;
  --color-primary: #bb1f4d;
  --color-primary-dark: #7e1235;
  --color-secondary: #6d3bc0;
  --color-accent: #f1b85b;
  --color-line: #77445f;
  --color-danger: #ff5b70;
  --color-success: #75d3a7;
  --color-overlay: rgba(8, 2, 10, 0.88);
  --color-header: rgba(16, 7, 19, 0.95);
  --color-header-mobile: rgba(16, 7, 19, 0.99);
  --color-line-light: rgba(255, 255, 255, 0.22);
  --color-hero-top: rgba(8, 2, 10, 0.38);
  --color-hero-bottom: rgba(8, 2, 10, 0.92);
  --color-page-top: rgba(8, 2, 10, 0.56);
  --color-page-bottom: rgba(8, 2, 10, 0.94);
  --color-white: #ffffff;
  --color-ghost: rgba(255, 255, 255, 0.08);
  --color-note: rgba(16, 7, 19, 0.72);
  --color-stat: rgba(255, 255, 255, 0.04);
  --color-support: #ffffff;
  --color-game: #09030d;
  --color-footer: #0a040c;
  --color-danger-ring: rgba(255, 91, 112, 0.18);
  --shadow-main: 0 18px 48px rgba(0, 0, 0, 0.38);
  --shadow-title: 0 18px 32px rgba(0, 0, 0, 0.55);
  --shadow-button: 0 12px 28px rgba(187, 31, 77, 0.32);
  --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.22);
  --shadow-symbol: 0 10px 20px rgba(0, 0, 0, 0.45);
  --header-height: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.65; }
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; }
img { display: block; width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.wrapper { width: 100%; display: flex; flex-direction: column; min-height: 100vh; }
.centered { width: 1180px; margin: 0 auto; }
.d-flex { display: flex; }
.main-content { flex: 1 0 auto; padding-top: var(--header-height); }

.site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 1000; background: var(--color-header); border-bottom: 1px solid var(--color-line); backdrop-filter: blur(14px); }
.header-inner { height: 100%; align-items: center; justify-content: space-between; gap: 28px; }
.text-logo { text-decoration: none; font-size: 25px; font-weight: 800; letter-spacing: 0.6px; color: var(--color-text); white-space: nowrap; }
.text-logo span { color: var(--color-primary); }
.site-nav { align-items: center; gap: 28px; }
.site-nav a { position: relative; text-decoration: none; font-size: 16px; font-weight: 700; padding: 8px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 2px; background: var(--color-accent); transition: width 220ms ease; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { width: 100%; }
.menu-toggle.d-flex { display: none; width: 48px; height: 44px; padding: 8px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-panel); flex-direction: column; justify-content: center; gap: 5px; }
.menu-toggle span { width: 100%; height: 2px; background: var(--color-text); transition: transform 220ms ease, opacity 220ms ease; }
.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.notice-bar { background: linear-gradient(90deg, var(--color-primary-dark), var(--color-secondary)); border-bottom: 1px solid var(--color-line-light); }
.notice-inner { align-items: center; justify-content: center; gap: 20px; padding: 13px 0; text-align: center; }
.notice-age { flex: 0 0 auto; font-size: 27px; font-weight: 900; color: var(--color-accent); }
.notice-text { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.3px; }

.parallax-hero { position: relative; background-image: linear-gradient(var(--color-hero-top), var(--color-hero-bottom)), url("../img/hero-background.webp"); background-size: cover; background-position: center; background-attachment: fixed; overflow: hidden; }
.hero-inner { min-height: 760px; align-items: center; justify-content: space-between; gap: 55px; padding: 86px 0; }
.hero-copy { flex: 0 0 45%; width: 45%; }
.hero-art { flex: 0 0 45%; width: 45%; position: relative; }
.hero-title-image { filter: drop-shadow(var(--shadow-title)); animation: float-image 4.5s ease-in-out infinite; }
.eyebrow { margin: 0 0 10px; color: var(--color-accent); font-size: 15px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; line-height: 1.15; }
h1 { margin-bottom: 22px; font-size: 54px; }
h2 { margin-bottom: 18px; font-size: 39px; }
h3 { margin-bottom: 12px; font-size: 23px; }
p { margin-top: 0; }
.lead { font-size: 20px; color: var(--color-muted); }
.hero-actions { align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.actions-center { justify-content: center; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 25px; border: 1px solid transparent; border-radius: 14px; text-decoration: none; font-size: 16px; font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-3px); box-shadow: var(--shadow-button); }
.button-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-white); }
.button-secondary { background: var(--color-ghost); border-color: var(--color-line); color: var(--color-text); }
.button-small { min-height: 44px; padding: 9px 18px; }
.hero-note { margin-top: 22px; padding: 14px 17px; border-left: 4px solid var(--color-accent); background: var(--color-note); color: var(--color-muted); font-size: 15px; }

.section { position: relative; padding: 88px 0; }
.section-soft { background: var(--color-bg-soft); }
.section-panel { background: linear-gradient(180deg, var(--color-panel), var(--color-bg)); }
.section-divider::before { content: ""; position: absolute; top: 0; left: 50%; width: 180px; height: 3px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--color-accent), transparent); }
.section-heading { width: 760px; margin: 0 auto 42px; text-align: center; }
.section-heading p { color: var(--color-muted); }
.two-column { align-items: center; justify-content: space-between; gap: 50px; }
.column { flex: 0 0 45%; width: 45%; }
.image-card { position: relative; border: 2px solid var(--color-line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-main); background: var(--color-panel); }
.image-card img { transition: transform 600ms ease; }
.image-card:hover img { transform: scale(1.04); }
.symbol-pair { align-items: center; justify-content: center; gap: 18px; }
.symbol-pair img { flex: 0 0 46%; width: 46%; padding: 10px; background: radial-gradient(circle, var(--color-panel-light), var(--color-bg)); border: 1px solid var(--color-line); border-radius: 24px; }

.feature-list { flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.feature-card { flex: 0 0 31%; width: 31%; padding: 28px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-panel); box-shadow: var(--shadow-card); }
.feature-number { width: 48px; height: 48px; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 50%; background: var(--color-primary-dark); color: var(--color-accent); font-weight: 900; }
.feature-card p { margin-bottom: 0; color: var(--color-muted); }

.rule-list { margin: 0; padding-left: 22px; }
.rule-list li { margin-bottom: 11px; }
.stat-row { flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.stat { flex: 0 0 30%; width: 30%; padding: 16px; border: 1px solid var(--color-line); border-radius: 14px; text-align: center; background: var(--color-stat); }
.stat strong { display: block; font-size: 25px; color: var(--color-accent); }
.stat span { font-size: 13px; color: var(--color-muted); }

.gallery { flex-wrap: wrap; justify-content: space-between; gap: 26px; }
.gallery-card { flex: 0 0 47%; width: 47%; margin: 0; border: 2px solid var(--color-line); border-radius: 22px; overflow: hidden; background: var(--color-panel); box-shadow: var(--shadow-main); }
.gallery-card img { aspect-ratio: 16 / 10; object-fit: cover; transition: transform 500ms ease; }
.gallery-card:hover img { transform: scale(1.035); }
.gallery-card figcaption { padding: 18px 20px; color: var(--color-muted); }

.character-list { flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.character-card { flex: 0 0 23%; width: 23%; padding: 22px; border: 1px solid var(--color-line); border-radius: 20px; background: var(--color-panel); text-align: center; }
.character-card img { width: 150px; height: 150px; margin: 0 auto 15px; object-fit: contain; filter: drop-shadow(var(--shadow-symbol)); }
.character-card p { margin-bottom: 0; font-size: 15px; color: var(--color-muted); }

.faq-list { width: 880px; margin: 0 auto; flex-direction: column; gap: 15px; }
.faq-item { border: 1px solid var(--color-line); border-radius: 15px; background: var(--color-panel); overflow: hidden; }
.faq-question { width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 0; background: transparent; color: var(--color-text); text-align: left; font-weight: 800; }
.faq-question span:last-child { color: var(--color-accent); font-size: 24px; transition: transform 200ms ease; }
.faq-answer { display: none; padding: 0 22px 20px; color: var(--color-muted); }
.faq-item.is-open .faq-answer { display: block; }
.faq-item.is-open .faq-question span:last-child { transform: rotate(45deg); }

.support-links { flex-wrap: wrap; justify-content: center; gap: 24px; }
.support-card { flex: 0 0 30%; width: 30%; min-height: 150px; align-items: center; justify-content: center; padding: 24px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-support); transition: transform 180ms ease; }
.support-card:hover { transform: translateY(-4px); }
.support-card img { width: 230px; }

.page-hero { background-image: linear-gradient(var(--color-page-top), var(--color-page-bottom)), url("../img/hero-background.webp"); background-size: cover; background-position: center 34%; background-attachment: fixed; }
.page-hero-inner { min-height: 430px; align-items: center; justify-content: center; padding: 72px 0; text-align: center; }
.page-hero-copy { width: 790px; }
.page-hero-copy p { color: var(--color-muted); font-size: 19px; }

.game-stage { padding-top: 55px; scroll-margin-top: 100px; }
.game-disclaimer { margin-bottom: 24px; padding: 22px; border: 2px solid var(--color-accent); border-radius: 16px; background: var(--color-panel); text-align: center; }
.game-disclaimer strong { color: var(--color-accent); font-size: 25px; }
.game-frame-wrap { border: 2px solid var(--color-line); border-radius: 25px; overflow: hidden; background: var(--color-game); box-shadow: var(--shadow-main); }
.game-frame { display: block; width: 100%; height: 820px; border: 0; background: var(--color-game); }
.game-help { margin-top: 22px; color: var(--color-muted); text-align: center; }

.contact-layout { align-items: flex-start; justify-content: space-between; gap: 50px; }
.contact-copy, .contact-form-wrap { flex: 0 0 45%; width: 45%; }
.contact-card { margin-bottom: 18px; padding: 20px; border: 1px solid var(--color-line); border-radius: 15px; background: var(--color-panel); }
.contact-card a { color: var(--color-accent); }
.contact-form { flex-direction: column; gap: 18px; padding: 28px; border: 1px solid var(--color-line); border-radius: 20px; background: var(--color-panel); box-shadow: var(--shadow-main); }
.form-field { flex-direction: column; gap: 7px; }
.form-field label { font-weight: 800; }
.form-field input, .form-field textarea { width: 100%; padding: 14px 15px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-bg); color: var(--color-text); outline: none; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--color-accent); }
.form-field textarea { height: 150px; resize: vertical; }
.form-field.is-invalid input, .form-field.is-invalid textarea { border-color: var(--color-danger); box-shadow: 0 0 0 2px var(--color-danger-ring); }
.field-error { display: none; color: var(--color-danger); font-size: 13px; }
.form-field.is-invalid .field-error { display: block; }

.policy-content { width: 900px; margin: 0 auto; }
.policy-content section { margin-bottom: 34px; padding: 27px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-panel); }
.policy-content p, .policy-content li { color: var(--color-muted); }
.policy-content a { color: var(--color-accent); }
.policy-table-wrap { width: 100%; margin: 20px 0; overflow-x: auto; }
.policy-content table { width: 100%; min-width: 760px; border-collapse: collapse; color: var(--color-muted); background: rgba(255,255,255,0.025); }
.policy-content th, .policy-content td { padding: 14px; border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.policy-content th { color: var(--color-text); background: var(--color-panel); }
.policy-content code { color: var(--color-accent); overflow-wrap: anywhere; }

.site-footer { flex: 0 0 auto; padding: 55px 0 25px; border-top: 1px solid var(--color-line); background: var(--color-footer); }
.footer-main { align-items: flex-start; justify-content: space-between; gap: 40px; }
.footer-brand { flex: 0 0 34%; width: 34%; }
.footer-brand p { color: var(--color-muted); }
.footer-links { flex: 0 0 58%; width: 58%; flex-wrap: wrap; justify-content: flex-end; gap: 14px 24px; }
.footer-links a { color: var(--color-muted); font-size: 14px; }
.footer-links a:hover { color: var(--color-accent); }
.footer-legal { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 13px; text-align: center; }
.footer-legal p { margin-bottom: 8px; }

.modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 22px; background: var(--color-overlay); }
.modal.is-visible { display: flex; }
.modal-card { width: 520px; padding: 36px; border: 2px solid var(--color-primary); border-radius: 24px; background: var(--color-panel); box-shadow: var(--shadow-main); text-align: center; }
.age-mark { width: 112px; height: 112px; align-items: center; justify-content: center; margin: 0 auto 20px; border: 4px solid var(--color-accent); border-radius: 50%; color: var(--color-accent); font-size: 39px; font-weight: 900; }
.modal-actions { justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.modal-card p { color: var(--color-muted); }

.cookie-banner { position: fixed; right: 24px; bottom: 24px; z-index: 2200; display: none; width: 390px; padding: 22px; border: 1px solid var(--color-line); border-radius: 17px; background: var(--color-panel); box-shadow: var(--shadow-main); }
.cookie-banner.is-visible { display: block; }
.cookie-banner p { margin-bottom: 14px; color: var(--color-muted); font-size: 14px; }
.cookie-banner a { color: var(--color-accent); }
.cookie-actions { justify-content: flex-end; gap: 10px; }

@keyframes float-image { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (max-width: 1220px) {
  .centered { width: 92%; }
  .section-heading, .faq-list, .policy-content { width: 86%; }
  .page-hero-copy { width: 76%; }
}

@media (max-width: 900px) {
  :root { --header-height: 70px; }
  .menu-toggle.d-flex { display: flex; }
  .site-nav { position: fixed; top: var(--header-height); right: -100%; width: 100%; height: 100vh; padding: 55px 30px; background: var(--color-header-mobile); flex-direction: column; align-items: center; gap: 25px; transition: right 260ms ease; }
  .site-nav.is-open { right: 0; }
  .site-nav a { font-size: 23px; }
  .hero-inner, .two-column, .contact-layout, .footer-main { flex-direction: column; }
  .hero-copy, .hero-art, .column, .contact-copy, .contact-form-wrap, .footer-brand, .footer-links { flex: 0 0 100%; width: 100%; }
  .hero-inner { min-height: 0; padding: 70px 0; }
  .hero-copy { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-art { width: 82%; }
  h1 { font-size: 43px; }
  h2 { font-size: 34px; }
  .feature-card { flex: 0 0 48%; width: 48%; }
  .character-card { flex: 0 0 48%; width: 48%; }
  .support-card { flex: 0 0 46%; width: 46%; }
  .footer-links { justify-content: flex-start; }
  .game-frame { height: 680px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .centered { width: 90%; }
  .notice-inner { align-items: flex-start; gap: 10px; padding: 10px 0; }
  .notice-age { font-size: 24px; }
  .notice-text { text-align: left; font-size: 12px; }
  .parallax-hero, .page-hero { background-attachment: scroll; }
  .hero-inner { gap: 34px; }
  .hero-copy, .hero-art, .column, .feature-card, .gallery-card, .character-card, .support-card, .contact-copy, .contact-form-wrap, .footer-brand, .footer-links { flex: 0 0 100%; width: 100%; }
  .hero-art { width: 100%; }
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  h3 { font-size: 21px; }
  h1, h2, h3, h4, h5, h6 { text-align: center; }
  .page-hero-copy > .button { margin-top: 26px; }
  .lead { font-size: 18px; }
  .section { padding: 68px 0; }
  .section-heading, .faq-list, .policy-content, .page-hero-copy { width: 100%; }
  .feature-list, .gallery, .character-list, .support-links { flex-direction: column; }
  .stat { flex: 0 0 100%; width: 100%; }
  .symbol-pair { flex-wrap: wrap; }
  .symbol-pair img { flex: 0 0 46%; width: 46%; }
  .page-hero-inner { min-height: 380px; }
  .game-frame { height: 570px; }
  .modal-card { width: 100%; padding: 27px 20px; }
  .cookie-banner { right: 5%; bottom: 15px; width: 90%; }
  .footer-links { flex-direction: column; gap: 9px; }
}


*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
font: 16px/1.25 Arial, serif;
position: relative;
appearance: none;
}

.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.d-flex {
display: flex;
}

.centered {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}

ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
padding: 0;
}

img{
  object-fit: cover;
  width: 100%;
  height: auto;
}

a {
   text-decoration: none;
}