/* =========================================
   PLAYGROUND - IMMERSIVE PORTAL DESIGN
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
    --chess-bg: #0d0d0d;
    --chess-accent: #c5a059;
    --block-bg: #0a0a1a;
    --block-accent: #00f0ff;
    --map-bg: #0f1a14;
    --map-accent: #4ade80;
}

/* =========================================
   GLOBAL LAYOUT
   ========================================= */
html,
body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Hide scrollbar but allow scroll */
body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.playground-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* =========================================
   PORTAL SECTIONS
   ========================================= */
.game-portal {
    height: 100vh;
    width: 100vw;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portal-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Remove full width/height so it wraps content only */
    /* width: 100%; height: 100%; */
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* =========================================
   PORTAL BACKGROUNDS (Layered)
   ========================================= */
.portal-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    inset: 0;
    transition: transform 0.8s ease-out, opacity 0.5s ease;
}

/* --- CHESS: 3D Board Scene --- */
.chess-portal {
    background: linear-gradient(160deg, #0a0805 0%, #1a1510 50%, #0d0a08 100%);
}

.chess-portal .layer-1 {
    background-image:
        conic-gradient(rgba(40, 30, 20, 0.3) 90deg,
            rgba(20, 15, 10, 0.3) 90deg 180deg,
            rgba(40, 30, 20, 0.3) 180deg 270deg,
            rgba(20, 15, 10, 0.3) 270deg);
    background-size: 60px 60px;
    opacity: 0.5;
}

.chess-portal .layer-2 {
    background:
        radial-gradient(ellipse at 50% 60%, rgba(197, 160, 89, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 30% 30%, rgba(197, 160, 89, 0.12) 0%, transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(255, 220, 150, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 15% 75%, rgba(139, 90, 43, 0.1) 0%, transparent 20%);
}

.chess-portal .portal-title {
    -webkit-text-stroke: 5px #3d2817;
    paint-order: stroke fill;
    text-shadow:
        2px 2px 0 #5c3d1e,
        3px 3px 0 #4a3118,
        4px 4px 0 #3d2817,
        5px 5px 0 #2f1e10,
        6px 6px 0 #241708,
        8px 10px 15px rgba(0, 0, 0, 0.9);
}

/* === 3D CHESS SCENE === */
.chess-scene {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(1200px) rotateX(50deg) rotateZ(-5deg);
    width: 650px;
    height: 650px;
    transform-style: preserve-3d;
}

@keyframes boardWobble {

    0%,
    100% {
        transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    25% {
        transform: translate(-50%, -50%) perspective(1500px) rotateX(-3deg) rotateY(2deg) rotateZ(0deg);
    }

    50% {
        transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateY(-2deg) rotateZ(1deg);
    }

    75% {
        transform: translate(-50%, -50%) perspective(1500px) rotateX(3deg) rotateY(0deg) rotateZ(-1deg);
    }
}

.chessboard {
    position: relative;
    width: 100%;
    height: 100%;
    /* Dark Wood Frame */
    border: 15px solid #2d1b0e;
    box-sizing: border-box;
    /* Richer Checkerboard with "Grain" */
    background:
        /* Grain overlay */
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 2px, transparent 2px, transparent 4px),
        /* Checkerboard pattern */
        conic-gradient(#e8cfa4 90deg, #8f5e36 90deg 180deg, #e8cfa4 180deg 270deg, #8f5e36 270deg);
    background-size: 25% 25%;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

/* Chess Pieces */
.chess-piece {
    position: absolute;
    width: 200px;
    height: 200px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
    pointer-events: none;
    transition: filter 0.3s ease, transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, left 1.2s cubic-bezier(0.4, 0, 0.2, 1), top 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, left, top;
    transform-origin: bottom center;
    transform: translate(-50%, -90%) rotateX(-35deg) scale(0.275);
    z-index: 10;
    image-rendering: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Checkmate square indicator */
.checkmate-square-glow {
    position: absolute;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.3) 15%, rgba(255, 0, 0, 0.1) 30%, rgba(255, 0, 0, 0.03) 50%, rgba(255, 0, 0, 0) 80%);
    pointer-events: none;
    z-index: 5;
    animation: checkmate-square-pulse 1.5s ease-in-out infinite;
    border-radius: 40%;
    transform: translate(-50%, -50%);
}

@keyframes checkmate-square-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.9;
    }
}

.chess-piece.moving {
    z-index: 100;
}

.chess-piece.captured {
    opacity: 0;
    transform: translate(-50%, -60%) rotateX(-35deg) scale(0);
    pointer-events: none;
}

.chess-scene {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(1500px) rotateX(0deg) rotateZ(0deg);
    width: 617px;
    height: 617px;
    transform-style: preserve-3d;
    animation: boardWobble 12s ease-in-out infinite;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.chessboard {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    /* Critical: Ensure board doesn't trigger hover */
}

.chess-portal:hover .chessboard {
    transform: scale(1.1);
}

/* Hover Interaction: Title Hide handled in specific block below */

.portal-content {
    transition: opacity 0.4s ease, transform 0.6s ease;
}

/* 3D Slab Thickness (Rear/Bottom Effects) */
.chessboard::before {
    content: '';
    position: absolute;
    top: 100%;
    /* Below the board */
    left: -15px;
    /* Cover the border too */
    right: -15px;
    height: 30px;
    /* Thicker slab */
    background: linear-gradient(to bottom, #2d1b0e, #1a0f08);
    transform-origin: top;
    transform: rotateX(-90deg);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle highlight edge */
    border-top: none;
}

/* Note: Side faces are omitted to prevent alignment issues during rotation */

/* Make pieces stand upright (Billboard Effect) */


@keyframes boardFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) perspective(2000px) rotateX(30deg) rotateZ(0deg) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) perspective(2000px) rotateX(32deg) rotateZ(0deg) translateY(-10px);
    }
}

