:root{
--light: #f0d9b5; --dark: #b58863; --accent: #2b6cb0; --bg:#222; --good: #2ecc71; --bad:#ff4d4d;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter, Arial, Helvetica, sans-serif;background:#151516;color:#eee}
header{background:var(--accent);padding:12px 18px}
header h1{margin:0;font-size:20px}
.app{display:flex;gap:12px;padding:18px;align-items:flex-start}
.sidebar{min-width: 320px; max-width: 340px; width: 100%;background:var(--bg);border-radius:10px;padding:12px}
.sidebar h2{font-size:16px;margin-bottom:8px}
.openings-list{max-height:360px;overflow:auto;margin-bottom:10px; min-width: 280px; max-width: 300px; width: 100%;}
.tree-item{display:block;width:100%;text-align:left;margin:6px 0;padding:10px;background:#1b1b1b;color:#fff;border:1px solid #333;border-radius:8px;cursor:pointer;transition:background 0.2s}
.tree-item:hover{background:#262626}
.tree-item.active{background:linear-gradient(90deg,var(--accent),#1c8bd1)}
.tree-label{display:flex;align-items:center;gap:6px;user-select:none}
.tree-arrow{display:inline-block;transition:transform .18s}
.tree-children{display:none;margin-left:12px;margin-top:6px}
.tree-item.expanded>.tree-children{display:block}
.tree-item.expanded>.tree-label>.tree-arrow{transform:rotate(90deg)}
.controls{display:flex;gap:6px;margin-bottom:10px}
.control-btn{flex:1;padding:8px;border-radius:8px;border:none;cursor:pointer;background:linear-gradient(180deg,#2b2b2b,#1a1a1a);color:#fff;font-weight:bold;box-shadow:0 2px 4px rgba(0,0,0,0.4);transition:transform 0.1s, background 0.2s}
.control-btn:hover{background:linear-gradient(180deg,#3c3c3c,#2b2b2b);transform:translateY(-1px)}
.control-btn:active{transform:translateY(1px)}
.nav-btn{flex:unset;padding:8px 12px;border-radius:50%;background:linear-gradient(180deg,#444,#222);box-shadow:0 2px 4px rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;color:#fff}
.nav-btn:hover{background:linear-gradient(180deg,#555,#333)}
.toggle{display:inline-block;padding:8px 10px;border-radius:8px;cursor:pointer;background:#2b2b2b;color:#fff;font-weight:bold}
.info{font-size:13px;color:#ddd}
.board-wrap{display:flex;gap:12px;align-items:flex-start}
#board{width:min(62vw,560px);aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,0.6)}
.square{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;position:relative}
.square.light{background:var(--light)}
.square.dark{background:var(--dark)}
.square.highlight{outline:4px solid rgba(255,255,0,0.25)}
.square.lastmove{box-shadow:inset 0 0 0 4px rgba(0,0,0,0.12)}
.square.correct{outline:5px solid rgba(46,204,113,0.9)}
.square.incorrect{outline:5px solid rgba(255,77,77,0.95)}
#board{ position: relative; }
#promotionOverlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:9999; }
#promotionOverlay .promotion-box { background:#1e1e1e; border:1px solid #3a3a3a; border-radius:12px; padding:12px; display:flex; gap:8px; box-shadow:0 10px 30px rgba(0,0,0,.4); }
#promotionOverlay .promotion-box button { font-size:28px; padding:10px 14px; border-radius:10px; border:1px solid #444; background:#2b2b2b; cursor:pointer; min-width:56px; }

.coord-file, .coord-rank {
position: absolute;
pointer-events: none;
font-size: clamp(10px, 1.6vw, 14px);
color: rgba(90,60,30,0.75);
text-shadow: none;
z-index: 2;
font-weight: 500;
letter-spacing: 0.5px;
}
.coord-file { left: 0; right: 0; display: grid; grid-template-columns: repeat(8, 1fr); text-align: center; padding: 2px 6px; }
.coord-file.bottom { bottom: 0; transform: translateY(2px); }
.coord-file.top { top: 0; transform: translateY(-2px); }
.coord-rank { top: 0; bottom: 0; display: grid; grid-template-rows: repeat(8, 1fr); align-items: center; }
.coord-rank.left { left: 0; padding-left: 6px; }
.coord-rank.right { right: 0; padding-right: 6px; text-align: right; }
@media (max-width: 480px) { .coord-file, .coord-rank { font-size: 10px; } }
.piece{width:85%;height:85%;background:none;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,5vw,46px);font-weight:bold}
.piece.w{color:#fff;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000}
.piece.b{color:#000;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff}
.rightpanel{width:300px;background:var(--bg);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.movelist{max-height:200px;overflow:auto;font-size:14px;background:#151515;padding:8px;border-radius:6px}
.movelist ol{margin:0;padding-left:20px}
.tips-box{background:#1b1b1b;border-radius:8px;padding:8px;font-size:13px;color:#ccc;flex:1;overflow:auto}
.status-line{margin-top:10px;color:#ddd}
.msg{font-weight:700}
.end-msg{color:var(--good);font-weight:700;margin-top:8px}
footer{padding:12px;text-align:center;color:#bbb}
.openings-list{max-width: 100%; width: 100%;}
@media (max-width:1100px){
.app{flex-direction:column;align-items:center}.sidebar,.rightpanel{width:95%}
}
@media (max-width: 768px) {
.app {flex-direction: column;padding: 8px}
.sidebar,.rightpanel {width: 100%;max-width: 100%}
.board-wrap {flex-direction: column;align-items: center;gap: 16px;width: 100%}
#board {width: 100%;max-width: 95vw;aspect-ratio: 1 / 1}
.piece {font-size: clamp(18px, 12vw, 42px)}
.movelist {max-height: 150px;font-size: 12px}
.tips-box {font-size: 12px;max-height: 200px}
}
.openings-list{max-width: 100%; width: 100%;}
:root{--max-width:1100px;--content-pad:16px}
html,body{height:100%;margin:0;padding:0;font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.container{max-width:var(--max-width);margin:0 auto;padding:var(--content-pad);}
img,svg,canvas{max-width:100%;height:auto;display:block}
@media (max-width:720px){
  .sidebar {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    order: 2; /* aparece depois do tabuleiro */
  }
  .openings-list{max-width: 100%; width: 100%;}

}