*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      background:var(--bg-deep);color:var(--text-body);
      font-family:'Crimson Pro',Georgia,serif;font-size:16px;line-height:1.5;min-height:100vh;
      background-image:radial-gradient(ellipse at 20% 0%,var(--border) 0%,transparent 60%),
                       radial-gradient(ellipse at 80% 100%,var(--border) 0%,transparent 60%);
      transition: background-color 0.4s ease, color 0.4s ease;
    }
    
    header{text-align:center;padding:24px 16px 16px;border-bottom:1px solid var(--border);transition: border-color 0.4s ease;}
    header::after{content:'';display:block;width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:10px auto 0;transition: background 0.4s ease;}
    .site-title{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,5vw,2.2rem);color:var(--cream);font-weight:700;transition: color 0.4s ease;}
    .site-title span{color:var(--gold);transition: color 0.4s ease;}
    .site-title a{text-decoration:none;color:inherit}
    .site-subtitle{font-size:0.85rem;color:var(--text-muted);font-style:italic;margin-top:4px;transition: color 0.4s ease;}

    main{max-width:1100px;margin:0 auto;padding:24px 12px 40px;display:flex;flex-direction:column;gap:20px;align-items:center}
    .board-column{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:500px}

    #board{border:3px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow),0 0 0 1px var(--gold-dim);display:block;width:100%;max-width:500px;height:auto;margin:0 auto;touch-action:none;-ms-touch-action:none;user-select:none;-webkit-user-select:none;transition: border-color 0.4s ease, box-shadow 0.4s ease;}
    .piece-417db,.square-55d63{touch-action:none;-ms-touch-action:none}
    .board-hint{font-size:0.8rem;color:var(--text-muted);font-style:italic;text-align:center;max-width:480px;line-height:1.4;margin:4px 0;transition: color 0.4s ease;}

    /* --- BOARD SQUARES --- */
    body.theme-green .white-1e1d7 { background-color: #ebecd0; color: #739552; }
    body.theme-green .black-3c85d { background-color: #739552; color: #ebecd0; }
    body.theme-blue .white-1e1d7 { background-color: #dee3e6; color: #8ca2ad; }
    body.theme-blue .black-3c85d { background-color: #8ca2ad; color: #dee3e6; }
    body.theme-slate .white-1e1d7 { background-color: #cccccc; color: #888888; }
    body.theme-slate .black-3c85d { background-color: #888888; color: #cccccc; }
    body.theme-purple .white-1e1d7 { background-color: #dfd0e8; color: #7e5796; }
    body.theme-purple .black-3c85d { background-color: #7e5796; color: #dfd0e8; }

    .btn-group{display:flex;gap:8px;flex-direction:column;width:100%;max-width:500px}
    .btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);padding:14px 20px;
      font-family:'Playfair Display',serif;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:all .2s ease;text-decoration:none;text-align:center;font-size:1.05rem;
      background:var(--gold-dim);color:var(--cream);border:1px solid var(--gold);box-shadow:0 3px 12px rgba(0,0,0,.3)}
    .btn-primary:hover{transform:translateY(-2px);background:var(--gold);color:var(--bg-deep);box-shadow:0 5px 18px rgba(0,0,0,.5)}
    .btn-secondary{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);padding:14px 20px;
      font-family:'Playfair Display',serif;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:all .2s ease;text-decoration:none;text-align:center;font-size:1.05rem;
      background:var(--bg-panel);color:var(--text-body);border:1px solid var(--border);box-shadow:0 3px 12px rgba(0,0,0,.3)}
    .btn-secondary:hover{transform:translateY(-2px);background:var(--bg-card);color:var(--cream);box-shadow:0 5px 18px rgba(0,0,0,.5)}

    .side-panel{width:100%;max-width:500px;display:flex;flex-direction:column;gap:14px}
    .panel-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px;transition: all 0.4s ease;}
    .panel-card h2{font-family:'Playfair Display',serif;font-size:0.8rem;font-weight:600;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);transition: color 0.4s ease, border-color 0.4s ease;}

    .turn-toggle{display:flex;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;width:100%;transition: all 0.4s ease;}
    .turn-toggle input[type="radio"]{display:none}
    .turn-toggle label{flex:1;text-align:center;padding:8px;font-size:0.85rem;color:var(--text-muted);cursor:pointer;transition:all .2s ease}
    .turn-toggle input[type="radio"]:checked+label{background:var(--gold-dim);color:var(--cream);font-weight:600}

    .toggle-group{display:flex;flex-direction:column;gap:10px}
    .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
    .toggle-label{font-size:0.85rem;color:var(--text-body);flex:1;transition: color 0.4s ease;}
    .tri-toggle{display:flex;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition: all 0.4s ease;}
    .tri-toggle input[type="radio"]{display:none}
    .tri-toggle label{padding:4px 10px;font-size:0.75rem;color:var(--text-muted);cursor:pointer;transition:all .2s ease}
    .tri-toggle label:not(:last-child){border-right:1px solid var(--border)}
    .tri-toggle input[type="radio"]:checked+label{background:var(--gold-dim);color:var(--cream)}

    .select-wrapper{position:relative}
    .select-wrapper::after{content:'▾';position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--gold);pointer-events:none;transition: color 0.4s ease;}
    select.theme-select, select.elo-select{width:100%;padding:10px 30px 10px 12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);
      color:var(--cream);font-family:'Crimson Pro',serif;font-size:0.95rem;appearance:none;cursor:pointer;transition: all 0.4s ease;}
    select.theme-select:focus, select.elo-select:focus{outline:none;border-color:var(--gold)}
    select.theme-select option, select.elo-select option{background:var(--bg-card);color:var(--cream)}

    .fen-label{font-size:0.7rem;color:var(--gold-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;transition: color 0.4s ease;}
    .fen-display{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px;font-family:'Courier New',monospace;
      font-size:0.7rem;color:var(--text-muted);word-break:break-all;line-height:1.4;transition: all 0.4s ease;}

    footer{text-align:center;padding:20px;border-top:1px solid var(--border);font-size:0.8rem;color:var(--text-muted);line-height:1.6;transition: all 0.4s ease;}
    footer a{color:var(--gold);text-decoration:none;transition: color 0.4s ease;}
    footer a:hover{color:var(--gold-light)}

    #loading-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:16px}
    #loading-overlay.active{display:flex}
    .spinner{width:45px;height:45px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    .loading-text{font-family:'Playfair Display',serif;color:var(--cream);font-size:1.1rem;letter-spacing:.04em}

    @media (min-width:768px) {
      main{flex-direction:row;align-items:flex-start;justify-content:center;}
      .board-column{width:auto;max-width:520px}
      #board{width:520px;max-width:520px}
      .btn-group{max-width:520px}
      .side-panel{width:280px;max-width:280px}
    }