:root {
    --op-void: #05050f;
    --op-ink: #0a0a1e;
    --op-surface: #11112a;
    --op-surface-2: #171736;
    --op-line: rgba(140, 150, 255, 0.14);
    --op-cyan: #22e6f2;
    --op-violet: #7b5cff;
    --op-magenta: #ff3ea5;
    --op-gold: #ffc94d;
    --op-text: #eceefb;
    --op-muted: #9ba0c9;
    --op-gradient: linear-gradient(115deg, #22e6f2 0%, #7b5cff 48%, #ff3ea5 100%);
    --op-gradient-soft: linear-gradient(115deg, rgba(34, 230, 242, 0.18), rgba(255, 62, 165, 0.18));
    --op-shadow: 0 24px 60px rgba(4, 4, 20, 0.55);
    --op-radius: 18px;
    --op-head: "Sora", system-ui, sans-serif;
    --op-body: "Plus Jakarta Sans", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--op-void);
    color: var(--op-text);
    font-family: var(--op-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.op-locked {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--op-head);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.25s ease, opacity 0.25s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

::selection {
    background: rgba(123, 92, 255, 0.45);
    color: #fff;
}

.op-text-gradient {
    background: var(--op-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.op-backdrop-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.op-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
}

.op-orb-1 {
    width: 620px;
    height: 620px;
    top: -220px;
    left: -180px;
    background: rgba(34, 230, 242, 0.35);
}

.op-orb-2 {
    width: 560px;
    height: 560px;
    top: -120px;
    right: -160px;
    background: rgba(255, 62, 165, 0.32);
}

.op-orb-3 {
    width: 700px;
    height: 700px;
    top: 380px;
    left: 34%;
    background: rgba(123, 92, 255, 0.26);
}

.op-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

.op-topbar,
.op-header,
main {
    position: relative;
    z-index: 2;
}

.op-topbar {
    background: rgba(8, 8, 24, 0.85);
    border-bottom: 1px solid var(--op-line);
    font-size: 0.82rem;
}

.op-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    flex-wrap: wrap;
}

.op-topbar-note {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--op-muted);
}

.op-topbar-note i {
    color: var(--op-cyan);
}

.op-topbar-side {
    display: flex;
    align-items: center;
    gap: 18px;
}

.op-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--op-muted);
    font-weight: 500;
}

.op-topbar-link:hover {
    color: #fff;
}

.op-topbar-divider {
    width: 1px;
    height: 16px;
    background: var(--op-line);
}

.op-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.op-social a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--op-muted);
    border: 1px solid transparent;
}

.op-social a:hover {
    color: #fff;
    border-color: var(--op-line);
    background: rgba(255, 255, 255, 0.05);
}

.op-social-lg a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border-color: var(--op-line);
    font-size: 1rem;
}

.op-header {
    background: rgba(6, 6, 18, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--op-line);
}

.op-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 86px;
}

.op-logo {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.op-logo-mark {
    position: relative;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #06061a;
    font-size: 1rem;
    background: var(--op-gradient);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    box-shadow: 0 10px 30px rgba(123, 92, 255, 0.45);
    transition: transform 0.35s ease;
}

.op-logo:hover .op-logo-mark {
    transform: rotate(-8deg) scale(1.05);
}

.op-logo-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.op-logo-name {
    font-family: var(--op-head);
    font-weight: 800;
    font-size: 1.32rem;
    letter-spacing: -0.03em;
    color: #fff;
}

.op-logo-name em {
    font-style: normal;
    background: var(--op-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.op-logo-tag {
    font-size: 0.63rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--op-muted);
    margin-top: 3px;
}

.op-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.op-nav-link {
    position: relative;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--op-muted);
    white-space: nowrap;
}

.op-nav-link::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--op-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.op-nav-link:hover,
.op-nav-link.is-active {
    color: #fff;
}

.op-nav-link:hover::after,
.op-nav-link.is-active::after {
    transform: scaleX(1);
}

.op-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.op-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-family: var(--op-head);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.op-btn:hover {
    transform: translateY(-2px);
}

.op-btn-primary {
    color: #06061a;
    background: var(--op-gradient);
    box-shadow: 0 12px 28px rgba(123, 92, 255, 0.38);
}

.op-btn-primary:hover {
    color: #06061a;
    box-shadow: 0 18px 38px rgba(255, 62, 165, 0.42);
}

.op-btn-ghost {
    color: var(--op-text);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--op-line);
}

.op-btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

.op-btn-outline {
    color: #fff;
    background: transparent;
    border-color: rgba(34, 230, 242, 0.45);
}

.op-btn-outline:hover {
    border-color: var(--op-cyan);
    background: rgba(34, 230, 242, 0.1);
}

