* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }

        body {
            padding: 20px;
            background-color: #1FB7F2;
            text-align: center;
        }

        h1 { margin-bottom: 20px; color: #333; }

        .controls { margin-bottom: 20px; display:flex; justify-content:center; gap:12px; align-items:center; }

        .controls select, .controls button {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: white;
        }

        .game-board {
            display: grid;
            gap: 10px;
            margin: 0 auto;
            max-width: 900px;
            position: relative; /* for overlays */
        }

        @media (max-width: 768px) and (orientation: portrait) {
            .game-board {
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(6, 100px);
            }
        }

        @media (max-width: 768px) and (orientation: landscape), (min-width: 769px) {
            .game-board {
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(3, 100px);
            }
        }

        .card {
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.3s, border 0.2s, opacity 0.25s;
            overflow: hidden;
            border: 2px solid transparent;
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #4CAF50;
            perspective: 1000px;
        }

        .card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            display: block;
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            backface-visibility: hidden;
            border-radius: 8px;
            transition: transform 0.5s;
            -webkit-backface-visibility: hidden;
            padding: 6px;
            box-sizing: border-box;
            text-align: center;
        }

        .card-front {
            background-color: transparent;
            transform: rotateY(0deg);
            z-index: 2;
        }

        .card-back {
            background-color: white;
            transform: rotateY(180deg);
            z-index: 1;
            font-size: 18px;
            color: #222;
        }

        .part-name {
            width: 100%;
            padding: 6px;
            font-weight: 700;
            color: #0b2540;
            background: rgba(0,0,0,0.03);
            border-radius: 6px;
            margin-bottom: 6px;
            font-size: clamp(12px, 2.5vw, 18px);
        }

        .part-desc {
            font-size: clamp(12px, 2.5vw, 16px);
            color: #222;
            padding: 6px;
        }

        .card.flipped .card-front { transform: rotateY(180deg); }
        .card.flipped .card-back  { transform: rotateY(0deg); }

        .card.matched { cursor: default; pointer-events: none; }

        .card.correct { border-color: #2E7D32; box-shadow: 0 0 8px rgba(46,125,50,0.4); }
        .card.wrong   { border-color: #d32f2f;  box-shadow: 0 0 8px rgba(211,47,47,0.4); }

        /* Dim non-selected cards when overlays active */
        .card.dimmed { opacity: 0.25; transform: scale(0.98); pointer-events: none; }

        /* Overlay enlarged card visuals */
        .overlay-card {
            position: absolute;
            z-index: 2000;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            background: rgba(255,255,255,0.98);
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            transition: transform 0.3s ease, opacity 0.3s ease;
            overflow: hidden;
            pointer-events: none;
        }

        /* Landscape: left / right halves */
        .overlay-card.half-left  { left: 0; top: 0; width: 50%; height: 100%; transform-origin: left center; }
        .overlay-card.half-right { left: 50%; top: 0; width: 50%; height: 100%; transform-origin: right center; }

        /* Portrait: top / bottom halves */
        .overlay-card.half-top    { left: 0; top: 0; width: 100%; height: 50%; transform-origin: center top; }
        .overlay-card.half-bottom { left: 0; top: 50%; width: 100%; height: 50%; transform-origin: center bottom; }

        .overlay-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            font-size: clamp(32px, 6vw, 90px);
            font-weight: 700;
            color: #111;
            padding: 18px;
            box-sizing: border-box;
            text-align: center;
        }

        .overlay-content .part-name {
            font-size: clamp(18px, 3.5vw, 26px);
            margin-bottom: 12px;
            background: transparent;
            color: #0b2540;
        }

        .overlay-content img {
            max-width: 90%;
            max-height: 70%;
            object-fit: contain;
            border-radius: 8px;
        }

        .overlay-content .part-desc {
            font-size: clamp(14px, 2.5vw, 20px);
            font-weight: 600;
            color: #222;
            max-width: 92%;
        }

        .overlay-card.visible { transform: scale(1.02); opacity: 1; }

        @media (max-width: 420px) {
            .overlay-content { padding: 10px; }
        }