/*
/ Trustlytics 404 css
/ V1.0
*/
/* fonts */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Heebo';
    src: url('../fonts/Heebo-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
:root {
    --text:#4d5574;
    --title:#090909;
    --light:#8896a8;
    --white:#ffffff;
    --primary:#4992d6;
    --secondary:#2d8a8a;
    --cool:#f4f6f9;
    --ring:rgba(73,146,214,.14);
    --sh:0 12px 40px -12px rgba(45,87,138,.18);
    --win:#2d8a8a;
    --lose:#f56b6a;
    --border:#eaeef3; /
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
}
body {
    font-family:'Heebo',sans-serif;
    background:var(--white);
    color:var(--text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow-x:hidden;
}
a {
    text-decoration:none;
    color:inherit;
}
.bg-fx {
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden
}
@keyframes gridDrift {
    from { background-position:0 0,0 0; }
    to { background-position:46px 46px,46px 46px; }
}
.spark {
    position:absolute;
    bottom:-10px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--primary);
    opacity:0;
    animation:rise linear infinite;
}
@keyframes rise {
    0% { transform:translateY(0) scale(.6); opacity:0; }
    12% { opacity:.55; }
    100% { transform:translateY(-102vh) scale(1) ;opacity:0; }
}
.wrap {
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    width:100%;
    position:relative;
    z-index:1
}
nav {
    position:sticky;
    top:0;
    z-index:60;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px);
    border-bottom:1px solid #eef1f6;
}
.nav-in {
    display:flex;
    justify-content:space-between;
    height:95px;
}