.op-btn-lg {
    padding: 16px 30px;
    font-size: 1rem;
    border-radius: 16px;
}

.op-burger {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.op-burger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease;
}

.op-burger span:last-child {
    width: 13px;
}

.op-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.op-burger.is-open span:nth-child(2) {
    opacity: 0;
}

.op-burger.is-open span:nth-child(3) {
    width: 20px;
    transform: translateY(-7px) rotate(-45deg);
}

.op-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 4, 14, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.op-mobile-backdrop.is-visible {
    opacity: 1;
}

.op-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: min(360px, 88vw);
    height: 100%;
    padding: 22px 22px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: linear-gradient(180deg, var(--op-ink) 0%, #08081a 100%);
    border-left: 1px solid var(--op-line);
    box-shadow: -30px 0 70px rgba(0, 0, 0, 0.6);
    transform: translateX(105%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    visibility: hidden;
}

.op-mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
}

.op-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--op-line);
}

.op-logo-sm .op-logo-mark {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
}

.op-logo-sm .op-logo-name {
    font-size: 1.1rem;
}

.op-mobile-close {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.op-mobile-close:hover {
    background: rgba(255, 62, 165, 0.18);
    transform: rotate(90deg);
}

.op-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.op-mobile-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-family: var(--op-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--op-muted);
}

.op-mobile-link > i:first-child {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 0.85rem;
    color: var(--op-cyan);
    background: rgba(34, 230, 242, 0.1);
    transition: background 0.25s ease, color 0.25s ease;
}

.op-mobile-chevron {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.5;
}

.op-mobile-link:hover,
.op-mobile-link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--op-line);
}

.op-mobile-link:hover > i:first-child,
.op-mobile-link.is-active > i:first-child {
    color: #06061a;
    background: var(--op-gradient);
}

.op-mobile-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.op-mobile-note {
    margin: 6px 0 4px;
    font-size: 0.8rem;
    color: var(--op-muted);
    display: flex;
    gap: 9px;
}

.op-mobile-note i {
    color: var(--op-cyan);
    margin-top: 4px;
}

.op-hero {
    position: relative;
    padding: 84px 0 90px;
}

.op-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--op-line);
    background: var(--op-gradient-soft);
    font-size: 0.82rem;
    font-weight: 600;
    color: #dfe3ff;
}

.op-pill i {
    color: var(--op-gold);
}

.op-hero-title {
    margin: 24px 0 20px;
    font-size: clamp(2.35rem, 4.6vw, 3.9rem);
    font-weight: 800;
    line-height: 1.08;
}

.op-hero-title span {
    display: block;
}

.op-hero-text {
    max-width: 560px;
    margin: 0 0 24px;
    color: var(--op-muted);
    font-size: 1.06rem;
}

.op-hero-points {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.op-hero-points li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.95rem;
    color: #cfd3f0;
}

.op-hero-points i {
    color: var(--op-cyan);
    font-size: 0.95rem;
}

.op-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.op-hero-trust {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--op-line);
}

.op-hero-trust p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--op-muted);
    max-width: 340px;
}

.op-hero-trust strong {
    color: #fff;
    display: block;
    font-family: var(--op-head);
}

.op-avatars {
    display: flex;
    align-items: center;
}

.op-avatar {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: -12px;
    background: var(--op-surface-2);
    border: 2px solid #0a0a1e;
    color: var(--op-cyan);
    font-size: 0.95rem;
}

.op-avatar:nth-child(2) {
    color: var(--op-magenta);
}

.op-avatar:nth-child(3) {
    color: var(--op-gold);
}

.op-avatar-count {
    font-family: var(--op-head);
    font-size: 0.76rem;
    font-weight: 700;
    color: #06061a;
    background: var(--op-gradient);
}

.op-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.op-stat {
    padding: 18px 16px;
    border-radius: var(--op-radius);
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.op-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 230, 242, 0.4);
}

.op-stat-value {
    display: block;
    font-family: var(--op-head);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    background: var(--op-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.op-stat-label {
    display: block;
    margin-top: 7px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--op-muted);
}

.op-hero-visual {
    position: relative;
    padding: 10px;
}

.op-hero-glow {
    position: absolute;
    inset: 8% 8% 12%;
    border-radius: 50%;
    background: conic-gradient(from 120deg, rgba(34, 230, 242, 0.55), rgba(123, 92, 255, 0.45), rgba(255, 62, 165, 0.55), rgba(34, 230, 242, 0.55));
    filter: blur(70px);
    opacity: 0.55;
    animation: op-aurora 18s linear infinite;
}

.op-hero-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(140, 150, 255, 0.28);
    background: linear-gradient(160deg, rgba(23, 23, 54, 0.9), rgba(8, 8, 24, 0.9));
    box-shadow: var(--op-shadow);
    animation: op-drift 7s ease-in-out infinite;
    transition: transform 0.4s ease;
}

