@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;700&display=swap');


/* ===================================== */
/* ROOT VARIABLES */
/* ===================================== */

:root {

    --bg:
        #050510;

    --bg-soft:
        #0b0b1c;

    --glass:
        rgba(255,255,255,0.08);

    --glass-heavy:
        rgba(255,255,255,0.12);

    --border:
        rgba(255,255,255,0.18);

    --white:
        #ffffff;

    --text:
        #e8eaff;

    --muted:
        #a9add0;

    --purple:
        #8b5cf6;

    --blue:
        #2563eb;

    --cyan:
        #22d3ee;

    --green:
        #22c55e;

    --shadow:
        0 25px 80px rgba(0,0,0,.45);

    --radius:
        24px;

    --transition:
        .35s cubic-bezier(.2,.8,.2,1);

}



/* ===================================== */
/* RESET */
/* ===================================== */


* {

    margin:0;
    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    min-height:100vh;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        "Inter",
        sans-serif;

    overflow-x:hidden;

}



a {

    text-decoration:none;

    color:inherit;

}



button {

    font-family:inherit;

    border:none;

    cursor:pointer;

}



/* ===================================== */
/* BACKGROUND SYSTEM */
/* ===================================== */


.background {

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-5;

}



.gradient {

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.55;

    animation:
        floatGradient 16s infinite alternate;

}



.gradient1 {

    width:600px;

    height:600px;

    background:
        #7c3aed;

    top:-200px;

    left:-150px;

}



.gradient2 {

    width:550px;

    height:550px;

    background:
        #2563eb;

    right:-150px;

    top:200px;

    animation-delay:-5s;

}



.gradient3 {

    width:500px;

    height:500px;

    background:
        #06b6d4;

    bottom:-200px;

    left:40%;

    animation-delay:-10s;

}



@keyframes floatGradient {

    from {

        transform:
            translate(0,0)
            scale(1);

    }

    to {

        transform:
            translate(80px,50px)
            scale(1.15);

    }

}



.grid {

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(255,255,255,.04) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.04) 1px,
        transparent 1px
    );

    background-size:
        70px 70px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );

}



.noise {

    position:absolute;

    inset:0;

    opacity:.04;

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

}



/* ===================================== */
/* FLOATING CHESS PIECES */
/* ===================================== */


.floating {

    position:absolute;

    color:white;

    opacity:.08;

    font-size:120px;

    animation:
        floatPiece 18s infinite alternate;

}



.floating1 {

    top:10%;
    left:8%;

}



.floating2 {

    top:60%;
    right:10%;

    animation-delay:-3s;

}



.floating3 {

    bottom:15%;
    left:20%;

}



.floating4 {

    top:25%;
    right:25%;

    animation-delay:-8s;

}



.floating5 {

    bottom:30%;
    right:40%;

}



.floating6 {

    top:75%;
    left:45%;

}



@keyframes floatPiece {


    from {

        transform:
        translateY(0)
        rotate(0deg);

    }


    to {

        transform:
        translateY(-80px)
        rotate(15deg);

    }


}



/* ===================================== */
/* GLASS SYSTEM */
/* ===================================== */


.glass {

    background:
        var(--glass);

    border:

        1px solid var(--border);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    box-shadow:
        var(--shadow);

}



.glass:hover {

    background:
        var(--glass-heavy);

    transform:
        translateY(-5px);

}



/* ===================================== */
/* CURSOR GLOW */
/* ===================================== */


#cursorGlow {

    position:fixed;

    width:250px;

    height:250px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(34,211,238,.18),
            transparent 70%
        );

    pointer-events:none;

    z-index:999;

    transform:
        translate(-50%,-50%);

}



/* ===================================== */
/* NAVIGATION */
/* ===================================== */


header {

    padding:

    30px 7%;

}



.glass-nav {

    height:85px;

    border-radius:
        30px;

    padding:
        0 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.15);

    backdrop-filter:
        blur(25px);

}



.logo {

    display:flex;

    align-items:center;

    gap:15px;

}



.logo-icon {

    width:50px;

    height:50px;

    border-radius:16px;

    display:grid;

    place-items:center;

    font-size:30px;

    background:
        linear-gradient(
        135deg,
        var(--purple),
        var(--cyan)
        );

}