.logo {
    display:flex;
    align-items:center;
}
.logo img {
    height:80px;
    width:auto;
}
@media(max-width:860px) {
    .logo img {
        height:60px;
    }
}
main {
    flex:1;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:44px 0 60px;
}
.layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
}
@media(max-width:920px) {
    .layout {
        grid-template-columns:1fr;
        gap:36px;
        text-align:center;
    }
}
.layout410 {
    display:flex;
    justify-content:center;
}
.layout410 > section {
    max-width:640px;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Inter','Segoe UI',sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:18px;
}
.eyebrow::before {
    content:"";
    width:22px;
    height:2px;
    background:var(--primary);
    border-radius:2px;
}
@media(max-width:920px) {
    .eyebrow {
        justify-content:center;
    }
}
.big404{
    font-family:'Inter',sans-serif;
    font-weight:900;
    line-height:.9;
    font-size:clamp(4.5rem,13vw,9rem);
    color:var(--title);
    letter-spacing:-.04em;
    margin-bottom:6px;
    display:flex;
    align-items:baseline;
    gap:.06em;
}
@media(max-width:920px) {
    .big404 {
        justify-content:center;
    }
}
.big404 .z {
    color:var(--primary);
    position:relative;
    display:inline-block;
}
.big404 .z::before {
    content:"0";
    position:absolute;
    left:0;
    top:0;
    color:var(--secondary);
    -webkit-text-fill-color:var(--secondary);
    opacity:0;
    animation:glitch 6s steps(1) infinite;
}
.big410 {
    font-family:'Inter',sans-serif;
    font-weight:900;
    line-height:.9;
    font-size:clamp(4.5rem,13vw,9rem);
    color:var(--title);
    letter-spacing:-.04em;
    margin-bottom:6px;
    display:flex;
    align-items:baseline;
    gap:.06em;
}
@media(max-width:920px) {
    .big410 {
        justify-content:center;
    }
}
.big410 .z {
    color:var(--primary);
    position:relative;
    display:inline-block;
}
.big410 .z::before {
    content:"1";
    position:absolute;
    left:0;
    top:0;
    color:var(--secondary);
    -webkit-text-fill-color:var(--secondary);
    opacity:0;
    animation:glitch 6s steps(1) infinite;
}
@keyframes glitch {
    0%,92%,100% { opacity:0; transform:translate(0,0); }
    93% { opacity:.5; transform:translate(-3px,2px); }
    95% { opacity:.4; transform:translate(3px,-2px); }
    97% { opacity:.5; transform:translate(-2px,-1px); }
}
.reveal {
    opacity:0;
    transform:translateY(18px);
    animation:fadeUp .7s cubic-bezier(.2,.7,.3,1) forwards;
}
.d3 {
    animation-delay:.25s;
}
.d4 {
    animation-delay:.35s;
}
.d5 {
    animation-delay:.45s;
}
.d6 {
    animation-delay:.2s;
}
@keyframes fadeUp {
    to { opacity:1; transform:translateY(0); }
}
h1 {
    font-family:'Inter',sans-serif;
    font-size:clamp(1.4rem,2.6vw,2rem);
    font-weight:800;
    color:var(--title);
    line-height:1.15;
    letter-spacing:-.02em;
    margin-bottom:16px;
    max-width:26ch;
}
@media(max-width:920px) {
    h1 {
        margin-left:auto;
        margin-right:auto;
    }
}
.lead {
    font-size:1.06rem;
    color:var(--text);
    max-width:46ch;
    margin-bottom:14px;
}
@media(max-width:920px) {
    .lead {
        margin-left:auto;
        margin-right:auto;
    }
}
.lead.strong {
    font-weight:600;
    margin-bottom:30px;
}
.cta-row {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}
@media(max-width:920px) {
    .cta-row {
        justify-content:center;
    }
}
.btn {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:700;
    font-size:.9rem;
    padding:13px 24px;
    border-radius:12px;
    transition:.25s;
    cursor:pointer;
    border:none;
    font-family:inherit;
}
.btn svg {
    width:17px;
    height:17px;
}
.btn-p {
    background:var(--primary);
    color:var(--white);
    box-shadow:0 8px 24px -6px var(--ring);
}
.btn-p:hover {
    transform:translateY(-2px);
    box-shadow:0 14px 32px -8px rgba(73,146,214,.5);
}
.game-card {
    position:relative;
    border-radius:16px;
    background:var(--white);
    box-shadow:0 34px 80px -30px rgba(45,87,138,.5),0 6px 0 -1px #d3ddea,0 8px 0 -1px #c2cfe0,inset 0 2px 0 rgba(255,255,255,.9);
    transition:box-shadow .4s, transform .4s;
    overflow:hidden;
    border: 1px solid #eaeef3;
}
@media(max-width:520px) {
    .game-card {
        padding:24px 20px 28px;
    }
}
.game-card:hover{
    transform:translateY(-4px);
    box-shadow:0 46px 100px -32px rgba(45,87,138,.55),0 6px 0 -1px #d3ddea,0 8px 0 -1px #c2cfe0, inset 0 2px 0 rgba(255,255,255,.9);
}
.gc-head {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:15px 20px;
    background:var(--secondary);
    background-size:200% 100%;
    animation:barShift 9s ease-in-out infinite alternate;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.08), 0 4px 14px -6px rgba(73,146,214,.5);
}
@keyframes barShift {
    0% { background-position:0% 50%; }
    100% { background-position:100% 50%; }
}
.gc-head::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 47%,transparent 60%);
    transform:translateX(-120%);
    animation:sheen 5.5s ease-in-out infinite;
}
@keyframes sheen {
    0%,72% { transform:translateX(-120%); }
    86%,100% { transform:translateX(120%); }
}
.gc-title {
    position:relative;
    z-index:1;
    font-family:'Inter',sans-serif;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--white);
    display:inline-flex;
    align-items:center;
    gap:10px;
}
.gc-title svg {
    width:16px;
    height:16px;
}
.reset {
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:inherit;
    font-size:.76rem;
    font-weight:700;
    color:var(--white);
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.4);
    border-radius:12px;
    padding:7px 12px;
    cursor:pointer;
    transition:background .25s, transform .25s;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.reset:hover {
    background:rgba(255,255,255,.3);
    transform:translateY(-1px);
}
.reset:active {
    transform:translateY(0);
}
.reset:focus-visible {
    outline:2px solid var(--white);
    outline-offset:2px;
}
.reset svg {
    width:14px;
    height:14px;
}
.gc-body {
    position:relative;
    z-index:1;
    padding:32px 26px 30px;
}
.gc-body::before,.gc-body::after {
    content:"";
    position:absolute;
    width:26px;
    height:26px;
    pointer-events:none;
    border:2px solid var(--ring);
    border-radius:2px;
}
.gc-body::before {
    top:14px;
    left:14px;
    border-right:none;
    border-bottom:none;
}
.gc-body::after {
    bottom:14px;
    right:14px;
    border-left:none;
    border-top:none;
}
.game-card.flash-win::after,.game-card.flash-lose::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    animation:flashFade .6s ease forwards;
}
.game-card.flash-win::after {
    background:radial-gradient(circle at 50% 40%,rgba(15,226,145,.18),transparent 62%);
}
.game-card.flash-lose::after {
    background:radial-gradient(circle at 50% 40%,rgba(245,107,106,.16),transparent 62%);
}
@keyframes flashFade {
    0% { opacity:0; }
    25% { opacity:1; }
    100% { opacity:0; }
}
.score {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:stretch;
    gap:0;
    margin-bottom:22px;
    background:var(--cool);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px -12px rgba(45,87,138,.28);
    position:relative;
    overflow:hidden;
    top: 15px;
}
.score-cell {
    position:relative;
    z-index:1;
    padding:6px 8px;
    text-align:center;
    transition:transform .25s;
    border-radius:10px;
}
.score-cell.bump {
    animation:scoreBump .5s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes scoreBump {
    0% { transform:scale(1); }
    45% { transform:scale(1.12); }
    100% { transform:scale(1); }
}
.score-cell .lbl {
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:4px;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.score-cell .val {
    font-family:'Inter',sans-serif;
    font-size:2.2rem;
    font-weight:900;
    line-height:1;
    font-variant-numeric:tabular-nums;
}
.score-cell.you .val {
    color:var(--primary);
}
.score-cell.cpu .val {
    color:var(--secondary);
}
.score-cell.you.bump .val {
    text-shadow:0 0 16px rgba(73,146,214,.55);
}
.score-cell.cpu.bump .val {
    text-shadow:0 0 16px rgba(45,138,138,.55);
}
.score-vs {
    align-self:center;
    font-family:'Inter',sans-serif;
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.06em;
    color:var(--text);
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
    background:var(--white);
    border:1px solid var(--border);
    box-shadow:0 4px 12px -4px rgba(45, 87, 138, .2);
}
.arena {
    position:relative;
    overflow:hidden;
    background:var(--cool);
    border:1px solid var(--border);
    border-radius:12px;
    padding:30px 20px 24px;
    margin-bottom:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px -12px rgba(45,87,138,.28);
}
.hands {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:10px;
    margin-bottom:18px;
}
.vs-bolt {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-family:'Inter',sans-serif;
    font-weight:900;
    font-size:.82rem;
    letter-spacing:.06em;
    color:var(--text);
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--white);
    border:1px solid var(--border);
    box-shadow:0 4px 12px -4px rgba(45,87,138,.2);
    z-index:2;
    transition:.3s;
}
.arena.thinking .vs-bolt {
    color:var(--primary);
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(73,146,214,.2);
    animation:vsPulse .55s ease infinite;
}
@keyframes vsPulse {
    0%,100% { transform:translate(-50%,-50%) scale(1); }
    50% { transform:translate(-50%,-50%) scale(1.16); }
}
.hand {
    position:relative;
    width:98px;
    height:98px;
    border-radius:50%;
    background:var(--white);
    border:1px solid var(--border);
    display:grid;
    place-items:center;
    box-shadow:0 12px 28px -12px rgba(45,87,138,.28), inset 0 2px 4px rgba(255,255,255,.9);
}
@media(max-width:520px) {
    .hand {
        width:76px;
        height:76px;
    }
}
.hand::before {
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    z-index:-1;
    box-shadow:0 0 10px 4px currentColor;
    opacity:.32;
    transition:opacity .3s;
}
.hand.you {
    color:var(--primary);
}
.hand.cpu {
    color:var(--secondary);
}
.hand svg {
    width:50px;
    height:50px;
    color:var(--title);
}
@media(max-width:520px) {
    .hand svg {
        width:38px;
        height:38px;
    }
}
.hand.you svg {
    color:var(--primary);
}
.hand.cpu svg {
    color:var(--secondary);
}
.arena.thinking .hand {
    animation:none;
}
.arena.thinking .hand.you {
    transform-origin:center;
    animation:shakeL .55s ease infinite;
}
.arena.thinking .hand.cpu {
    transform-origin:center;
    animation:shakeR .55s ease infinite;
}
@keyframes shakeL {
    0%,100% { transform:rotate(0) translateY(0); }
    50% { transform:rotate(-14deg) translateY(-8px); }
}
@keyframes shakeR {
    0%,100% { transform:rotate(0) translateY(0); }
    50% { transform:rotate(14deg) translateY(-8px); }
}
.hand.pop {
    animation:pop .34s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes pop {
    0% { transform:scale(.78); }
    55% { transform:scale(1.16); }
    100% { transform:scale(1); }
}
.verdict{
    position:relative;z-index:1;
    text-align:center;font-family:'Inter',sans-serif;font-weight:800;
    font-size:1.08rem;color:var(--title);min-height:1.6em;transition:color .2s;
}
.verdict.pop {
    animation:verdictIn .4s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes verdictIn {
    0% { opacity:0; transform:translateY(6px) scale(.9); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
.verdict.win {
    color:var(--win);
}
.verdict.lose {
    color:var(--lose);
}
.verdict.tie {
    color:var(--text);
}
.choose-lbl {
    text-align:center;
    font-size:.8rem;
    font-weight:600;
    color:var(--text);
    margin-bottom:14px;
}
.choices {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
@media(max-width:520px) {
    .choices {
        gap:8px;
    }
}
.choice {
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:1.5px solid var(--border);
    border-radius:14px;
    padding:16px 8px 13px;
    cursor:pointer;
    transition:.22s;
    font-family:inherit;
}
@media(max-width:520px) {
    .choice {
        padding:13px 6px 11px;
    }
}
.choice::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .28s ease;
}
.choice svg {
    width:34px;
    height:34px;
    color:var(--text);
    transition:.22s;
}
@media(max-width:520px) {
    .choice svg {
        width:28px;
        height:28px;
    }
}
.choice span {
    font-size:.82rem;
    font-weight:600;
    color:var(--text);
    transition:.22s;
}
.choice:hover {
    border-color:var(--primary);
    transform:translateY(-4px);
    box-shadow:0 14px 30px -12px rgba(73,146,214,.5);
}
.choice:hover::after {
    transform:scaleX(1);
}
.choice:hover svg {
    color:var(--primary);
    transform:scale(1.14) rotate(-6deg);
}
.choice:hover span {
    color:var(--primary);
}
.choice:active {
    transform:translateY(-1px) scale(.97);
}
.choice:focus-visible {
    outline:2px solid var(--primary);
    outline-offset:2px;
}
.choice.picked {
    border-color:var(--primary);
    background:var(--ring);
}
.choice.picked svg,.choice.picked span {
    color:var(--primary);
}
.choices.locked .choice {
    pointer-events:none;
    opacity:.6;
}
.choices.locked .choice.picked {
    opacity:1;
    box-shadow:0 0 0 3px var(--ring);
}
.hand.win-glow {
    animation:winGlow 1.1s ease;
}
@keyframes winGlow {
    0%,100% { box-shadow:0 12px 28px -12px rgba(45,87,138,.28); }
    50% { box-shadow:0 0 0 6px rgba(15,226,145,.4),0 0 30px 4px rgba(15,226,145,.45); }
}
.hand.lose-glow {
    animation:loseGlow 1.1s ease;
}
@keyframes loseGlow {
    0%,100% { box-shadow:0 12px 28px -12px rgba(45,87,138,.28); }
    50% { box-shadow:0 0 0 6px rgba(245,107,106,.45),0 0 30px 4px rgba(245,107,106,.5); }
}
.arena.glitch {
    animation:arenaJolt .5s steps(2) 1;
}
@keyframes arenaJolt {
    0%,100% { transform:translate(0,0); }
    20% { transform:translate(-3px,1px); }
    40% {transform:translate(3px,-1px); }
    60% { transform:translate(-2px,0); }
    80% { transform:translate(2px,1px); }
}
.scanlines {
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    opacity:0;
    background: repeating-linear-gradient(to bottom, rgba(245,107,106,.16) 0 2px, transparent 2px 5px);
}
.scanlines::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:26%;
    background:linear-gradient(to bottom, transparent, rgba(255,107,106,.5), transparent);
    animation:scanSweep .5s linear 1;
}
.arena.glitch .scanlines {
    animation:scanShow .55s ease 1;
}
@keyframes scanShow {
    0% { opacity:0; }
    15% { opacity:1; }
    70% { opacity:1; }
    100% { opacity:0; }
}
@keyframes scanSweep {
    0% { top:-30%; }
    100% { top:100%; }
}
.arena.glitch .hand.cpu svg {
    animation:sigDrop .5s steps(3) 1;
}
@keyframes sigDrop {
    0%,100% { opacity:1; transform:translate(0,0); }
    30% { opacity:.4; transform:translate(2px,-1px); }
    60% { opacity:.7; transform:translate(-2px,1px); }
}
.streak {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Inter',sans-serif;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.04em;
    color:var(--secondary);
    background:rgba(45,138,138,.1);
    border:1px solid rgba(45,138,138,.2);
    border-radius:999px;
    padding:5px 11px;
    line-height:1;
    opacity:0;
    transform:scale(.7);
    transition:opacity .3s, transform .3s;
}
.streak.show {
    opacity:1;
    transform:scale(1);
}
.streak svg {
    width:13px;
    height:13px;
}
.confetti {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:6;
    overflow:hidden;
}
.confetti i {
    position:absolute;
    top:-12px;
    width:8px;
    height:12px;
    border-radius:2px;
    opacity:0;
    animation:confFall 1.5s ease-in forwards;
}
@keyframes confFall {
    0% { opacity:1; transform:translateY(0) rotate(0); }
    100% { opacity:0; transform:translateY(360px) rotate(540deg); }
}
footer {
    background:var(--secondary);
    color:rgba(255,255,255,.6);
    position:relative;
    overflow:hidden;
}
.ft-top {
    padding:28px 0 5px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.ft-grid {
    display:grid;
    grid-template-columns:3fr 2fr;
    gap:40px;
}
@media(max-width:860px) {
    .ft-grid {
        grid-template-columns:1fr 1fr;
        gap:24px;
    }
}
.ft-brand {
    margin-bottom: 10px;
}
@media(max-width:860px) {
    .ft-brand {
        grid-column:1/-1;
    }
}
.ft-brand p {
    font-size:.88rem;
    color:var(--white);
    margin-top:20px;
    line-height:1.55;
    font-weight: 600;
}
.ft-bot {
    padding:10px 0;
    display:flex;
    justify-content:space-between;
    font-size:.78rem;
    color:rgba(255,255,255,.6);
    flex-wrap:wrap;
    gap:10px;
    font-weight: 500;
}
.ft-bot svg {
    position: relative;
    width:18px;
    height:18px;
    top: 3px;
}
@media(prefers-reduced-motion:reduce) {
    .bg-grid,.spark,.big404 .z,.big404 .z::after,.big404 .z::before,.gc-head,.gc-head::after,.gc-title::before,.reveal,.hand {
        animation:none !important;
    }
    .reveal {
        opacity:1 !important;
        transform:none !important;
    }
    html {
        scroll-behavior:auto;
    }
}