.op-hero-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 6, 20, 0) 55%, rgba(5, 5, 15, 0.75) 100%);
    pointer-events: none;
}

.op-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 16px;
    border: 1px solid var(--op-line);
    background: rgba(12, 12, 32, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    animation: op-drift 6s ease-in-out infinite;
}

.op-float-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #06061a;
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--op-cyan), #4bb6ff);
}

.op-float-icon-alt {
    background: linear-gradient(135deg, var(--op-violet), var(--op-magenta));
}

.op-float-icon-gold {
    background: linear-gradient(135deg, var(--op-gold), #ff9a4d);
}

.op-float-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.op-float-copy strong {
    font-family: var(--op-head);
    font-size: 0.88rem;
    color: #fff;
}

.op-float-copy small {
    font-size: 0.74rem;
    color: var(--op-muted);
}

.op-float-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 7px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.op-float-bar i {
    position: absolute;
    inset: 0;
    width: 68%;
    border-radius: 3px;
    background: var(--op-gradient);
}

.op-float-top {
    top: 6%;
    left: -6%;
    animation-delay: 0.4s;
}

.op-float-mid {
    top: 44%;
    right: -5%;
    padding-bottom: 18px;
    animation-delay: 1.2s;
}

.op-float-bottom {
    bottom: 7%;
    left: 2%;
    animation-delay: 2s;
}

.op-marquee {
    position: relative;
    margin-top: 70px;
    padding: 16px 0;
    border-top: 1px solid var(--op-line);
    border-bottom: 1px solid var(--op-line);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.op-marquee-track {
    display: flex;
    align-items: center;
    gap: 46px;
    width: max-content;
    animation: op-marquee 26s linear infinite;
}

.op-marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--op-head);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--op-muted);
    white-space: nowrap;
}

.op-marquee-track i {
    color: var(--op-cyan);
    font-size: 0.85rem;
}

.op-marquee:hover .op-marquee-track {
    animation-play-state: paused;
}

.op-games {
    position: relative;
    padding: 96px 0 104px;
}

.op-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 46px;
}

.op-section-intro {
    max-width: 640px;
}

.op-section-title {
    margin: 22px 0 16px;
    font-size: clamp(1.9rem, 3.2vw, 2.85rem);
    font-weight: 800;
    line-height: 1.14;
}

.op-section-title span {
    display: block;
}

.op-section-text {
    margin: 0;
    color: var(--op-muted);
    font-size: 1.02rem;
}

.op-section-link {
    flex-shrink: 0;
}

.op-game {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--op-line);
    background: linear-gradient(170deg, rgba(23, 23, 54, 0.92), rgba(9, 9, 26, 0.92));
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.op-game::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1px;
    background: var(--op-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 3;
}

.op-game:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 60px rgba(6, 6, 24, 0.7);
}

.op-game:hover::before {
    opacity: 1;
}

.op-game-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.op-game-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.op-game:hover .op-game-media img {
    transform: scale(1.07);
}

.op-game-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 6, 20, 0) 45%, rgba(7, 7, 22, 0.92) 100%);
    pointer-events: none;
}

.op-game-tag,
.op-game-live {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    font-family: var(--op-head);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.op-game-tag {
    top: 14px;
    left: 14px;
    color: #06061a;
    background: var(--op-gradient);
}

.op-game-live {
    top: 14px;
    right: 14px;
    color: #dfe3ff;
    background: rgba(9, 9, 26, 0.78);
    border: 1px solid var(--op-line);
}

.op-game-live i {
    font-size: 0.42rem;
    color: #3ce88b;
}

.op-game-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 22px 24px;
}

.op-game-title {
    margin: 0 0 10px;
    font-size: 1.3rem;
    font-weight: 700;
}

.op-game-title a {
    background-image: var(--op-gradient);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.35s ease, color 0.25s ease;
}

.op-game:hover .op-game-title a,
.op-game-title a:hover {
    background-size: 100% 2px;
}

.op-game-text {
    margin: 0 0 18px;
    color: var(--op-muted);
    font-size: 0.94rem;
}

.op-game-meta {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.op-game-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 11px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.78rem;
    color: #c6cae9;
}

.op-game-meta i {
    color: var(--op-cyan);
    font-size: 0.78rem;
}

.op-game-play {
    margin-top: auto;
    width: 100%;
}

.op-games-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 42px 0 0;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.86rem;
    color: var(--op-muted);
    text-align: center;
}

