/* Code 2 style for Mastermind - trochoidangian.com.vn */
*{box-sizing:border-box}
:root{
  --bg:#f2f6f8;
  --wood-1:#c79b69;
  --panel:#f6efe3;
  --accent:#8b4513;
  --muted:#444;
  --peg-size:40px;
  --palette-size:48px;
  --shadow: 0 12px 30px rgba(0,0,0,0.12);
}

html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:#222}
.screen{max-width:1100px;margin:20px auto;padding:0 12px}

.menu-box{max-width:420px;margin:40px auto;padding:18px;background:#fff;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.08);color:#222}
.menu-box h2{margin:0 0 12px 0;font-size:20px;color:#222}
.menu-box .option{margin:8px 0;font-size:15px}
.menu-box label{color:#333}

.game-frame{width:680px;max-width:95%;margin:18px auto;background:linear-gradient(180deg,var(--wood-1),#b8814f);padding:15px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;border:1px solid rgba(0,0,0,0.08);position:relative;overflow:hidden}
.game-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff}
.game-top .message{flex:1;text-align:center;font-weight:600;color:#fff}

.board-area{display:flex;gap:14px;align-items:flex-start;justify-content:center}
.board{display:flex;flex-direction:column;gap:7px;align-items:center;padding:8px;background:#fdfdfd;border-radius:10px;border:1px solid rgba(0,0,0,0.05)}

.row{display:flex;align-items:center;gap:8px;width:100%;justify-content:center}
.pegs{display:flex;gap:8px}
.peg{width:var(--peg-size);height:var(--peg-size);border-radius:50%;border:2px solid rgba(0,0,0,0.12);background:#fff;box-shadow:inset 0 -6px 10px rgba(0,0,0,0.04);cursor:pointer}

.feedback{display:grid;grid-template-columns:repeat(2, var(--small-peg,12px));gap:5px;margin-left:8px}
.feedback-dot{width:var(--small-peg,12px);height:var(--small-peg,12px);border-radius:50%;background:#ddd;border:1px solid rgba(0,0,0,0.08)}

.row-controls{margin-left:auto}
.check-btn{background:var(--accent);color:#fff;padding:6px 10px;border-radius:8px;border:none;cursor:pointer;font-weight:700;box-shadow:0 6px 12px rgba(0,0,0,0.12)}
.check-btn.disabled{opacity:0.6;cursor:not-allowed}

.bottom-panel{display:flex;align-items:center;justify-content:center;margin-top:6px}
.palette{display:grid;grid-template-columns:repeat(4, var(--palette-size));gap:8px;justify-content:center}
.color{width:var(--palette-size);height:var(--palette-size);border-radius:50%;border:3px solid rgba(0,0,0,0.12);box-shadow:inset 0 -8px 14px rgba(0,0,0,0.06);cursor:pointer;transition:transform .12s}
.color:hover{transform:translateY(-4px)}

.secret-row{margin-top:8px;display:flex;gap:10px;align-items:center;justify-content:center;color:#222}

.hidden{display:none !important}
.btn{padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
.btn.primary{background:#3b7d3b;color:#fff;font-weight:700}
.btn.small{background:#f7f7f7;color:#222;border:1px solid #ccc}

body.mode-8 .palette{transform:none;}
body.mode-8 .feedback{margin-left:8px}

@media (max-width:980px){
  .game-frame{width:92%}
  .row{min-width:320px}
  :root{--peg-size:36px;--palette-size:42px;--small-peg:10px}
}

@media (max-width:640px){
  .game-frame{padding:10px;border-radius:10px}
  :root{--peg-size:32px;--palette-size:38px;--small-peg:9px}
  .board-area{flex-direction:column;align-items:center}
  /* Bỏ min-width trên .row để nó co lại tự nhiên */
  .row{/* min-width:260px; */} 
  .palette{grid-template-columns:repeat(4,38px);gap:6px}
}

/* Tối ưu cho Mobile (max-width: 500px) */
@media (max-width: 500px) {
  :root {
    --peg-size: 26px; 
    --palette-size: 32px; 
    --small-peg: 8px; 
  }
  .check-btn {
    padding: 4px 8px; 
    font-size: 13px;
    min-width: 50px;
  }
}

/* Tối ưu cho Mobile Siêu Nhỏ (max-width: 400px) - Aggressive sizing */
@media (max-width: 400px) {
  :root {
    --peg-size: 24px; 
    --palette-size: 28px; 
    --small-peg: 6px;
  }
  .check-btn {
    padding: 3px 5px; 
    font-size: 11px; 
    min-width: 45px;
  }
  .feedback {
    grid-template-columns: repeat(2, var(--small-peg, 6px));
    gap: 2px;
    margin-left: 4px;
  }
  .pegs {
    gap: 4px; 
  }
  .row {
      gap: 4px; 
  }
  .row-controls {
      margin-left: 2px; 
  }
}