@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Crimson+Pro:wght@400;600&display=swap');
:root { --gold:#D4AF37; --cream:#FFF8E7; --brown:#8B5E3C; --dark:#1a0a00; }
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  background:#1a0a00;
  background-image:radial-gradient(ellipse at 30% 20%,#3d1a00,#1a0a00 60%);
  min-height:100vh; font-family:'Crimson Pro',serif;
  display:flex; flex-direction:column; align-items:center; overflow-x:hidden;
}
h1{
  font-family:'Playfair Display',serif; color:var(--gold);
  font-size:2.2rem; margin:14px 0 2px;
  text-shadow:0 0 30px rgba(212,175,55,.4); letter-spacing:4px; text-align:center;
}
.subtitle{ color:#a0784a; font-size:.85rem; letter-spacing:6px; margin-bottom:14px; text-transform:uppercase; }

/* MODE SCREEN */
#modeScreen{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:30px; }
.mode-btn{
  background:linear-gradient(135deg,#8B5E3C,#5C3A1E);
  border:2px solid var(--gold); color:var(--gold);
  font-family:'Playfair Display',serif; font-size:1.15rem;
  padding:16px 48px; border-radius:4px; cursor:pointer;
  letter-spacing:2px; transition:all .2s; min-width:260px; text-align:center;
}
.mode-btn:hover{ background:linear-gradient(135deg,#a06930,#7a4a28); transform:translateY(-2px); }
.mode-btn span{ display:block; font-size:.76rem; color:#c8a060; margin-top:3px; font-family:'Crimson Pro',serif; }

/* GAME SCREEN */
#gameScreen{ display:none; width:100%; flex-direction:column; align-items:center; }
.scoreboard{ display:flex; justify-content:center; gap:20px; margin-bottom:8px; width:100%; max-width:540px; }
.player-card{
  background:linear-gradient(135deg,#3d1a00,#2a1000);
  border:1.5px solid #7a4a28; border-radius:6px;
  padding:8px 20px; text-align:center; flex:1; transition:all .3s;
}
.player-card.active{ border-color:var(--gold); box-shadow:0 0 18px rgba(212,175,55,.25); }
.pname{ font-family:'Playfair Display',serif; color:var(--gold); font-size:.9rem; letter-spacing:2px; }
.pscore{ font-size:2rem; font-weight:700; color:var(--cream); line-height:1.1; }
.pturn{ font-size:.7rem; color:#a0784a; letter-spacing:2px; min-height:14px; }
.status-bar{ color:var(--gold); font-family:'Playfair Display',serif; font-size:.95rem; letter-spacing:1px; margin-bottom:8px; text-align:center; min-height:24px; }
.board-wrapper{
  background:linear-gradient(145deg,#8B5E3C,#5C3A1E 60%,#8B5E3C);
  border-radius:14px; padding:16px;
  box-shadow:0 0 0 7px #3d1a00,0 0 0 12px #5C3A1E,0 20px 60px rgba(0,0,0,.8);
}
canvas{ display:block; border-radius:5px; }

/* CONTROL PANEL */
#ctrlPanel{
  margin-top:12px; width:100%; max-width:540px;
  background:linear-gradient(135deg,#2a1200,#1a0a00);
  border:1.5px solid #5a3a18; border-radius:10px; padding:12px 16px;
}
.ctrl-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ctrl-row:last-child{ margin-bottom:0; }
.ctrl-label{ color:#a0784a; font-size:.8rem; min-width:52px; }
.ctrl-row input[type=range]{
  flex:1; -webkit-appearance:none; height:8px; border-radius:4px; outline:none; cursor:pointer;
}
.ctrl-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px;
  border-radius:50%; background:var(--gold); cursor:pointer;
  box-shadow:0 0 5px rgba(0,0,0,.5);
}
.ctrl-row input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--gold); cursor:pointer; border:none;
}
.cbtn{
  background:#2a1000; border:1.5px solid #7a4a28; color:var(--gold);
  border-radius:5px; cursor:pointer; font-size:.85rem; padding:6px 12px;
  transition:background .2s; white-space:nowrap;
}
.cbtn:hover{ background:#3d1a00; }
.cbtn.shoot{
  background:linear-gradient(135deg,#8B5E3C,#5C3A1E);
  border-color:var(--gold); font-family:'Playfair Display',serif;
  font-size:.95rem; padding:8px 20px; letter-spacing:1px;
}
.cbtn.shoot:hover{ background:linear-gradient(135deg,#a06930,#7a4a28); }
.legend-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid #3a1a00; }
.leg{ display:flex; align-items:center; gap:5px; color:#b08040; font-size:.76rem; }
.dot{ width:11px; height:11px; border-radius:50%; }
.win-target{ color:#7a5a2a; font-size:.76rem; margin-left:auto; }

/* WIN SCREEN */
#winScreen{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.85);
  z-index:100; align-items:center; justify-content:center;
}
.win-box{
  background:linear-gradient(145deg,#3d1a00,#1a0a00);
  border:2px solid var(--gold); border-radius:12px;
  padding:36px 50px; text-align:center;
  box-shadow:0 0 60px rgba(212,175,55,.3);
}
.win-box h2{ font-family:'Playfair Display',serif; color:var(--gold); font-size:2.1rem; margin-bottom:10px; }
.win-box p{ color:var(--cream); font-size:1.1rem; margin-bottom:18px; }