.op-games-note i {
    color: var(--op-cyan);
}

.op-section-head-center {
    justify-content: center;
    text-align: center;
}

.op-section-head-center .op-section-intro {
    margin: 0 auto;
}

.op-about {
    position: relative;
    padding: 24px 0 100px;
}

.op-about-copy .op-section-text + .op-section-text {
    margin-top: 16px;
}

.op-about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.op-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.op-value {
    padding: 26px 22px;
    border-radius: 20px;
    border: 1px solid var(--op-line);
    background: linear-gradient(170deg, rgba(23, 23, 54, 0.9), rgba(9, 9, 26, 0.9));
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.op-value:nth-child(even) {
    transform: translateY(22px);
}

.op-value:hover {
    border-color: rgba(34, 230, 242, 0.42);
}

.op-value h3 {
    margin: 16px 0 10px;
    font-size: 1.12rem;
}

.op-value p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--op-muted);
}

.op-value-icon,
.op-feature-icon,
.op-step-icon,
.op-notice-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #06061a;
    font-size: 1.05rem;
    background: linear-gradient(135deg, var(--op-cyan), #4bb6ff);
}

.op-value-icon-alt,
.op-feature-icon-alt,
.op-notice-icon-alt {
    background: linear-gradient(135deg, var(--op-violet), var(--op-magenta));
}

.op-value-icon-gold,
.op-feature-icon-gold,
.op-notice-icon-gold {
    background: linear-gradient(135deg, var(--op-gold), #ff9a4d);
}

.op-value-icon-green,
.op-feature-icon-green,
.op-notice-icon-green {
    background: linear-gradient(135deg, #3ce88b, #22e6f2);
}

.op-steps {
    position: relative;
    padding: 90px 0;
    border-top: 1px solid var(--op-line);
    border-bottom: 1px solid var(--op-line);
    background: rgba(8, 8, 22, 0.5);
}

.op-step {
    position: relative;
    height: 100%;
    padding: 30px 24px 26px;
    border-radius: 20px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.op-step:hover {
    transform: translateY(-6px);
    border-color: rgba(123, 92, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
}

.op-step-num {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: var(--op-head);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.07);
}

.op-step h3 {
    margin: 18px 0 10px;
    font-size: 1.14rem;
}

.op-step p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--op-muted);
}

.op-features {
    position: relative;
    padding: 100px 0;
}

.op-feature {
    height: 100%;
    padding: 30px 26px;
    border-radius: 20px;
    border: 1px solid var(--op-line);
    background: linear-gradient(170deg, rgba(23, 23, 54, 0.88), rgba(9, 9, 26, 0.88));
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.op-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(34, 230, 242, 0.4);
    box-shadow: 0 22px 50px rgba(5, 5, 20, 0.6);
}

.op-feature h3 {
    margin: 18px 0 12px;
    font-size: 1.16rem;
}

.op-feature p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--op-muted);
}

.op-voices {
    position: relative;
    padding: 0 0 100px;
}

.op-voice {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 32px 26px 26px;
    border-radius: 20px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.op-voice:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 62, 165, 0.4);
}

.op-voice-mark {
    position: absolute;
    top: 24px;
    right: 26px;
    font-size: 1.6rem;
    color: rgba(123, 92, 255, 0.28);
}

.op-voice blockquote {
    margin: 0 0 24px;
    font-size: 0.98rem;
    color: #d4d8f4;
    line-height: 1.7;
}

.op-voice figcaption {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--op-line);
}

.op-voice-avatar {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--op-surface-2);
    color: var(--op-cyan);
}

.op-voice-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.op-voice-meta strong {
    font-family: var(--op-head);
    color: #fff;
    font-size: 0.95rem;
}

.op-voice-meta small {
    color: var(--op-muted);
    font-size: 0.78rem;
}

.op-notice {
    position: relative;
    padding: 0 0 100px;
}

.op-notice-panel {
    position: relative;
    padding: 52px 44px;
    border-radius: 28px;
    border: 1px solid rgba(140, 150, 255, 0.24);
    background:
        radial-gradient(circle at 12% 10%, rgba(34, 230, 242, 0.16), transparent 45%),
        radial-gradient(circle at 88% 90%, rgba(255, 62, 165, 0.16), transparent 45%),
        linear-gradient(160deg, rgba(20, 20, 48, 0.95), rgba(8, 8, 24, 0.95));
    overflow: hidden;
}

