/* ── Mobil zoom engelle ── */
        * { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
        .main-content {
            min-height: 100vh;
            padding: clamp(20px, 4vw, 40px) 12px 48px;
            background: #ffffff;
        }
        [data-theme="dark"] .main-content {
            background: linear-gradient(180deg, rgba(8, 12, 20, 0.96), rgba(4, 7, 13, 0.92));
        }

        .racing-container {
            max-width: 1240px;
            margin: 0 auto;
        }

        .racing-card {
            background: #ffffff;
            border-radius: 36px;
            padding: clamp(18px, 2.5vw, 28px);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            border: 1px solid rgba(148, 163, 184, 0.22);
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            grid-template-areas:
                "hero side"
                "board side"
                "controls side";
            gap: 16px;
            overflow: hidden;
            position: relative;
        }
        [data-theme="dark"] .racing-card {
            background:
                linear-gradient(155deg, rgba(10, 17, 32, 0.98), rgba(6, 11, 23, 0.99) 55%, rgba(11, 20, 38, 0.98)),
                #111827;
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
            border-color: rgba(0,170,255,.28);
        }
        .racing-card::before {
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at top left, rgba(0,170,255,.12), transparent 24%),
                radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 22%);
            pointer-events:none;
        }
        .racing-card::after {
            content:"";
            position:absolute;
            inset:14px;
            border-radius:28px;
            border:1px solid rgba(15, 23, 42, 0.04);
            pointer-events:none;
        }
        .hero-top { grid-area: hero; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
        .board-column { grid-area: board; position:relative; z-index:1; }
        .control-column { grid-area: controls; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
        .side-column { grid-area: side; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
        .info-card {
            background: linear-gradient(180deg, rgba(9, 23, 39, 0.94), rgba(7, 19, 31, 0.84));
            border: 1px solid rgba(0,170,255,.14);
            border-radius: 22px;
            padding: 16px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .info-card h3 {
            margin:0 0 12px;
            font-size:.74rem;
            text-transform:uppercase;
            letter-spacing:.18em;
            color:#72daff;
        }
        .meta-grid {
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:10px;
        }
        .meta-chip {
            background: rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.04);
            border-radius:16px;
            padding:12px;
        }
        .meta-chip span {
            display:block;
            font-size:.62rem;
            text-transform:uppercase;
            letter-spacing:.15em;
            color:#7ec6ea;
            margin-bottom:5px;
        }
        .meta-chip strong {
            display:block;
            font-size:1rem;
            color:#eef9ff;
        }
        .tips-list {
            display:flex;
            flex-direction:column;
            gap:8px;
            text-align:left;
        }
        .tip-item {
            padding:10px 12px;
            border-radius:14px;
            background: rgba(255,255,255,.035);
            border: 1px solid rgba(255,255,255,.04);
            color:#caedff;
            font-size:.86rem;
        }

        .game-title {
            font-weight: 800;
            font-size: clamp(1.45rem, 4.2vw, 2.7rem);
            letter-spacing: .4px;
            background: linear-gradient(145deg, #0f5fd0, #00a7d8 48%, #f97316);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            line-height: 1.1;
            text-shadow: 0 1px 0 rgba(255,255,255,.14);
        }
        [data-theme="dark"] .game-title {
            background: linear-gradient(145deg, #f8fdff, #7bd7ff 48%, #ffd27a);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: none;
        }
        .hero-sub {
            text-align:center;
            margin:0;
            color:#7db9d8;
            letter-spacing:.18em;
            text-transform:uppercase;
            font-size:.9rem;
        }

        .hud-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(180deg, rgba(0,30,50,.92), rgba(0,22,36,.92));
            border: 1px solid rgba(0,170,255,.22);
            border-radius: 60px;
            padding: 12px 18px;
            flex-wrap: wrap;
            gap: 6px;
            box-shadow: 0 14px 24px rgba(0,0,0,.2);
        }
        .hud-row .hud-item {
            font-size: clamp(0.8rem, 3vw, 1rem);
            color: #7fd4ff;
            font-weight: 600;
            white-space: nowrap;
        }
        .hud-row .hud-val {
            font-size: clamp(1rem, 4vw, 1.4rem);
            font-weight: 800;
            color: #fff;
            text-shadow: 0 0 12px #00aaff;
            margin-left: 4px;
        }

        #comboBanner {
            text-align: center;
            font-size: clamp(0.9rem, 3.5vw, 1.2rem);
            font-weight: 700;
            color: #ffe74c;
            text-shadow: 0 0 16px #ffbf00;
            min-height: 1.4em;
            transition: opacity 0.4s;
        }

        /* Canvas kapsayıcı — yüksekliği viewport'a göre dinamik */
        #gameContainer {
            position: relative;
            width: 100%;
            max-width: 580px;
            height: min(580px, 62vw, 64vh);
            margin: 0 auto;
            border: 2px solid rgba(0,170,255,.72);
            border-radius: 28px;
            box-shadow: 0 0 26px rgba(0,170,255,.24);
            background: #111;
            overflow: hidden;
        }

        #gameCanvas {
            display: block;
            width: 100%;
            height: 100%;
            touch-action: none;
        }

        #gameOver, #pauseMenu {
            position: absolute; top:0; left:0;
            width:100%; height:100%;
            background: rgba(0,0,0,0.82);
            display:none; flex-direction:column;
            justify-content:center; align-items:center;
            z-index:100; color:white;
            border-radius:16px; gap:10px;
        }
        #gameOver h2, #pauseMenu h2 {
            font-size: clamp(1.3rem, 5vw, 1.8rem); margin:0;
        }
        #gameOver p { font-size: clamp(1rem,4vw,1.2rem); margin:4px; }
        #gameOver button, #pauseMenu button {
            font-size: clamp(0.9rem,3vw,1rem);
            padding: 10px 22px; border-radius:30px; border:none;
            background: linear-gradient(135deg,#00aaff,#0066cc);
            color:white; cursor:pointer;
            box-shadow:0 0 15px #00aaff80;
            transition: transform 0.15s;
            user-select:none;
        }
        #gameOver button:active, #pauseMenu button:active { transform:scale(0.95); }

        /* Kontrol alanı */
        #controls {
            width:100%; max-width:580px; margin:0 auto;
            padding: 14px;
            background: rgba(10,20,40,0.9);
            border: 1px solid rgba(0,170,255,.18);
            border-radius: 22px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 8px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }

        #startBtn, #pauseBtn {
            font-size: clamp(0.85rem,3vw,1rem);
            padding: 10px 16px; border-radius:30px; border:none;
            background: linear-gradient(135deg,#00aaff,#0066cc);
            color:white; cursor:pointer;
            box-shadow: 0 0 14px #00aaff80;
            transition: transform 0.1s;
            flex: 1 1 auto; min-width:90px;
            user-select:none;
        }
        #startBtn:active, #pauseBtn:active { transform:scale(0.96); }

        .speed-wrap {
            display:flex; align-items:center; gap:10px;
            flex: 1 1 100%; justify-content:center;
        }
        .speed-wrap label {
            color:#00aaff; font-weight:600; font-size:clamp(0.8rem,3vw,0.95rem); white-space:nowrap;
        }
        #speedSlider {
            flex:1; min-width:120px; max-width:200px;
            height:8px; appearance:none; -webkit-appearance:none;
            background: linear-gradient(90deg,#004477,#00aaff);
            border-radius:20px; touch-action:none;
        }
        #speedSlider::-webkit-slider-thumb {
            -webkit-appearance:none; width:22px; height:22px;
            background:#fff; border-radius:50%;
            box-shadow:0 0 0 3px #00aaff, 0 4px 10px black;
            cursor:pointer;
        }
        #speedDisp {
            color:#00aaff; font-weight:700; font-size:0.95rem;
            min-width:24px; text-align:center;
        }

        /* D-Pad */
        #directionPad {
            display: grid;
            grid-template-columns: repeat(3, clamp(52px,14vw,68px));
            grid-template-rows: repeat(2, clamp(52px,14vw,68px));
            justify-content: center;
            gap: 8px;
            grid-template-areas: ". up ." "left down right";
            width:100%;
        }
        .dir-btn {
            background: linear-gradient(145deg,#0077bb,#004488);
            border: none;
            border-radius: 16px;
            box-shadow: 0 5px 0 #00224d, 0 8px 18px rgba(0,0,0,0.4);
            color: white;
            font-size: clamp(1.2rem,4.5vw,1.8rem);
            display: flex; align-items:center; justify-content:center;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            transition: 0.08s linear;
            touch-action: none;
        }
        .dir-btn:active, .dir-btn.pressed {
            transform: translateY(4px);
            box-shadow: 0 1px 0 #00224d, 0 5px 14px rgba(0,0,0,0.3);
            background: linear-gradient(145deg,#009eee,#0066aa);
        }
        #btn-up    { grid-area: up; }
        #btn-left  { grid-area: left; }
        #btn-down  { grid-area: down; }
        #btn-right { grid-area: right; }
        .board-shell {
            background: linear-gradient(180deg, rgba(8, 22, 38, 0.88), rgba(8, 22, 38, 0.72));
            border: 1px solid rgba(0,170,255,.16);
            border-radius: 30px;
            padding: 16px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .mobile-note {
            margin-top:10px;
            text-align:center;
            color:#7bb4d2;
            text-transform:uppercase;
            letter-spacing:.12em;
            font-size:.72rem;
        }
        @media (max-width: 920px) {
            .racing-card {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "hero"
                    "board"
                    "controls"
                    "side";
            }
            #controls {
                padding: 16px;
            }
        }
        @media (max-width: 560px) {
            .main-content { padding: 16px 8px 28px; }
            .racing-card { padding: 14px; border-radius: 24px; }
            .meta-grid { grid-template-columns: 1fr; }
            .board-shell { padding: 12px; border-radius: 22px; }
            #gameContainer { max-width: 94vw; height: min(72vh, 70vw, 520px); }
            .hud-row {
                justify-content: center;
                border-radius: 24px;
            }
            #startBtn, #pauseBtn {
                min-height: 48px;
            }
        }