/* Pawns are smaller */


/* Column classes */
.sq-a1,
.sq-a2,
.sq-a3,
.sq-a4,
.sq-a5,
.sq-a6,
.sq-a7,
.sq-a8 {
    left: 6.25%;
}

.sq-b1,
.sq-b2,
.sq-b3,
.sq-b4,
.sq-b5,
.sq-b6,
.sq-b7,
.sq-b8 {
    left: 18.75%;
}

.sq-c1,
.sq-c2,
.sq-c3,
.sq-c4,
.sq-c5,
.sq-c6,
.sq-c7,
.sq-c8 {
    left: 31.25%;
}

.sq-d1,
.sq-d2,
.sq-d3,
.sq-d4,
.sq-d5,
.sq-d6,
.sq-d7,
.sq-d8 {
    left: 43.75%;
}

.sq-e1,
.sq-e2,
.sq-e3,
.sq-e4,
.sq-e5,
.sq-e6,
.sq-e7,
.sq-e8 {
    left: 56.25%;
}

.sq-f1,
.sq-f2,
.sq-f3,
.sq-f4,
.sq-f5,
.sq-f6,
.sq-f7,
.sq-f8 {
    left: 68.75%;
}

.sq-g1,
.sq-g2,
.sq-g3,
.sq-g4,
.sq-g5,
.sq-g6,
.sq-g7,
.sq-g8 {
    left: 81.25%;
}

.sq-h1,
.sq-h2,
.sq-h3,
.sq-h4,
.sq-h5,
.sq-h6,
.sq-h7,
.sq-h8 {
    left: 93.75%;
}

/* Row classes */
.sq-a8,
.sq-b8,
.sq-c8,
.sq-d8,
.sq-e8,
.sq-f8,
.sq-g8,
.sq-h8 {
    top: 6.25%;
}

.sq-a7,
.sq-b7,
.sq-c7,
.sq-d7,
.sq-e7,
.sq-f7,
.sq-g7,
.sq-h7 {
    top: 18.75%;
}

.sq-a6,
.sq-b6,
.sq-c6,
.sq-d6,
.sq-e6,
.sq-f6,
.sq-g6,
.sq-h6 {
    top: 31.25%;
}

.sq-a5,
.sq-b5,
.sq-c5,
.sq-d5,
.sq-e5,
.sq-f5,
.sq-g5,
.sq-h5 {
    top: 43.75%;
}

.sq-a4,
.sq-b4,
.sq-c4,
.sq-d4,
.sq-e4,
.sq-f4,
.sq-g4,
.sq-h4 {
    top: 56.25%;
}

.sq-a3,
.sq-b3,
.sq-c3,
.sq-d3,
.sq-e3,
.sq-f3,
.sq-g3,
.sq-h3 {
    top: 68.75%;
}

.sq-a2,
.sq-b2,
.sq-c2,
.sq-d2,
.sq-e2,
.sq-f2,
.sq-g2,
.sq-h2 {
    top: 81.25%;
}