.op-notice-panel .op-section-title {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.op-notice-panel .op-section-text + .op-section-text {
    margin-top: 16px;
}

.op-notice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.op-notice-card {
    padding: 24px 22px;
    border-radius: 18px;
    border: 1px solid var(--op-line);
    background: rgba(6, 6, 20, 0.6);
}

.op-notice-card h3 {
    margin: 16px 0 10px;
    font-size: 1.04rem;
}

.op-notice-card p {
    margin: 0;
    font-size: 0.87rem;
    color: var(--op-muted);
}

.op-faq {
    position: relative;
    padding: 0 0 104px;
}

.op-faq-wrap {
    max-width: 880px;
    margin: 0 auto;
}

.op-faq .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--op-text);
    --bs-accordion-border-color: var(--op-line);
    --bs-accordion-border-radius: 16px;
    --bs-accordion-inner-border-radius: 16px;
    --bs-accordion-btn-color: #fff;
    --bs-accordion-btn-bg: rgba(255, 255, 255, 0.03);
    --bs-accordion-btn-padding-y: 20px;
    --bs-accordion-btn-padding-x: 24px;
    --bs-accordion-body-padding-y: 4px;
    --bs-accordion-body-padding-x: 24px;
    --bs-accordion-active-color: #fff;
    --bs-accordion-active-bg: rgba(123, 92, 255, 0.16);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(34, 230, 242, 0.22);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ba0c9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2322e6f2'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.op-faq .accordion-item {
    margin-bottom: 14px;
    border: 1px solid var(--op-line);
    border-radius: var(--bs-accordion-border-radius);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.op-faq .accordion-button {
    font-family: var(--op-head);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.op-faq .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.op-faq .accordion-body {
    padding-bottom: 22px;
    color: var(--op-muted);
    font-size: 0.94rem;
}

.op-faq-more {
    margin: 26px 0 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--op-muted);
}

.op-faq-more a {
    color: var(--op-cyan);
    font-weight: 600;
}

.op-faq-more a:hover {
    color: var(--op-magenta);
}

.op-footer {
    position: relative;
    z-index: 2;
    padding: 76px 0 30px;
    border-top: 1px solid var(--op-line);
    background: linear-gradient(180deg, rgba(8, 8, 22, 0.92), rgba(4, 4, 12, 0.98));
}

.op-footer-about {
    margin: 22px 0 22px;
    font-size: 0.92rem;
    color: var(--op-muted);
    max-width: 420px;
}

.op-footer-badge {
    display: inline-block;
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.op-footer-badge:hover {
    border-color: rgba(34, 230, 242, 0.45);
    background: rgba(255, 255, 255, 0.07);
}

.op-footer-badge img {
    height: 46px;
    width: auto;
}

.op-footer-title {
    margin: 0 0 18px;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.op-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.op-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--op-muted);
}

.op-footer-links a:hover {
    color: #fff;
}

.op-footer-links i {
    font-size: 0.66rem;
    opacity: 0.65;
}

.op-footer-notice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 60px;
    padding-top: 34px;
    border-top: 1px solid var(--op-line);
}

.op-footer-notice-item {
    display: flex;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--op-line);
    background: rgba(255, 255, 255, 0.03);
}

.op-footer-notice-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #06061a;
    background: linear-gradient(135deg, var(--op-cyan), #4bb6ff);
}

.op-footer-notice-icon-alt {
    background: linear-gradient(135deg, var(--op-violet), var(--op-magenta));
}

.op-footer-notice-item strong {
    display: block;
    margin-bottom: 7px;
    font-family: var(--op-head);
    font-size: 0.98rem;
    color: #fff;
}

.op-footer-notice-item p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--op-muted);
}

.op-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--op-line);
}

.op-footer-copy {
    margin: 0;
    font-size: 0.84rem;
    color: var(--op-muted);
}

.op-footer-mini {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.op-footer-mini a {
    font-size: 0.84rem;
    color: var(--op-muted);
}

.op-footer-mini a:hover {
    color: #fff;
}

@keyframes op-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes op-drift {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -12px;
    }
}

@keyframes op-aurora {
    from {
        filter: blur(70px) hue-rotate(0deg);
    }
    to {
        filter: blur(70px) hue-rotate(360deg);
    }
}