.logo-text h2 {

    font-family:
        "Space Grotesk";

}



.logo-text span {

    color:
        var(--muted);

    font-size:12px;

}



.nav-links {

    display:flex;

    gap:35px;

    list-style:none;

}



.nav-links a {

    color:
        var(--muted);

    transition:
        var(--transition);

}



.nav-links a:hover {

    color:white;

}



.nav-buttons {

    display:flex;

    gap:15px;

}



/* ===================================== */
/* BUTTONS */
/* ===================================== */


.primary-button,
.glass-button {

    padding:
        14px 25px;

    border-radius:
        18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:
        var(--transition);

}



.primary-button {

    background:
        linear-gradient(
        135deg,
        var(--purple),
        var(--blue)
        );

    color:white;

    box-shadow:
        0 15px 40px rgba(139,92,246,.35);

}



.primary-button:hover {

    transform:
        translateY(-4px)
        scale(1.03);

}



.glass-button {

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.2);

}



.glass-button:hover {

    background:
        rgba(255,255,255,.15);

    transform:
        translateY(-4px);

}



.big {

    padding:
        17px 32px;

}




/* ===================================== */
/* HERO */
/* ===================================== */


.hero {

    min-height:
        calc(100vh - 120px);

    padding:
        50px 7%;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:60px;

    align-items:center;

}



.hero-badge {

    display:inline-block;

    padding:
        10px 18px;

    border-radius:50px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid var(--border);

    margin-bottom:25px;

}



.hero h1 {

    font-size:
        clamp(50px,6vw,90px);

    line-height:
        .95;

    font-family:
        "Space Grotesk";

}



.hero h1 span {

    background:
        linear-gradient(
        90deg,
        var(--cyan),
        var(--purple)
        );

    -webkit-background-clip:text;

    color:transparent;

}



.hero p {

    margin-top:30px;

    max-width:620px;

    color:
        var(--muted);

    font-size:18px;

    line-height:1.8;

}



.hero-buttons {

    display:flex;

    gap:20px;

    margin-top:40px;

}



.hero-stats {

    display:flex;

    gap:20px;

    margin-top:50px;

}



.stat-card {

    padding:25px;

    border-radius:22px;

}



.stat-card h2 {

    font-size:32px;

}



.stat-card span {

    color:
        var(--muted);

}

 
/* ===================================== */
/* HERO CHESS PREVIEW */
/* ===================================== */


.hero-right {

    display:flex;

    justify-content:center;

}



.hero-window {

    width:100%;

    max-width:620px;

    border-radius:35px;

    padding:25px;

    animation:
        windowFloat 6s infinite alternate;

}



@keyframes windowFloat {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(-15px);

    }

}



.window-top {

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}



.window-top h3 {

    font-size:16px;

    color:
        var(--muted);

}



.dots {

    display:flex;

    gap:8px;

}



.dots span {

    width:12px;

    height:12px;

    border-radius:50%;

}



.red {

    background:#ef4444;

}



.yellow {

    background:#facc15;

}



.green {

    background:#22c55e;

}



/* ===================================== */
/* CHESSBOARD */
/* ===================================== */


.board {

    display:grid;

    grid-template-columns:
    repeat(8,1fr);

    aspect-ratio:1;

    overflow:hidden;

    border-radius:20px;

    border:
    2px solid rgba(255,255,255,.15);

}



.board div {

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:clamp(18px,3vw,36px);

}



.board div:nth-child(
    odd
) {

    background:
    rgba(255,255,255,.08);

}



.board div:nth-child(
    even
) {

    background:
    rgba(0,0,0,.25);

}



.board-info {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:15px;

    margin-top:20px;

}



.info-box {

    padding:18px;

    border-radius:18px;

    text-align:center;

}



.info-box h4 {

    color:
    var(--muted);

    font-size:13px;

}



.info-box h2 {

    margin-top:8px;

}



/* ===================================== */
/* SECTION COMMON */
/* ===================================== */


section {

    padding:
    100px 7%;

}



.section-title {

    text-align:center;

    max-width:800px;

    margin:
    0 auto 60px;

}



