:root{
  --bg:#0e1116;
  --panel:#141923;
  --panel2:#151a22;
  --border:#2a2f3a;
  --dash:#444;
  --muted:#9aa3b2;
  --accent:#3fa34d;
  --accent2:#9fd3ff;
}

body{
  margin:0;
  font-family:system-ui, Arial, sans-serif;
  background:var(--bg);
  color:#eee;
}

/* ===== Navigation ===== */
#nav{
  display:flex;
  gap:20px;
  padding:12px 24px;
  background:var(--panel2);
}
#nav a{
  color:#ccc;
  text-decoration:none;
  font-weight:600;
}
#nav a.active{ color:#fff; }

/* ===== Banner ===== */
#banner{
  background:#2b3a2f;
  text-align:center;
  padding:24px 0;
}
#logo{ font-size:32px; font-weight:800; }
#page-title{ margin-top:8px; font-size:14px; opacity:.85; }

/* ===== Page ===== */
#page{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ===== Hero Pool ===== */
#hero-pool{
  border:1px solid var(--border);
  background:var(--panel);
  padding:10px;
  overflow:hidden;
}
#hero-grid{
  display:grid;
  gap:10px;
  align-items:stretch;
}

.hero-cell{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  padding:10px;
  min-height:160px;
  display:flex;
  gap:10px;
}
.hero-cell.unavailable{ opacity:.35; }
.hero-cell.used{ opacity:.30; }

.hero-portrait{
  width:92px;
  flex:0 0 auto;
  text-align:center;
}
.hero-portrait img{
  width:90px;
  height:90px;
  border-radius:6px;
  border:2px solid #333;
  display:block;
  cursor:grab;
  background:#0f131b;
}
.hero-portrait .name{
  margin-top:6px;
  font-size:13px;
  font-weight:800;
}
.draggable-hero {
  touch-action: none;        /* critical for pointermove on mobile */
  -webkit-user-drag: none;
  user-select: none;
}
.drag-hint{
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
}

.hero-info{
  flex:1;
  min-width:0;
  font-size:13px;
}
.hero-info h4{
  margin:8px 0 2px;
  font-size:13px;
  color:var(--accent2);
}
.hero-info .sub{
  color:var(--muted);
  margin-top:2px;
  font-size:12px;
}
.hero-info .skill{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.07);
}

/* ===== Mission Brief ===== */
#mission-brief{
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  padding:10px 12px;
  color:#d7deee;
  font-size:13px;
  line-height:1.35;
}
#mission-brief b{ color:#fff; }

/* ===== Teams + Middle Gap ===== */
#teams{
  display:grid;
  grid-template-columns: 1fr 140px 1fr;
  align-items:start;
}
#mid-gap{ }

.team{
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  background:rgba(0,0,0,0.05);
  min-width:0;
}
.team h2{
  text-align:center;
  margin:8px 0;
}

/* ===== Slots ===== */
.slots{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  overflow:visible;
}

.slot{
  border:1px dashed var(--dash);
  padding:10px;
  min-height:92px;
  background:var(--panel);
}
.slot.locked{
  opacity:.25;
  pointer-events:none;
}
.slot.empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#777;
}

.slot-top{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.slot-top img{
  width:64px;
  height:64px;
  border-radius:4px;
  cursor:grab;
  flex:0 0 auto;
  background:#0f131b;
}
.slot-meta{
  flex:1;
  min-width:0;
  font-size:13px;
}
.slot-meta .title{
  font-weight:800;
  margin-bottom:6px;
}

/* HP box */
.hp-box{ display:inline-block; }
.hp-line{
  font-size:12px;
  color:#d9e0ee;
  margin-bottom:6px;
  white-space:nowrap;
}
.hp-bar{
  width:70px;
  height:10px;
  border-radius:999px;
  background:#2b2f39;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.hp-fill{
  height:100%;
  width:0%;
  background:var(--accent);
}
.hp-pct{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}
.enemy-info { margin-top: 10px; }
.enemy-info .skill { margin-bottom: 10px; }
.enemy-skill {
  margin-top: 4px;
  font-size: 0.9em;
  line-height: 1.3;
}
#start-btn {
  transition: background-color 0.2s ease, color 0.2s ease;
}

#start-btn.ready {
  background-color: #2ecc71; /* green */
  color: #ffffff;
}
/* Heroes right-aligned, enemies stay left-aligned */
.team.heroes .slot-top{
  flex-direction: row-reverse;
  justify-content:flex-start;
}
.team.heroes .slot-meta{ text-align:right; }
.team.heroes .hp-box{ text-align:right; }
.team.heroes .hp-bar{ margin-left:auto; }

/* ===== Footer ===== */
#footer{
  padding:12px;
  text-align:center;
}
#start-btn{
  padding:12px 32px;
  font-size:16px;
  font-weight:800;
  border:none;
  border-radius:6px;
  background:#555;
  color:#ccc;
  cursor:default;
}
#start-btn.active{
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}





.mission-brief-image
    {
    width:100%;
    text-align:center;
    }

#mission-brief {
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.brief-section {
  padding: 8px 6px;
}

.brief-section + .brief-section {
  border-top: 1px solid rgba(255,255,255,0.10);
}

.brief-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.brief-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.brief-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
        margin-bottom:10px;
}

.brief-item .brief-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #444;
  object-fit: cover;
  background: rgba(0,0,0,0.25);
  flex: 0 0 auto;
}

.brief-item .brief-text {
  flex: 1;
}

.brief-item .brief-tagline {
  display: block;
  opacity: 0.95;
}

.brief-item .brief-desc {
  display: block;
  margin-top: 2px;
  opacity: 0.85;
}