body {
            background-color: #080d1a;
            color: #f8fafc;
            overflow-x: hidden;
        }

        /* Edler Schachbrett-Hintergrund-Effekt im Hero */
        .bg-chess-pattern {
            background-image: 
                radial-gradient(circle at 20% 25%, rgba(217, 119, 6, 0.14) 0%, transparent 45%),
                radial-gradient(circle at 80% 70%, rgba(30, 64, 175, 0.15) 0%, transparent 50%),
                linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
        }

        /* Schachbrett Styling */
        .chess-board-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: repeat(8, 1fr);
            aspect-ratio: 1 / 1;
            user-select: none;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 6px #27201c, 0 0 0 8px rgba(217, 119, 6, 0.4);
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .square-light {
            background-color: #ebdccb;
            color: #8c6239;
        }
        .square-dark {
            background-color: #9c6f44;
            color: #ebdccb;
        }

        /* Moderne Holz-Textur / Schattierung */
        .chess-square {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.15s ease;
            cursor: pointer;
        }

        .chess-square.selected {
            background-color: rgba(245, 158, 11, 0.72) !important;
        }

        .chess-square.last-move {
            background-color: rgba(250, 204, 21, 0.45) !important;
        }

        .chess-square.in-check {
            background: radial-gradient(circle, rgba(239,68,68,0.85) 0%, rgba(185,28,28,0.6) 70%, transparent 100%) !important;
        }

        /* Legal Move Indikatoren */
        .legal-dot {
            width: 28%;
            height: 28%;
            border-radius: 9999px;
            background-color: rgba(15, 23, 42, 0.35);
            pointer-events: none;
            transition: transform 0.15s ease;
        }
        .chess-square:hover .legal-dot {
            transform: scale(1.25);
            background-color: rgba(217, 119, 6, 0.75);
        }

        .legal-capture {
            position: absolute;
            inset: 6%;
            border-radius: 9999px;
            border: 4px solid rgba(217, 119, 6, 0.75);
            pointer-events: none;
        }

        /* Figuren-Animation & Schatten */
        .chess-piece {
            width: 82%;
            height: 82%;
            transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.45));
            z-index: 10;
        }
        .chess-square:hover .chess-piece {
            transform: translateY(-2px) scale(1.05);
        }

        /* Glassmorphism Cards */
        .glass-card {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .gold-gradient-text {
            background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #d97706 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Custom Scrollbar für Zugliste */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #0f172a;
        }
        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #f59e0b;
        }
    
p{hyphens:auto;text-align:justify}button,a,select{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}.chess-square{padding:0;border:0;border-radius:0;font:inherit;min-width:0}.chess-square:focus-visible{outline:3px solid #1d4ed8;outline-offset:-3px;z-index:12}.chess-piece{pointer-events:none}dialog{margin:auto;max-width:min(94vw,38rem);max-height:90vh;overflow:auto;background:#0f172a;color:#f8fafc;border:1px solid #b45309;border-radius:1.5rem;padding:1.5rem}dialog::backdrop{background:#080d1add;backdrop-filter:blur(4px)}dialog h2{font-weight:700;font-size:1.2rem;margin-bottom:1rem}dialog p{margin-bottom:1rem}dialog button{padding:.6rem .8rem;background:#1e293b;border:1px solid #64748b;border-radius:.6rem}dialog button[aria-pressed=true],#confirmMove{background:#f59e0b;color:#080d1a}.dialog-actions,#promotionChoices{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}[hidden]{display:none!important}button:disabled{opacity:.5;cursor:not-allowed}.rules-dialog>div{border:0;padding:0;background:transparent}#eroeffnungen .flex.items-center.justify-between{flex-wrap:wrap;gap:.5rem}#hero-board,#spielmodi,#eroeffnungen{scroll-margin-top:6rem}#toastNotification{max-width:calc(100vw - 2rem)}@media(max-width:380px){header .h-20{height:4.5rem}header .font-display{font-size:1.1rem}#hero-board .glass-card{padding:.75rem}.chess-board-grid{box-shadow:0 0 0 3px #27201c,0 0 0 4px #b45309}#eroeffnungen .p-5{padding:1rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}