.section-tag {

    display:inline-block;

    padding:
    8px 18px;

    border-radius:50px;

    background:
    rgba(255,255,255,.08);

    border:
    1px solid rgba(255,255,255,.15);

    font-size:13px;

    letter-spacing:2px;

    color:
    var(--cyan);

}



.section-title h2 {

    margin-top:20px;

    font-size:
    clamp(35px,4vw,60px);

    font-family:
    "Space Grotesk";

}



.section-title p {

    margin-top:20px;

    color:
    var(--muted);

    line-height:1.8;

}



/* ===================================== */
/* FEATURE CARDS */
/* ===================================== */


.feature-grid {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:25px;

}



.feature-card {

    padding:35px;

    border-radius:28px;

    transition:
    var(--transition);

}



.feature-card:hover {

    transform:
    translateY(-12px);

}



.feature-icon {

    font-size:45px;

    margin-bottom:20px;

}



.feature-card h3 {

    font-size:24px;

    margin-bottom:15px;

}



.feature-card p {

    color:
    var(--muted);

    line-height:1.7;

}



/* ===================================== */
/* DRYBLOB SECTION */
/* ===================================== */


.about-window {

    padding:50px;

    border-radius:35px;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

}



.about-left h2 {

    font-size:70px;

    margin:20px 0;

    font-family:
    "Space Grotesk";

    background:
    linear-gradient(
    90deg,
    var(--cyan),
    var(--purple)
    );

    -webkit-background-clip:text;

    color:transparent;

}



.about-left p {

    color:
    var(--muted);

    line-height:1.8;

}



.about-buttons {

    display:flex;

    gap:20px;

    margin-top:35px;

}



.about-right {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

}



.stat-box {

    padding:35px;

    border-radius:25px;

    text-align:center;

}



.stat-box h1 {

    font-size:45px;

}



.stat-box span {

    color:
    var(--muted);

}



/* ===================================== */
/* TEAM CARDS */
/* ===================================== */


