:root{
  --bg:#262b38;
  --panel:#333b4f;
  --panel-2:#3d4560;
  --card:#f2ede1;
  --mustard:#f2b705;
  --teal:#3aafa9;
  --coral:#e8635a;
  --ink:#1f2430;
  --paper:#ece7da;
  --line:#4a5270;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:
    radial-gradient(circle at 20% 10%, #2e3547 0%, var(--bg) 55%);
  color:var(--paper);
  font-family:'Space Grotesk', system-ui, sans-serif;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:32px 18px;
}
.pixel{font-family:'Press Start 2P', monospace;}
#app{width:100%; max-width:1040px;}

/* ---------- CONFIG GATE ---------- */
.config-gate{
  display:none; position:fixed; inset:0; background:#171a22; color:#ece7da; z-index:200;
  align-items:center; justify-content:center; padding:24px;
}
.config-gate .box{max-width:520px; background:#262b38; border-radius:14px; padding:26px; border:1px solid #4a5270;}
.config-gate h2{margin-top:0; color:#f2b705;}
.config-gate code{background:#1d2230; padding:2px 6px; border-radius:4px; font-size:13px;}
.config-gate ol{padding-left:20px; line-height:1.7; font-size:14px;}
.config-gate a{color:#3aafa9;}

/* ---------- LANDING ---------- */
.landing-wrap{display:flex; flex-direction:column; align-items:center; gap:22px;}
.title{
  font-size:15px; line-height:1.8; text-align:center; color:var(--mustard);
  text-shadow:2px 2px 0 #00000055;
}
.subtitle{color:#b9c0d6; font-size:14px; text-align:center; max-width:480px; margin-top:-6px;}

.personal-note{
  background:#3a3524; border:1px dashed var(--mustard); border-radius:10px;
  padding:12px 16px; width:100%; max-width:460px; font-size:13px; font-style:italic;
  color:#e9d9a8; line-height:1.5; text-align:center;
}

.rules-box{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; width:100%; max-width:460px; font-size:13px; color:#d7dcea;
}
.rules-box b{color:var(--mustard); font-size:12px; letter-spacing:.02em;}
.rules-box ul{margin:8px 0 0; padding-left:18px; line-height:1.6;}
.rules-box li b{color:var(--paper);}
.rules-box-ingame{margin-top:12px; padding:10px 12px; font-size:11px;}
.rules-box-ingame ul{padding-left:14px;}
.badge{
  background:var(--card); color:var(--ink); border-radius:14px;
  width:100%; max-width:460px; padding:26px 26px 22px;
  box-shadow: 0 14px 0 #00000030, 0 14px 24px #00000040;
  position:relative;
}
.badge::before{
  content:"";
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:70px; height:16px; background:#8b93ac; border-radius:4px;
}
.badge::after{
  content:"";
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  width:5px; height:20px; background:#8b93ac;
}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:700; letter-spacing:.02em; margin-bottom:6px; color:#585f78;}
.field input{
  width:100%; padding:10px 12px; border-radius:8px; border:2px solid #d8d1bf;
  font-family:inherit; font-size:15px; background:#fffdf8; color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--teal);}
.row{display:flex; gap:10px;}
.row .field{flex:1;}
button{
  font-family:inherit; cursor:pointer; border:none; border-radius:9px;
  font-weight:700; letter-spacing:.01em;
}
.btn-primary{
  background:var(--teal); color:#0d2b29; padding:12px 16px; font-size:15px;
  box-shadow:0 4px 0 #217b76;
}
.btn-primary:active{transform:translateY(3px); box-shadow:none;}
.btn-ghost{
  background:#e3ddca; color:#585f78; padding:12px 14px; font-size:14px;
  box-shadow:0 4px 0 #c7bfa6;
}
.btn-ghost:active{transform:translateY(3px); box-shadow:none;}
.btn-ghost.active{background:var(--mustard); color:#4a3400; box-shadow:0 4px 0 #a37e00;}

.chicken-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 18px;}
.chicken-card{
  border:2px solid #d8d1bf; border-radius:10px; padding:10px; text-align:left; background:#fffdf8;
}
.chicken-card.selected{border-color:var(--teal); background:#e8f7f5;}
.chicken-card.taken{opacity:0.4; cursor:not-allowed; position:relative;}
.chicken-card.taken::after{
  content:"Taken"; position:absolute; top:6px; right:8px; font-size:9px; font-weight:700;
  color:#a34a4a; background:#f6d9d9; padding:1px 5px; border-radius:6px;
}
.chicken-card canvas{display:block; margin:0 auto 6px;}
.chicken-card b{font-size:13px; display:block;}
.chicken-card span{font-size:11px; color:#6a7188; line-height:1.4; display:block;}

.cta-full{width:100%; padding:14px; font-size:15px;}
.hint{font-size:11px; color:#8890a8; text-align:center; margin-top:10px;}
.error{color:var(--coral); font-size:12px; margin-top:6px; min-height:14px;}

/* ---------- GAME ---------- */
.game-wrap{display:none; flex-direction:column; gap:12px;}
.topbar{
  background:var(--panel); border-radius:12px; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.room-chip{
  background:var(--panel-2); padding:8px 12px; border-radius:8px; font-size:13px; cursor:pointer;
  border:1px dashed var(--line);
}
.clock{flex:1; min-width:220px;}
.clock-label{font-size:11px; color:#b9c0d6; display:flex; justify-content:space-between; margin-bottom:5px;}
.clock-bar{height:10px; background:#1d2230; border-radius:6px; overflow:hidden;}
.clock-fill{height:100%; background:linear-gradient(90deg, var(--teal), var(--mustard)); width:0%; transition:width .4s;}

.main{display:flex; gap:12px; align-items:flex-start;}
#stage{
  background:#5c6b4a; border-radius:12px; display:block; touch-action:none;
  box-shadow:inset 0 0 0 4px #45532f;
}
.sidebar{
  background:var(--panel); border-radius:12px; padding:12px; width:230px; flex-shrink:0;
  max-height:520px; overflow-y:auto;
}
.sidebar h3{margin:0 0 10px; font-size:12px; color:#b9c0d6; letter-spacing:.03em;}
.roster-item{
  background:var(--panel-2); border-radius:8px; padding:8px 10px; margin-bottom:8px; font-size:12px;
}
.roster-item .name{font-weight:700; display:flex; justify-content:space-between; align-items:center;}
.roster-item .status{font-size:10px; padding:1px 6px; border-radius:10px; background:#2f7c6a; color:#d3fff2;}
.roster-item .status.ko{background:#8a4a1f; color:#ffe2c2;}
.roster-item .status.out{background:#5a5a5a; color:#ddd;}
.roster-item .status.win{background:var(--mustard); color:#4a3400;}
.bar{height:6px; background:#1d2230; border-radius:4px; overflow:hidden; margin-top:4px;}
.bar > div{height:100%;}
.bar.health > div{background:#7fd858;}

.controls-bar{
  background:var(--panel); border-radius:12px; padding:10px 16px; font-size:12px; color:#b9c0d6;
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
}
.controls-bar b{color:var(--paper);}

.emoji-bar{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.emoji-btn{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  font-size:20px; padding:6px 10px; line-height:1; cursor:pointer;
}
.emoji-btn:active{transform:scale(0.92);}

.chat-panel{
  background:var(--panel); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px;
}
.chat-log{
  height:120px; overflow-y:auto; font-size:13px; display:flex; flex-direction:column; gap:4px; padding-right:4px;
}
.chat-log .msg{line-height:1.4;}
.chat-log .msg .who{font-weight:700; color:var(--mustard);}
.chat-log .msg.me .who{color:var(--teal);}
.chat-input-row{display:flex; gap:8px;}
.chat-input-row input{
  flex:1; padding:9px 12px; border-radius:8px; border:1px solid var(--line);
  background:#1d2230; color:var(--paper); font-family:inherit; font-size:13px;
}
.chat-input-row input:focus{outline:none; border-color:var(--teal);}
.chat-input-row button{padding:9px 14px; font-size:13px;}
.toast-zone{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; z-index:50;}
.toast{
  background:var(--panel-2); color:var(--paper); padding:8px 14px; border-radius:8px; font-size:13px;
  box-shadow:0 4px 12px #00000050; opacity:0; animation:toastIn .25s forwards, toastOut .3s 2.4s forwards;
}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
@keyframes toastOut{to{opacity:0;}}

.modal-bg{
  display:none; position:fixed; inset:0; background:#00000090; align-items:center; justify-content:center; z-index:80;
}
.modal{
  background:var(--card); color:var(--ink); border-radius:14px; padding:28px; max-width:340px; text-align:center;
}
.modal h2{margin-top:0; font-size:18px;}
.challenge-options{display:flex; flex-direction:column; gap:8px; margin:14px 0;}
.challenge-options button{width:100%; text-align:left;}
@media (max-width:640px){
  .main{flex-direction:column;}
  .sidebar{width:100%; max-height:180px;}
  #stage{width:100%; height:auto;}
}

@media (max-width:480px){
  body{padding:16px 10px;}
  .title{font-size:12px;}
  .topbar{padding:10px 12px;}
  .controls-bar{font-size:11px; gap:10px; padding:8px 12px;}
  .emoji-btn{font-size:16px; padding:5px 8px;}
  .chat-log{height:100px;}
  .rules-box, .personal-note, .badge{max-width:100%;}
}