@media (max-width: 1399.98px) {
    .op-nav-link {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .op-float-top {
        left: -2%;
    }

    .op-float-mid {
        right: -2%;
    }
}

@media (max-width: 1199.98px) {
    .op-nav,
    .op-header-cta {
        display: none;
    }

    .op-burger {
        display: inline-flex;
    }

    .op-header-inner {
        min-height: 78px;
    }

    .op-hero {
        padding: 60px 0 72px;
    }

    .op-hero-copy {
        text-align: center;
    }

    .op-hero-text,
    .op-hero-points {
        margin-left: auto;
        margin-right: auto;
    }

    .op-hero-points li {
        justify-content: center;
    }

    .op-hero-actions,
    .op-hero-trust {
        justify-content: center;
    }

    .op-hero-trust p {
        text-align: left;
    }

    .op-hero-visual {
        max-width: 620px;
        margin: 0 auto;
    }

    .op-games {
        padding: 76px 0 84px;
    }

    .op-section-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 22px;
    }

    .op-section-intro {
        margin: 0 auto;
    }

    .op-about {
        padding-bottom: 84px;
    }

    .op-value:nth-child(even) {
        transform: none;
    }

    .op-steps {
        padding: 74px 0;
    }

    .op-features {
        padding: 84px 0;
    }

    .op-voices,
    .op-notice {
        padding-bottom: 84px;
    }

    .op-faq {
        padding-bottom: 88px;
    }

    .op-notice-panel {
        padding: 42px 34px;
    }
}

