/* Mini Board for Shop Selection */.mini-board {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            background-color: #f8f9fa;
            background-image: 
                linear-gradient(to right, transparent 49.8%, #d0d0d0 49.8%, #d0d0d0 50.2%, transparent 50.2%),
                linear-gradient(to bottom, transparent 49.8%, #d0d0d0 49.8%, #d0d0d0 50.2%, transparent 50.2%);
            border: 3px solid #bdc3c7;
            border-radius: 8px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            touch-action: none;
            margin: 15px 0;
        }

        .mini-board .lines-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .mini-board .lines-layer line {
            stroke: #7f8c8d;
            stroke-width: 2;
            stroke-linecap: round;
        }
        
        .mini-board .node {
            position: absolute;
            width: 24px;
            height: 24px;
            background-color: white;
            border: 2px solid #34495e;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            font-weight: bold;
            color: #2c3e50;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .shop-draggable {
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f39c12, #e67e22);
            border: 2px solid #d35400;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: grab;
            z-index: 10;
            transform: translate(-50%, -50%);
            transition: transform 0.1s, box-shadow 0.1s;
            box-shadow: 0 3px 6px rgba(0,0,0,0.4);
        }
        
        .shop-draggable.dragging {
            cursor: grabbing;
            transform: translate(-50%, -50%) scale(1.3);
            z-index: 100;
            box-shadow: 0 8px 16px rgba(0,0,0,0.5);
        }

/* ===== GAME BOARD ===== */#game-board {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            background-color: #f8f9fa;
            background-image: 
                linear-gradient(to right, transparent 49.8%, #d0d0d0 49.8%, #d0d0d0 50.2%, transparent 50.2%),
                linear-gradient(to bottom, transparent 49.8%, #d0d0d0 49.8%, #d0d0d0 50.2%, transparent 50.2%);
            border: 3px solid #bdc3c7;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            overflow: hidden;
            touch-action: none;
        }

        #lines-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        #lines-layer line {
            stroke: #7f8c8d;
            stroke-width: 2.5;
            stroke-linecap: round;
        }

        .node {
            position: absolute;
            width: 32px;
            height: 32px;
            background-color: white;
            border: 2px solid #34495e;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-weight: bold;
            color: #2c3e50;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .node.shop {
            background: linear-gradient(135deg, #f39c12, #e67e22);
            color: white;
            border-color: #d35400;
        }

        .token {
            position: absolute;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            cursor: grab;
            z-index: 10;
            box-shadow: 0 3px 6px rgba(0,0,0,0.4);
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .token.dragging {
            cursor: grabbing;
            transform: translate(-50%, -50%) scale(1.25);
            z-index: 100;
        }

        .token.player-red { background: var(--color-red); border: 2px solid var(--color-red-dark); }
        .token.player-blue { background: var(--color-blue); border: 2px solid var(--color-blue-dark); }
        .token.player-green { background: var(--color-green); border: 2px solid var(--color-green-dark); }
        .token.player-yellow { background: var(--color-yellow); border: 2px solid var(--color-yellow-dark); }