.sq-a1,
.sq-b1,
.sq-c1,
.sq-d1,
.sq-e1,
.sq-f1,
.sq-g1,
.sq-h1 {
    top: 93.75%;
}

@keyframes pieceGlow {

    0%,
    100% {
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
    }

    50% {
        filter: drop-shadow(0 6px 20px rgba(197, 160, 89, 0.8)) drop-shadow(0 0 15px rgba(255, 200, 100, 0.4));
    }
}

@keyframes pieceSlide {

    0%,
    45%,
    100% {
        transform: translate(0, 0);
    }

    50%,
    95% {
        transform: translate(60px, -60px);
    }
}

@keyframes pieceFloat {

    0%,
    100% {
        transform: translateZ(10px);
    }

    50% {
        transform: translateZ(20px);
    }
}

/* --- BLOCK BLAST: Synthwave Neon Grid --- */
.block-portal {
    background: var(--block-bg);
}

.block-portal .layer-1 {
    /* Neon Grid */
    background:
        linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridScroll 20s linear infinite;
}

.block-portal .layer-2 {
    /* Gradient Glow */
    background:
        radial-gradient(ellipse at 50% 120%, rgba(138, 43, 226, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 50% -20%, rgba(0, 240, 255, 0.3) 0%, transparent 50%);
}

.block-portal:hover .layer-1 {
    animation-play-state: paused;
    opacity: 0.8;
    transform: scale(1.03);
}

/* === FLOATING 3D CUBES === */
.floating-cubes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    perspective: 1000px;
}

.cube {
    position: absolute;
    width: 60px;
    height: 60px;
    --half-size: 30px;
    transform-style: preserve-3d;
    animation: cubeFloat 10s ease-in-out infinite;
}

/* All 6 faces */
.cube .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(138, 43, 226, 0.3));
    border: 2px solid rgba(0, 240, 255, 0.8);
    box-shadow:
        0 0 15px rgba(0, 240, 255, 0.6),
        inset 0 0 10px rgba(0, 240, 255, 0.2);
}

.cube .front {
    transform: translateZ(var(--half-size));
}

.cube .back {
    transform: rotateY(180deg) translateZ(var(--half-size));
}

.cube .left {
    transform: rotateY(-90deg) translateZ(var(--half-size));
}

.cube .right {
    transform: rotateY(90deg) translateZ(var(--half-size));
}

.cube .top {
    transform: rotateX(90deg) translateZ(var(--half-size));
}

.cube .bottom {
    transform: rotateX(-90deg) translateZ(var(--half-size));
}

.cube-1 {
    top: 15%;
    left: 12%;
    width: 70px;
    height: 70px;
    --half-size: 35px;
    animation-delay: 0s;
}

.cube-2 {
    top: 25%;
    right: 25%;
    width: 55px;
    height: 55px;
    --half-size: 27px;
    animation-delay: -3s;
}

.cube-2 .face {
    border-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
}

.cube-3 {
    bottom: 20%;
    left: 18%;
    width: 50px;
    height: 50px;
    --half-size: 25px;
    animation-delay: -6s;
}

.cube-3 .face {
    border-color: rgba(255, 100, 200, 0.7);
    box-shadow: 0 0 15px rgba(255, 100, 200, 0.5);
}

.cube-4 {
    bottom: 20%;
    right: 8%;
    width: 60px;
    height: 60px;
    animation-delay: -4s;
}

.cube-4 .face {
    border-color: rgba(50, 255, 150, 0.7);
    box-shadow: 0 0 15px rgba(50, 255, 150, 0.5);
}

.cube-5 {
    top: 80%;
    right: 40%;
    width: 45px;
    height: 45px;
    --half-size: 22px;
    animation-delay: -7s;
}

@keyframes cubeFloat {

    0%,
    100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: translateY(-20px) rotateX(10deg) rotateY(15deg);
    }

    50% {
        transform: translateY(-10px) rotateX(-5deg) rotateY(-10deg);
    }

    75% {
        transform: translateY(-25px) rotateX(8deg) rotateY(-15deg);
    }
}

@keyframes cubeSpin {
    from {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg);
    }
}