@media (max-width: 991.98px) {
    .op-footer-notice {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 46px;
    }

    .op-footer-about {
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    .op-topbar-side {
        gap: 14px;
    }

    .op-topbar-link span {
        display: none;
    }

    .op-marquee {
        margin-top: 54px;
    }
}

@media (max-width: 767.98px) {
    .op-topbar-inner {
        justify-content: center;
        min-height: 40px;
        padding: 7px 0;
    }

    .op-topbar-note {
        font-size: 0.76rem;
        text-align: center;
        justify-content: center;
    }

    .op-topbar-side {
        display: none;
    }

    .op-logo-mark {
        width: 42px;
        height: 42px;
    }

    .op-logo-name {
        font-size: 1.16rem;
    }

    .op-hero {
        padding: 46px 0 60px;
    }

    .op-hero-title {
        margin-top: 20px;
    }

    .op-btn-lg {
        padding: 14px 24px;
        font-size: 0.94rem;
    }

    .op-hero-actions .op-btn {
        flex: 1 1 100%;
    }

    .op-stats {
        gap: 10px;
    }

    .op-stat {
        padding: 14px 12px;
    }

    .op-stat-value {
        font-size: 1.5rem;
    }

    .op-stat-label {
        font-size: 0.72rem;
    }

    .op-float {
        padding: 10px 13px;
        scale: 0.9;
    }

    .op-float-top {
        left: -3%;
        top: 3%;
    }

    .op-float-mid {
        right: -3%;
    }

    .op-float-bottom {
        bottom: 4%;
        left: 0;
    }

    .op-games {
        padding: 58px 0 66px;
    }

    .op-section-head {
        margin-bottom: 34px;
    }

    .op-games-note {
        margin-top: 30px;
        font-size: 0.8rem;
        text-align: left;
        align-items: flex-start;
    }

    .op-games-note i {
        margin-top: 5px;
    }

    .op-about {
        padding: 8px 0 62px;
    }

    .op-value-grid,
    .op-notice-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .op-steps {
        padding: 58px 0;
    }

    .op-features {
        padding: 62px 0;
    }

    .op-voices,
    .op-notice {
        padding-bottom: 62px;
    }

    .op-faq {
        padding-bottom: 66px;
    }

    .op-notice-panel {
        padding: 32px 22px;
        border-radius: 22px;
    }

    .op-footer {
        padding-top: 58px;
    }
}

@media (max-width: 575.98px) {
    .op-logo-tag {
        display: none;
    }

    .op-hero-title {
        font-size: 2.1rem;
    }

    .op-hero-trust {
        flex-direction: column;
        gap: 12px;
    }

    .op-hero-trust p {
        text-align: center;
    }

    .op-hero-text {
        font-size: 0.98rem;
    }

    .op-stats {
        grid-template-columns: 1fr;
    }

    .op-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 13px 16px;
    }

    .op-stat-label {
        margin-top: 0;
        text-align: right;
    }

    .op-float-mid,
    .op-float-bottom {
        display: none;
    }

    .op-float-top {
        top: auto;
        bottom: -18px;
        left: 50%;
        translate: -50% 0;
        scale: 0.92;
        animation: none;
    }

    .op-hero-visual {
        padding-bottom: 26px;
    }

    .op-marquee-track {
        gap: 30px;
    }

    .op-section-link {
        width: 100%;
    }

    .op-game-body {
        padding: 20px 18px 22px;
    }

    .op-game-title {
        font-size: 1.18rem;
    }

    .op-about-actions .op-btn {
        flex: 1 1 100%;
    }

    .op-faq .accordion {
        --bs-accordion-btn-padding-x: 18px;
        --bs-accordion-body-padding-x: 18px;
    }

    .op-faq .accordion-button {
        font-size: 0.95rem;
    }

    .op-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .op-footer-mini {
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .op-hero-frame,
    .op-float,
    .op-hero-glow,
    .op-marquee-track {
        animation: none;
    }

    .op-btn:hover,
    .op-stat:hover,
    .op-game:hover,
    .op-step:hover,
    .op-feature:hover,
    .op-voice:hover {
        transform: none;
    }

    .op-game:hover .op-game-media img {
        transform: none;
    }
}

.op-age-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 3, 12, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.op-age-gate.is-visible {
    opacity: 1;
    visibility: visible;
}

.op-age-panel {
    width: min(480px, 100%);
    padding: 38px 34px 32px;
    border: 1px solid rgba(140, 150, 255, 0.28);
    border-radius: 26px;
    background:
        radial-gradient(circle at 10% 0%, rgba(34, 230, 242, 0.15), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(255, 62, 165, 0.16), transparent 45%),
        #0b0b22;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.72);
    text-align: center;
    transform: translateY(14px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.op-age-gate.is-visible .op-age-panel {
    transform: translateY(0) scale(1);
}

.op-age-mark {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 18px;
    color: #06061a;
    font-size: 1.3rem;
    background: var(--op-gradient);
    box-shadow: 0 14px 34px rgba(123, 92, 255, 0.36);
}

.op-age-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--op-cyan);
    font-family: var(--op-head);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.op-age-panel h2 {
    margin: 0 0 12px;
    font-size: clamp(1.45rem, 5vw, 2rem);
}

.op-age-panel p {
    margin: 0 auto;
    max-width: 390px;
    color: var(--op-muted);
    font-size: 0.92rem;
}

.op-age-panel .op-age-legal {
    margin-bottom: 8px;
    color: #fff;
    font-weight: 600;
}

.op-age-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.op-age-restricted {
    padding: 6px 0 12px;
}

.op-cookie {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: min(880px, calc(100% - 40px));
    margin: 0 auto;
    padding: 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(140, 150, 255, 0.28);
    border-radius: 18px;
    background: rgba(11, 11, 34, 0.96);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.op-cookie.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.op-cookie-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #06061a;
    background: linear-gradient(135deg, var(--op-gold), var(--op-magenta));
}

.op-cookie-copy strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-family: var(--op-head);
    font-size: 0.92rem;
}

.op-cookie-copy p {
    margin: 0;
    color: var(--op-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.op-cookie-copy a {
    color: var(--op-cyan);
}

.op-cookie-actions {
    display: flex;
    gap: 10px;
}

.op-cookie-actions .op-btn {
    padding: 10px 15px;
    font-size: 0.78rem;
}

.op-page-hero {
    position: relative;
    padding: 86px 0 72px;
    text-align: center;
}

.op-page-hero-inner {
    max-width: 820px;
    margin: 0 auto;
}

.op-page-title {
    margin: 22px 0 18px;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
}

.op-page-lead {
    margin: 0 auto;
    max-width: 700px;
    color: var(--op-muted);
    font-size: 1.08rem;
}

.op-page-content {
    position: relative;
    padding: 0 0 100px;
}

.op-content-panel {
    padding: 42px;
    border: 1px solid var(--op-line);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(20, 20, 48, 0.9), rgba(8, 8, 24, 0.9));
}

.op-content-panel + .op-content-panel {
    margin-top: 24px;
}

.op-content-panel h2 {
    margin: 0 0 18px;
    font-size: 1.55rem;
}

.op-content-panel h3 {
    margin: 26px 0 10px;
    font-size: 1.08rem;
}

.op-content-panel p,
.op-content-panel li {
    color: var(--op-muted);
}

.op-content-panel p:last-child,
.op-content-panel ul:last-child {
    margin-bottom: 0;
}

.op-content-panel a {
    color: var(--op-cyan);
    font-weight: 600;
}

.op-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.op-content-card {
    height: 100%;
    padding: 28px;
    border: 1px solid var(--op-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
}

.op-content-card h2,
.op-content-card h3 {
    margin: 16px 0 10px;
    font-size: 1.2rem;
}

.op-content-card p {
    margin: 0;
    color: var(--op-muted);
}

.op-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 15px 20px;
    border: 1px solid rgba(34, 230, 242, 0.35);
    border-radius: 14px;
    color: var(--op-cyan);
    background: rgba(34, 230, 242, 0.08);
    font-family: var(--op-head);
    font-weight: 700;
}

.op-game-stage {
    position: relative;
    max-width: 920px;
    margin: 0 auto 28px;
    padding: 30px;
    border: 1px solid rgba(140, 150, 255, 0.28);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 20%, rgba(123, 92, 255, 0.2), transparent 55%),
        #09091d;
    box-shadow: var(--op-shadow);
    overflow: hidden;
}

.op-game-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.op-game-stage-head h2 {
    margin: 0;
    font-size: 1.25rem;
}

.op-game-status {
    color: var(--op-cyan);
    font-family: var(--op-head);
    font-size: 0.82rem;
    font-weight: 600;
}

.op-reels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 580px;
    margin: 0 auto 24px;
}

