:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --card:#111f38;
  --text:#e8eefc;
  --muted:#a7b4d3;
  --border:#243454;
  --primary:#60a5fa;
  --success:#22c55e;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  background: linear-gradient(180deg, var(--bg), #070b14);
  color:var(--text);
}

.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background: rgba(15,26,46,.9);
  position: sticky;
  top:0;
  backdrop-filter: blur(10px);
}

.brand{font-weight:900; letter-spacing:.3px}
.brandLink{color:var(--text); text-decoration:none;}
.container{padding:16px; margin: 0 auto;}
.row{display:flex; gap:10px}
.spacer{flex:1}

.card{
  background: rgba(17,31,56,1);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

.stack{display:flex; flex-direction:column; gap:10px}

input, textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b162b;
  color:var(--text);
}

textarea{min-height:70px; resize: vertical;}

.btn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b162b;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  transition: all 0.2s ease;
}

.btn:hover{
  background:#132038;
  border-color: rgba(96,165,250,.4);
}

.btn.primary{
  border-color: rgba(96,165,250,.8);
  background: rgba(96,165,250,.15);
  color:white;
}

.btn.primary:hover{
  background: rgba(96,165,250,.25);
  border-color: rgba(96,165,250,1);
}

/* Success button (green) - for Approve button */
.btn.success{
  border-color: rgba(34,197,94,.8);
  background: rgba(34,197,94,.15);
  color:white;
}

.btn.success:hover{
  background: rgba(34,197,94,.25);
  border-color: rgba(34,197,94,1);
}

/* Gamemaster button styles */
.btn.gm{
  border-color: rgba(250,204,21,.6);
  background: rgba(250,204,21,.10);
}
.btn.gm.gm-on{
  border-color: rgba(34,197,94,.85);
  background: rgba(34,197,94,.18);
}

/* Danger button for deletions */
.btn.danger{
  border-color: rgba(239,68,68,.85);
  background: rgba(239,68,68,.14);
}

.btn.danger:hover{
  background: rgba(239,68,68,.25);
  border-color: rgba(239,68,68,1);
}

.alert{padding:10px;border:1px solid #b91c1c;background: rgba(185,28,28,.2); border-radius:10px;}
.muted{color:var(--muted); font-size: 0.92rem}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
}
.pill.active{border-color: var(--primary);}
.pill.small{padding:4px 8px; font-size:.85rem}

.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;}

.board{
  display:flex;
  gap:0px;
  margin-top:14px;
  padding: 0px;
  margin-left: -16px;
  padding-right: -16px;
  align-items: stretch;
}

.pool{
  flex-shrink: 0;
  min-width: 0px;
  max-width: 360px;
  width: 360px;
  transition: width 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  margin-right: 37px;
}

/* Pool mini column (collapsed) */
.poolMini{
  flex-shrink: 0;
  border:1px solid var(--border);
  border-radius:14px;
  margin-right: 7px;
  margin-left: -37px;
  background: rgba(15,26,46,.35);
  overflow:hidden;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease, opacity 0.3s ease;
}
.poolMiniHeader{
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 1;
}

.poolMiniButton{
  width: 100%;
  height: 100%;
  border:0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 36px 0px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.poolMiniButton:hover{
  background: rgba(96,165,250,.08);
}

.poolHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:8px;
  flex-shrink: 0;
}

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  flex: 1;
  overflow-y: auto;
}
.ticket{
  border:1px dashed rgba(167,180,211,.35);
  border-radius: 14px;
  padding: 12px;
  background: rgba(17,31,56,.4);
}

.ticketTitle{font-weight:900}
.ticketMeta{color:var(--muted); font-size:.9rem}

.poolTemplate{ cursor: grab; }
.poolTemplate:active{ cursor: grabbing; }

.kanban{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.columns{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:7px;
  flex: 1;
}

.column{
  background: rgba(15,26,46,.35);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  min-width: 200px;
}
.colHeader{
  padding:12px 12px;
  font-weight:900;
  border-bottom:1px solid var(--border);
  flex-shrink: 0;
}
.colBody{
  padding:12px;
  min-height: 300px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 1;
  overflow-y: auto;
}

/* Claim Reward column distinct styling - greyish tone to indicate non-accessible */
.doneColumn{
  background: rgba(38, 55, 89, .1);
  border: 1px solid rgba(38, 55, 89, 0.1);
}
.doneColumn .colHeader{
  background: rgba(38, 55, 89, 0.5);
  border-bottom: 1px solid rgba(38, 55, 89, 0.1);
}
.doneColumn .colBody{
  position: relative;
}
.doneColumn .colBody::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(38, 55, 89);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 30px, black 10px, black 35px);
  opacity: 0.20;
  z-index: 0;
  pointer-events: none;
}
.doneColumn .colBody > *{
  position: relative;
  z-index: 1;
}

.ticketCard{cursor: grab;}
.ticketCard:active{cursor: grabbing;}

.kidbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.kidchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
}

/* Active player highlight and inactive fade */
.kidchip.active{
  font-weight: 900;
  opacity: 1;
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(96,165,250,.22) inset;
}
.kidchip.inactive{
  opacity: 0.55;
  color: rgba(167,180,211,.9);
}

.filter{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

.table{margin-top:10px;}
.thead,.trow{display:grid; grid-template-columns: 280px 120px 180px 1fr; gap:10px; padding:10px; border-bottom:1px solid rgba(36,52,84,.6);}
.thead{font-weight:900;}
.trow{background: rgba(17,31,56,.35); border-radius:12px; margin-top:8px; border:1px solid rgba(36,52,84,.6);}

/* Responsive adjustments for smaller screens */
@media (max-width: 1400px) {
  .pool{
    width: 300px;
    max-width: 300px;
  }
}

@media (max-width: 1200px) {
  .pool{
    width: 260px;
    max-width: 260px;
  }
  .column{
    min-width: 180px;
  }
}

@media (max-width: 900px) {
  .board{
    flex-direction: column;
    margin-left: 0;
    padding-right: 0;
  }
  .pool, .poolMini{
    width: 100%!important;
    max-width: 100%!important;
    margin: 0 0 14px 0!important;
  }
  .columns{
    grid-template-columns: 1fr;
  }
}