/* --- MAP PLOTTER: Dark Neon Map Theme --- */
.map-portal {
    background: linear-gradient(160deg, #050a0a 0%, #0a1515 50%, #051010 100%);
}

.map-portal .layer-1 {
    /* Neon Grid */
    background-image:
        /* Main grid */
        linear-gradient(rgba(20, 184, 166, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 184, 166, 0.15) 1px, transparent 1px),
        /* Finer grid */
        linear-gradient(rgba(20, 184, 166, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 184, 166, 0.05) 1px, transparent 1px),
        /* Center glow */
        radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.2) 0%, transparent 40%);
    background-size: 100px 100px, 100px 100px, 25px 25px, 25px 25px, 100% 100%;
}

.map-portal .layer-2 {
    /* Neon vignette */
    background:
        radial-gradient(ellipse at 30% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
}

.map-portal:hover .layer-1 {
    transform: scale(1.05);
    filter: brightness(1.3);
}

/* === COMPASS ROSE === */
.compass-rose {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: 550px;
    pointer-events: none;
}

/* Outer decorative ring */
.compass-rose::before {
    content: '';
    position: absolute;
    inset: -20px;
    border: 3px solid rgba(20, 184, 166, 0.2);
    border-radius: 50%;
    animation: compassSpin 120s linear infinite reverse;
}

.compass-ring {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(255, 200, 100, 0.4);
    border-radius: 50%;
    animation: compassSpin 60s linear infinite;
}

/* Inner ring */
.compass-ring::before {
    content: '';
    position: absolute;
    inset: 40px;
    border: 2px solid rgba(255, 200, 100, 0.25);
    border-radius: 50%;
}

/* Cardinal tick marks (N, S, E, W) */
/* Place all at top center, then rotate around the ring center.
   Ring is 550x550. Center is 275, 275. 
   Border is 3px thick (inset). Center of border is at 1.5px.
   Tick height 24px. To center tick on border center (1.5px), 
   Tick top should be 1.5px - 12px = -10.5px.
   Pivot distance from top: 275px - (-10.5px) = 285.5px.
*/
.compass-tick {
    position: absolute;
    width: 4px;
    height: 24px;
    background: rgba(255, 200, 100, 0.6);
    left: 50%;
    top: -10.5px;
    transform-origin: 50% 285.5px;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(255, 200, 100, 0.4);
}

.compass-tick.E {
    transform: translateX(-50%) rotate(90deg);
}

.compass-tick.S {
    transform: translateX(-50%) rotate(180deg);
}

.compass-tick.W {
    transform: translateX(-50%) rotate(270deg);
}

.compass-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 180px;
    transform-origin: center bottom;
    transform: translateX(-50%) translateY(-100%);
    background: linear-gradient(to top, transparent 0%, #ff6b6b 20%, #ff4757 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation: needleWobble 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 75, 75, 0.8));
}

.compass-needle::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 8px;
    height: 140px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent 0%, #4a9fff 20%, #2d7dd2 100%);
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    filter: drop-shadow(0 0 15px rgba(45, 125, 210, 0.8));
}

.compass-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, #fff 0%, #ffd700 40%, #ff8c00 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(255, 200, 0, 1),
        0 0 40px rgba(255, 200, 0, 0.8),
        0 0 80px rgba(255, 150, 0, 0.5);
    animation: centerPulse 2s ease-in-out infinite;
}

/* Center inner dot */
.compass-center::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
}

/* Map Plotter: Title with gradient transparency to show compass */
.map-portal .portal-title {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* === FLIGHT PATHS === */
.flight-path {
    position: absolute;
    width: 200%;
    height: 200%;
    border: 2px dashed transparent;
    border-radius: 50%;
    opacity: 0;
    animation: flightArc 8s ease-in-out infinite;
}

.path-1 {
    top: -50%;
    left: -50%;
    border-top-color: rgba(0, 255, 200, 0.4);
    animation-delay: 0s;
}

.path-2 {
    top: -30%;
    left: -70%;
    border-right-color: rgba(255, 150, 50, 0.3);
    animation-delay: 2.5s;
}

.path-3 {
    top: -60%;
    left: -30%;
    border-bottom-color: rgba(150, 100, 255, 0.3);
    animation-delay: 5s;
}

@keyframes compassSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes needleWobble {

    0%,
    100% {
        transform: translateX(-50%) translateY(-100%) rotate(-5deg);
    }

    50% {
        transform: translateX(-50%) translateY(-100%) rotate(5deg);
    }
}

@keyframes centerPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 30px rgba(255, 200, 0, 0.8);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 50px rgba(255, 200, 0, 1), 0 0 80px rgba(255, 150, 0, 0.6);
    }
}