.op-reel {
    height: 180px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(34, 230, 242, 0.35);
    border-radius: 22px;
    background: linear-gradient(180deg, #151541, #070719);
    box-shadow: inset 0 0 30px rgba(34, 230, 242, 0.12);
    font-size: clamp(2.8rem, 9vw, 5rem);
    color: var(--op-cyan);
}

.op-reel.is-spinning {
    animation: op-reel-pulse 0.18s linear infinite;
}

.op-game-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.op-cards-table {
    min-height: 300px;
    padding: 26px;
    border: 2px solid rgba(255, 201, 77, 0.35);
    border-radius: 140px 140px 28px 28px;
    background: radial-gradient(circle at 50% 0%, #52266c, #1b1139 70%);
    box-shadow: inset 0 0 50px rgba(34, 230, 242, 0.14);
}

.op-card-hands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.op-hand h3 {
    margin: 0 0 14px;
    font-size: 0.92rem;
    text-align: center;
}

.op-hand-cards {
    min-height: 126px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.op-playing-card {
    width: 72px;
    height: 104px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #101025;
    background: #f6f7ff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    font-family: var(--op-head);
    font-size: 1.18rem;
    font-weight: 800;
    animation: op-card-in 0.35s ease both;
}

.op-playing-card.is-red {
    color: #d51f78;
}

.op-wheel-layout {
    display: grid;
    grid-template-columns: minmax(240px, 430px) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
}

.op-wheel {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
        #22e6f2 0deg 30deg, #151536 30deg 60deg,
        #ff3ea5 60deg 90deg, #151536 90deg 120deg,
        #22e6f2 120deg 150deg, #151536 150deg 180deg,
        #ff3ea5 180deg 210deg, #151536 210deg 240deg,
        #22e6f2 240deg 270deg, #151536 270deg 300deg,
        #ff3ea5 300deg 330deg, #151536 330deg 360deg
    );
    border: 12px solid #25254f;
    box-shadow: 0 0 55px rgba(123, 92, 255, 0.42), inset 0 0 30px rgba(0, 0, 0, 0.55);
    transition: transform 3.8s cubic-bezier(0.12, 0.7, 0.12, 1);
}

.op-wheel::after {
    content: "";
    position: absolute;
    inset: 39%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--op-gold), #ff8b4d);
    box-shadow: 0 0 24px rgba(255, 201, 77, 0.6);
}

.op-wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    z-index: 2;
    translate: -50% 0;
    color: var(--op-gold);
    font-size: 2rem;
}

.op-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}

.op-choice {
    padding: 16px;
    border: 1px solid var(--op-line);
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--op-head);
    font-weight: 700;
    cursor: pointer;
}

.op-choice.is-selected {
    border-color: var(--op-cyan);
    box-shadow: 0 0 0 3px rgba(34, 230, 242, 0.16);
}

.op-game-disclaimer {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--op-line);
    border-radius: 16px;
    color: var(--op-muted);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.86rem;
}

.op-game-disclaimer i {
    margin-top: 4px;
    color: var(--op-cyan);
}

@keyframes op-reel-pulse {
    50% {
        filter: brightness(1.65) hue-rotate(35deg);
        transform: translateY(-4px);
    }
}

@keyframes op-card-in {
    from {
        opacity: 0;
        transform: translateY(-14px) rotate(-5deg);
    }
}

@media (max-width: 767.98px) {
    .op-age-panel {
        padding: 30px 22px 24px;
    }

    .op-age-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .op-cookie {
        grid-template-columns: auto minmax(0, 1fr);
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
    }

    .op-cookie-actions {
        grid-column: 1 / -1;
    }

    .op-cookie-actions .op-btn {
        flex: 1 1 0;
    }

    .op-page-hero {
        padding: 58px 0 50px;
    }

    .op-page-content {
        padding-bottom: 70px;
    }

    .op-content-panel {
        padding: 28px 22px;
    }

    .op-content-grid,
    .op-card-hands,
    .op-wheel-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .op-game-stage {
        padding: 22px 16px;
        border-radius: 22px;
    }

    .op-reel {
        height: 120px;
    }

    .op-cards-table {
        border-radius: 90px 90px 24px 24px;
        padding: 24px 12px;
    }

    .op-playing-card {
        width: 58px;
        height: 86px;
    }

    .op-wheel-layout {
        gap: 24px;
    }
}