.team-grid {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.team-card {

    padding:35px;

    border-radius:25px;

    text-align:center;

}



.team-icon {

    font-size:45px;

    margin-bottom:20px;

}



.team-card p {

    color:
    var(--muted);

    line-height:1.7;

    margin-top:15px;

}



/* ===================================== */
/* LIVE STATS */
/* ===================================== */


.live-stats {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.live-card {

    padding:30px;

    border-radius:25px;

}



.live-card h4 {

    color:
    var(--muted);

}



.live-card h2 {

    font-size:45px;

    margin:15px 0;

}



.progress {

    height:8px;

    background:
    rgba(255,255,255,.1);

    border-radius:20px;

    overflow:hidden;

}



.progress div {

    height:100%;

    background:
    linear-gradient(
    90deg,
    var(--cyan),
    var(--purple)
    );

}



/* ===================================== */
/* PLATFORM */
/* ===================================== */


.platform-layout {

    display:grid;

    grid-template-columns:
    1.6fr .8fr;

    gap:30px;

}



.platform-left {

    display:flex;

    flex-direction:column;

    gap:20px;

}



.platform-right {

    display:flex;

    flex-direction:column;

    gap:20px;

}



.player-card {

    padding:20px 25px;

    border-radius:25px;

    display:flex;

    align-items:center;

    gap:20px;

}



.player-avatar {

    width:60px;

    height:60px;

    display:grid;

    place-items:center;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    var(--purple),
    var(--cyan)
    );

    font-size:32px;

}



.player-details {

    flex:1;

}



.player-details span {

    color:
    var(--muted);

}



.player-clock {

    font-size:30px;

    font-family:
    monospace;

}



/* Evaluation */


.evaluation-panel {

    padding:20px;

    border-radius:25px;

}



.evaluation-title {

    color:
    var(--muted);

    margin-bottom:15px;

}



.evaluation-bar {

    height:18px;

    background:
    rgba(255,255,255,.1);

    border-radius:20px;

    overflow:hidden;

}



.evaluation-fill {

    width:55%;

    height:100%;

    background:
    linear-gradient(
    90deg,
    var(--cyan),
    var(--purple)
    );

}



.evaluation-score {

    margin-top:15px;

    font-size:30px;

    font-weight:700;

}



.chessboard-window {

    padding:25px;

    border-radius:35px;

}



.board-header {

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

}



.board-status {

    color:
    var(--green);

}



.chessboard {

    display:grid;

    grid-template-columns:
    repeat(8,1fr);

    aspect-ratio:1;

    border-radius:25px;

    overflow:hidden;

}


/* ===================================== */
/* PLATFORM CHESSBOARD */
/* ===================================== */


.chessboard > div {

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:
    clamp(20px,3vw,45px);

    cursor:pointer;

    transition:
    .2s ease;

}



.chessboard .light {

    background:
    rgba(255,255,255,.12);

}



.chessboard .dark {

    background:
    rgba(0,0,0,.35);

}



.chessboard > div:hover {

    background:
    rgba(34,211,238,.35);

    transform:
    scale(.95);

}



/* ===================================== */
/* BOARD CONTROLS */
/* ===================================== */


.board-controls {

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:25px;

}



.board-controls button {

    flex:1;

}



/* ===================================== */
/* SIDEBAR CARDS */
/* ===================================== */


.sidebar-card {

    padding:25px;

    border-radius:28px;

}



.sidebar-card h3 {

    margin-bottom:20px;

    font-family:
    "Space Grotesk";

}



.match-info {

    list-style:none;

}



.match-info li {

    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}



.match-info span {

    color:
    var(--muted);

}



.live-text {

    color:
    var(--green);

}



/* ===================================== */
/* CAPTURED PIECES */
/* ===================================== */


.captured-row {

    font-size:35px;

    letter-spacing:8px;

    margin:10px 0;

}



/* ===================================== */
/* QUICK STATS */
/* ===================================== */


.quick-stats {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:15px;

}



.quick-stats div {

    padding:18px;

    border-radius:18px;

    background:
    rgba(255,255,255,.05);

    text-align:center;

}



.quick-stats h2 {

    font-size:32px;

}



.quick-stats span {

    color:
    var(--muted);

}



/* ===================================== */
/* MOVE LIST */
/* ===================================== */


.move-list {

    display:flex;

    flex-direction:column;

    gap:10px;

}



.move-list div {

    padding:

    12px 15px;

    border-radius:14px;

    background:

    rgba(255,255,255,.05);

}



.move-list span {

    color:
    var(--cyan);

}



.active-move {

    border:

    1px solid var(--cyan);

    background:
    rgba(34,211,238,.12)!important;

}



/* ===================================== */
/* ENGINE ANALYSIS */
/* ===================================== */


.engine-line {

    display:flex;

    gap:15px;

    padding:15px;

    border-radius:18px;

    background:
    rgba(255,255,255,.05);

}



.engine-icon {

    font-size:35px;

}



.engine-line p {

    color:
    var(--muted);

    margin-top:5px;

}



.engine-options {

    margin-top:20px;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.option {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px;

    border-radius:15px;

    background:
    rgba(255,255,255,.05);

}



.option span {

    width:30px;

    height:30px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:
    rgba(255,255,255,.1);

}



.option em {

    color:
    var(--cyan);

}



.option.selected {

    border:

    1px solid var(--cyan);

}



/* ===================================== */
/* CODE WINDOWS */
/* ===================================== */


.code-window {

    padding:20px;

    border-radius:18px;

    background:

    rgba(0,0,0,.35);

    overflow:auto;

}



.code-window pre {

    color:
    #c4b5fd;

    font-family:
    monospace;

    line-height:1.7;

}



.data-box {

    margin-top:10px;

    padding:15px;

    border-radius:15px;

    background:

    rgba(0,0,0,.3);

    color:
    var(--cyan);

    font-family:
    monospace;

    word-break:break-all;

}



.sidebar-card label {

    display:block;

    margin-top:20px;

    color:
    var(--muted);

}



/* ===================================== */
/* CHAT */
/* ===================================== */


.chat p {

    margin-bottom:12px;

    color:
    var(--muted);

}



.chat strong {

    color:white;

}



.chat-input {

    margin-top:20px;

    padding:15px;

    border-radius:15px;

    background:

    rgba(255,255,255,.08);

    color:
    var(--muted);

}



/* ===================================== */
/* RECENT GAMES */
/* ===================================== */


.games-grid {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

}



.game-card {

    padding:25px;

    border-radius:25px;

    display:flex;

    align-items:center;

    gap:20px;

}



.game-icon {

    font-size:40px;

}



.game-card p {

    color:
    var(--muted);

    margin-top:5px;

}



.win {

    color:
    var(--green);

}



.loss {

    color:
    #ef4444;

}



/* ===================================== */
/* LEADERBOARD */
/* ===================================== */


.leaderboard {

    border-radius:30px;

    overflow:hidden;

}



.leader-row {

    display:grid;

    grid-template-columns:

    .4fr 1.5fr .7fr .7fr .8fr;

    padding:22px 30px;

    align-items:center;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}



.leader-row.header {

    color:
    var(--muted);

    background:

    rgba(255,255,255,.05);

}



.leader-row:hover {

    background:

    rgba(255,255,255,.05);

}



.player-name {

    font-weight:700;

}



.champion {

    background:

    rgba(250,204,21,.08);

}



.online {

    color:
    var(--green);

}



/* ===================================== */
/* PUZZLE */
/* ===================================== */


.puzzle-card {

    padding:45px;

    border-radius:35px;

    display:grid;

    grid-template-columns:

    1fr .8fr;

    gap:50px;

}



.puzzle-left p {

    color:
    var(--muted);

    margin:20px 0;

}



.puzzle-board {

    width:320px;

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    aspect-ratio:1;

    overflow:hidden;

    border-radius:20px;

}



.puzzle-board div {

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    background:

    rgba(255,255,255,.1);

}



.puzzle-board div:nth-child(even){

    background:

    rgba(0,0,0,.35);

}



.puzzle-right {

    display:flex;

    flex-direction:column;

    gap:20px;

}



.puzzle-info {

    padding:25px;

    border-radius:20px;

}



.puzzle-info h3 {

    color:
    var(--muted);

}



.puzzle-info strong {

    display:block;

    margin-top:10px;

    font-size:28px;

}


/* ===================================== */
/* FINAL POLISH */
/* ===================================== */


/* ===================================== */
/* SCROLL REVEAL */
/* ===================================== */


.hidden {

    opacity:0;

    transform:
    translateY(40px);

    transition:
    0.8s cubic-bezier(.2,.8,.2,1);

}



.visible {

    opacity:1;

    transform:
    translateY(0);

}




/* ===================================== */
/* QUOTE SECTION */
/* ===================================== */


.quote-box {

    padding:60px;

    border-radius:35px;

    text-align:center;

}



.quote-icon {

    font-size:70px;

    display:block;

    margin-bottom:20px;

}



.quote-box blockquote {

    font-size:
    clamp(25px,4vw,50px);

    font-family:
    "Space Grotesk";

}



.quote-box p {

    color:
    var(--muted);

    margin-top:25px;

}




/* ===================================== */
/* NEWS */
/* ===================================== */


.news-grid {

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:25px;

}



.news-card {

    padding:35px;

    border-radius:28px;

    transition:
    var(--transition);

}



.news-card:hover {

    transform:
    translateY(-10px);

}



.news-card span {

    color:
    var(--cyan);

    font-size:12px;

    letter-spacing:2px;

}



.news-card h3 {

    margin:
    20px 0;

    font-size:25px;

}



.news-card p {

    color:
    var(--muted);

    line-height:1.7;

}




/* ===================================== */
/* FINAL CTA */
/* ===================================== */


.final-card {

    padding:70px;

    text-align:center;

    border-radius:40px;

}



.final-card h2 {

    font-size:
    clamp(40px,5vw,70px);

    font-family:
    "Space Grotesk";

}



.final-card p {

    color:
    var(--muted);

    margin:
    25px auto 40px;

    max-width:600px;

    line-height:1.8;

}



.final-card a {

    margin:10px;

}




/* ===================================== */
/* FOOTER */
/* ===================================== */


footer {

    padding:
    50px 7%;

}



.footer-box {

    border-radius:35px;

    padding:40px;

    display:grid;

    grid-template-columns:
    1fr auto auto;

    align-items:center;

    gap:40px;

}



.footer-brand h2 {

    font-size:35px;

}



.footer-brand p {

    color:
    var(--muted);

    margin-top:10px;

}



.footer-links {

    display:flex;

    gap:25px;

}



.footer-links a {

    color:
    var(--muted);

}



.footer-links a:hover {

    color:white;

}



.footer-copy {

    color:
    var(--muted);

}




/* ===================================== */
/* PARTICLES */
/* ===================================== */


.particle {

    position:fixed;

    bottom:-20px;

    width:5px;

    height:5px;

    border-radius:50%;

    background:
    var(--cyan);

    opacity:.5;

    animation:
    particleRise linear forwards;

    pointer-events:none;

}



@keyframes particleRise {


from {

    transform:
    translateY(0)
    scale(1);

}


to {


    transform:
    translateY(-110vh)
    scale(0);

}


}





/* ===================================== */
/* RIPPLE EFFECT */
/* ===================================== */


.ripple {

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

    background:
    rgba(255,255,255,.4);

    transform:
    scale(0);

    animation:
    ripple .6s linear;

    pointer-events:none;

}



@keyframes ripple {


to {

    transform:
    scale(10);

    opacity:0;

}


}



button,
a {

    position:relative;

    overflow:hidden;

}




/* ===================================== */
/* EXTRA GLASS DETAILS */
/* ===================================== */


.glass::before {

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(
    120deg,
    rgba(255,255,255,.12),
    transparent 40%
    );

    opacity:.5;

    pointer-events:none;

}



.glass {

    position:relative;

    overflow:hidden;

}





/* ===================================== */
/* TABLET */
/* ===================================== */


@media(max-width:1100px){


.hero {

    grid-template-columns:
    1fr;

}



.hero-right {

    margin-top:40px;

}



.feature-grid {

    grid-template-columns:
    repeat(2,1fr);

}



.team-grid {

    grid-template-columns:
    repeat(2,1fr);

}



.live-stats {

    grid-template-columns:
    repeat(2,1fr);

}



.platform-layout {

    grid-template-columns:
    1fr;

}



.games-grid {

    grid-template-columns:
    1fr;

}



.about-window {

    grid-template-columns:
    1fr;

}



.footer-box {

    grid-template-columns:
    1fr;

}



}




/* ===================================== */
/* MOBILE */
/* ===================================== */


@media(max-width:700px){


header {

    padding:
    20px;

}



.glass-nav {

    padding:
    0 20px;

}



.nav-links,
.nav-buttons {

    display:none;

}



.hero {

    padding:
    40px 20px;

}



.hero h1 {

    font-size:
    48px;

}



.hero-buttons {

    flex-direction:
    column;

}



.hero-stats {

    display:grid;

    grid-template-columns:
    1fr;

}



section {

    padding:
    70px 20px;

}



.feature-grid {

    grid-template-columns:
    1fr;

}



.team-grid {

    grid-template-columns:
    1fr;

}



.live-stats {

    grid-template-columns:
    1fr;

}



.about-window {

    padding:30px;

}



.about-left h2 {

    font-size:50px;

}



.about-buttons {

    flex-direction:
    column;

}



.board-info {

    grid-template-columns:
    1fr;

}



.player-card {

    flex-wrap:wrap;

}



.puzzle-card {

    grid-template-columns:
    1fr;

    padding:30px;

}



.puzzle-board {

    width:100%;

}



.leader-row {

    grid-template-columns:
    1fr 2fr;

    gap:15px;

}



.leader-row span:nth-child(n+3){

    display:none;

}



.footer-box {

    padding:30px;

}



.footer-links {

    flex-direction:
    column;

}


}





/* ===================================== */
/* SPECIAL EFFECTS */
/* ===================================== */


.primary-button:hover {

    box-shadow:

    0 0 40px rgba(139,92,246,.7);

}



.glass-button:hover {

    box-shadow:

    0 0 35px rgba(34,211,238,.25);

}



.chessboard-window:hover {

    box-shadow:

    0 0 60px rgba(139,92,246,.2);

}




/* END OF DRYBLOB CSS */