:root{
  --bg:#0f1115;
  --panel:#161a22;
  --panel2:#1d2230;
  --text:#e8eaf0;
  --muted:#9aa3b2;
  --accent:#6ae3ff;
  --danger:#ff5b6e;
  --ok:#7dff8c;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --r: 18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(106,227,255,0.18), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(125,255,140,0.10), transparent 60%),
              var(--bg);
  color: var(--text);
}
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 18px;
  background: rgba(15,17,21,0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.brand{font-weight:700; letter-spacing:0.2px}
.muted{color:var(--muted)}
.small{font-size:12px}
.badge{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
}
.main{max-width: 1200px; margin: 0 auto; padding: 18px;}
.screen h1{margin: 8px 0 14px 0; font-size: 28px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 12px 0;
}
.lbl{display:block; margin: 10px 0 6px 0; color: var(--muted); font-size: 13px}
.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
.input:focus{border-color: rgba(106,227,255,0.45); box-shadow: 0 0 0 3px rgba(106,227,255,0.12)}
.btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
}
.btn:hover{background: rgba(255,255,255,0.10)}
.btn:disabled{opacity:0.5; cursor:not-allowed}
.btn.primary{background: rgba(106,227,255,0.16); border-color: rgba(106,227,255,0.35)}
.btn.primary:hover{background: rgba(106,227,255,0.22)}
.btn.danger{background: rgba(255,91,110,0.16); border-color: rgba(255,91,110,0.35)}
.btn.danger:hover{background: rgba(255,91,110,0.22)}
.row{display:flex; align-items:center}
.row.between{justify-content:space-between}
.row.gap{gap:10px}
.topPad{margin-top:10px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
@media(max-width: 1000px){ .grid2{grid-template-columns:1fr} }
.hint{margin-top:10px; color:var(--muted); font-size: 13px}
.hidden{display:none !important}

.lobbyBtns{display:flex; gap:8px; flex-wrap:wrap}
.lobbyBtns button{min-width:56px}

.players{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.playerRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}
.playerRow .left{display:flex; flex-direction:column}
.playerRow .name{font-weight:600}
.playerRow .meta{color:var(--muted); font-size:12px}
.tag{font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12)}
.tag.master{border-color: rgba(106,227,255,0.45); color: var(--accent)}
.tag.ok{border-color: rgba(125,255,140,0.35); color: var(--ok)}

.sep{border: none; border-top: 1px solid rgba(255,255,255,0.10); margin: 14px 0}
.formRow{margin-top:10px}

.statusbar{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
}

.board{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
@media(max-width: 1000px){
  .board{grid-template-columns: 1fr}
}
.leftStack,.rightStack{display:flex; flex-direction:column; gap: 12px}

.stack{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 12px;
}
.stack.compact{width: 100%}
.stackTitle{font-weight:600; margin-bottom:8px}
.stackCard{width: 120px; height: 168px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,0.10)}
.stackCard img{width:100%; height:100%; object-fit:cover; display:block}
.stackCount{margin-top:8px; color:var(--muted)}

.centerField{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 12px;
}
.fieldTitle{font-weight:700; margin-bottom:10px}
.fieldSlots{display:grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px}
@media(max-width: 520px){
  .fieldSlots{grid-template-columns: repeat(2, minmax(120px, 1fr));}
}
.slot{
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 18px;
  min-height: 170px;
  padding: 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.slot.selected{outline: 3px solid rgba(106,227,255,0.25); border-style: solid}
.slotNum{position:absolute; top:10px; left:10px; color:var(--muted); font-size: 12px}
.cardImg{width: 120px; height: 168px; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,0.10)}
.cardImg img{width:100%; height:100%; object-fit:cover; display:block}

.hand{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cardBtn{
  position: relative;
  width: 120px;
  user-select: none;
  cursor: pointer;
}
.cardBtn.selected{outline: 3px solid rgba(106,227,255,0.25); border-radius: 18px}
.cardBtn .cardImg{width:120px; height:168px}
.nameOnce{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
  opacity: 0.92;
  text-align:center;
}
.fadeOut{animation: fade 4s forwards}
@keyframes fade{ 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

.log{
  max-height: 220px;
  overflow:auto;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.logLine{color: var(--muted); font-size: 13px}
.logLine b{color: var(--text)}

.preview{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.preview img{
  width: 48px;
  height: 67px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
}

.toast{
  position: fixed;
  top: 70px;
  right: 16px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 99;
}