@keyframes flightArc {
    0% {
        opacity: 0;
        transform: rotate(-30deg) scale(0.5);
    }

    20% {
        opacity: 0.6;
    }

    80% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: rotate(30deg) scale(1.2);
    }
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes pulseGlow {
    from {
        opacity: 0.5;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes gridScroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 60px;
    }
}

/* =========================================
   PORTAL CONTENT (Title, Tag, Hint)
   ========================================= */
.portal-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 2rem;
}

.portal-tag {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 0.5rem 1.5rem;
    border: 1px solid currentColor;
    border-radius: 50px;
    opacity: 0.6;
    margin-bottom: 1.5rem;
    transition: opacity 0.3s, transform 0.3s;
}

.portal-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(5rem, 18vw, 14rem);
    font-weight: 400;
    margin: 0;
    line-height: 0.9;
    letter-spacing: 0.05em;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.5s ease;
}

/* Accent Colors for Titles */
.chess-portal .portal-title {
    color: #fff;
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.2) 70%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 60px rgba(197, 160, 89, 0.3);
}

.block-portal .portal-title {
    color: #fff;
    text-shadow: 0 0 80px rgba(0, 240, 255, 0.4), 0 0 120px rgba(138, 43, 226, 0.3);
}

.map-portal .portal-title {
    color: #fff;
    text-shadow: 0 0 60px rgba(74, 222, 128, 0.3);
}

.portal-hint {
    font-size: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    margin-top: 2rem;
    letter-spacing: 2px;
}

.chess-portal .portal-hint {
    text-shadow:
        0 0 5px #3d2817,
        0 0 10px #3d2817,
        0 0 15px #3d2817,
        0 2px 6px #3d2817,
        0 4px 12px #3d2817,
        2px 2px 8px #3d2817,
        -2px 2px 8px #3d2817;
}

/* =========================================
   HOVER STATES - Interaction Logic
   ========================================= */

/* Fix: Disable interaction on the container to prevent accidental triggering */
.chess-portal {
    pointer-events: none;
}

/* Enable interaction only on the title content */
.chess-portal .portal-content {
    pointer-events: auto;
}

/* Ensure the link wrapper does not capture events */
.chess-portal .portal-link {
    pointer-events: none;
}

.portal-content:hover .portal-tag {
    opacity: 1;
    transform: translateY(-5px);
}

.portal-title:hover {
    transform: scale(1.03);
    cursor: pointer;
}

/* On Title Hover: Hide the title/tag and reveal the board, but KEEP hint visible */
.chess-portal .portal-content:hover .portal-title,
.chess-portal .portal-content:hover .portal-tag {
    opacity: 0;
}

.chess-portal .portal-content:hover {
    transform: scale(1.1);
}

.portal-content:hover .portal-hint {
    opacity: 0.7;
    transform: translateY(0);
}

/* =========================================
   SCROLL INDICATOR
   ========================================= */
.scroll-indicator {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.3s ease;
}

.scroll-indicator.hidden {
    opacity: 0;
}

.scroll-indicator span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    animation: scrollDown 1.2s ease-in-out infinite;
}

@keyframes scrollDown {
    0% {
        transform: rotate(45deg) translateY(-4px) translateX(-4px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(45deg) translateY(8px) translateX(8px);
        opacity: 0;
    }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .portal-title {
        font-size: clamp(3rem, 20vw, 6rem);
    }

    .portal-tag {
        font-size: 0.65rem;
        padding: 0.4rem 1rem;
    }
}

/* --- COUNTRIES QUIZ: Global Theme --- */
.quiz-portal {
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
}

.quiz-portal .layer-1 {
    /* Globe Grid / Dots */
    background-image: radial-gradient(#38bdf8 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.2;
}

.quiz-portal .layer-2 {
    /* Atmos glow */
    background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
}

#quiz-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    pointer-events: none;
}

.quiz-portal .portal-title {
    color: #fff;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.2) 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.3));
}

.quiz-portal:hover .layer-1 {
    transform: scale(1.05) rotate(2deg);
    transition: transform 10s ease-out;
}

/* Ensure hover works on the specific portal link for title/hint */
.portal-link:hover .portal-title {
    transform: scale(1.03);
}

.portal-link:hover .portal-hint {
    opacity: 0.7;
    transform: translateY(0);
}