/* v17 Build Crew page */
.crewLink.active{color:#ffd56a;border-bottom-color:#ffd56a;background:rgba(255,213,106,.05)}
.crewWrap{max-width:1560px;margin:auto;padding:0 18px 22px}
.crewBanner{position:relative;height:500px;overflow:hidden;border-radius:0 0 24px 24px;border-top:0;background:#050911;box-shadow:0 28px 80px rgba(0,0,0,.38)}
.crewBannerBg{position:absolute;inset:0;background-image:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.96) 12%,rgba(5,5,5,.78) 25%,rgba(5,5,5,.48) 38%,rgba(5,5,5,.12) 51%,rgba(5,5,5,0) 61%,rgba(5,5,5,.08) 70%,rgba(5,5,5,.42) 84%,#050505 100%),linear-gradient(180deg,rgba(5,5,5,.42) 0%,rgba(5,5,5,.08) 22%,rgba(5,5,5,0) 50%,rgba(5,5,5,.38) 82%,#050505 100%),url('../../crew-list/banner/home.jpg');background-size:cover;background-position:center 42%;filter:saturate(1.2) contrast(1.05)}
.crewBannerText{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;z-index:2}
.crewBadge{color:#ffd56a;font-weight:1000;letter-spacing:3px;text-transform:uppercase}
.crewBanner h1{font-size:clamp(34px,5vw,72px);line-height:1;margin:10px 0 8px;color:#fff;text-shadow:0 5px 0 rgba(0,0,0,.3),0 18px 36px rgba(0,0,0,.8);text-transform:uppercase}
.crewBanner p{max-width:760px;color:#d7e6f8;line-height:1.6;margin:0}
.crewLayout{display:grid;grid-template-columns:29% 43% 28%;gap:14px;margin-top:14px}
.crewPanel{background:linear-gradient(180deg,rgba(13,27,44,.96),rgba(5,15,27,.96));border:1px solid rgba(255,213,106,.22);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden}
.crewHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(90deg,#0b2339,#1c3e5f);color:#ffd56a;font-weight:1000;font-size:18px;text-transform:uppercase}
.crewHead:before{content:"✦";color:#ffb33d}
.crewHead a{font-size:13px;color:#a7cbff;text-transform:none}
.crewSearch{margin:14px 14px 0;width:calc(100% - 28px);background:#071625;border:1px solid rgba(255,213,106,.18);border-radius:12px;color:#fff;padding:11px 13px;outline:0}
.crewHeroGrid{padding: 14px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-height: 520px;
    overflow: auto;
    grid-auto-flow: row;
    align-content: center;
    justify-content: center;
    align-items: center;}
.pickHero{position:relative;aspect-ratio:1/1;border:2px solid #9c6b21;border-radius:10px;background:#102036;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:inset 0 0 18px rgba(255,213,106,.08);transition:.15s}
.pickHero:hover{transform:translateY(-2px);border-color:#ffd56a;box-shadow:0 0 18px rgba(77,180,255,.28)}
.pickHero img{max-width:100%;max-height:100%;object-fit:contain}
.pickHero small{position:absolute;left:3px;right:3px;bottom:2px;background:rgba(0,0,0,.64);border-radius:5px;text-align:center;font-size:9px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crewHint,.crewNote,.playerNote{margin:0 14px 14px;padding:12px;border:1px dashed rgba(255,213,106,.22);border-radius:12px;color:#b9c9da;background:rgba(5,12,22,.42);line-height:1.55}
.formationPanel{padding-bottom:16px}
.crewControls{padding:14px 16px 0;display:grid;gap:12px}
.stageTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stageTabs button,.submittedTabs button{background:#0e1d2d;border:1px solid rgba(255,213,106,.2);border-radius:10px;padding:10px;color:#ffd56a;font-weight:900;cursor:pointer}
.stageTabs button.active,.submittedTabs button.active{background:linear-gradient(180deg,#173a5b,#102437);color:#fff;border-color:#408bd0}
.modeSelect{display:flex;align-items:center;gap:10px;color:#fff}
.modeSelect select{background:#071625;border:1px solid rgba(255,213,106,.25);color:#fff;border-radius:10px;padding:10px 36px 10px 12px;font-weight:900}
.formationGrid{width:min(390px,100%);margin:22px auto 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slot{position:relative;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:flex;align-items:center;justify-content:center;overflow:hidden}
.slot:before{content:"♜";font-size:42px;color:rgba(255,255,255,.08)}
.slot.filled:before{display:none}
.slot img{width:100%;height:100%;object-fit:contain}
.slot .mainTag{position:absolute;left:6px;right:6px;bottom:4px;text-align:center;background:rgba(0,0,0,.72);color:#ffd56a;border-radius:6px;font-size:12px;font-weight:1000}
.slot.over{border-color:#4db4ff;box-shadow:0 0 18px rgba(77,180,255,.3)}
.submitCrew{display:block;margin:10px auto 0;width:250px;max-width:80%;border:1px solid rgba(255,213,106,.45);border-radius:12px;background:linear-gradient(180deg,#b7842d,#755016);color:#fff;font-weight:1000;font-size:18px;padding:13px;cursor:pointer;box-shadow:0 14px 28px rgba(0,0,0,.25)}
.loginBox{margin:16px;border:1px solid rgba(255,213,106,.18);border-radius:14px;background:#0b1928;display:flex;align-items:center;gap:14px;padding:16px}
.avatarUser{width:62px;height:62px;border-radius:50%;background:linear-gradient(180deg,#d1a751,#6a4a16);display:flex;align-items:center;justify-content:center;font-size:38px;color:#07111d}
.loginBox b{color:#35d66b;display:block;margin-bottom:8px}.loginBox button{background:#0e1d2d;border:1px solid rgba(255,213,106,.25);color:#d9b46a;border-radius:8px;padding:8px 24px;font-weight:900}
.playerInfo{margin:0 16px 16px;border:1px solid rgba(255,213,106,.14);border-radius:14px;overflow:hidden}
.playerInfo div{display:flex;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.playerInfo div:last-child{border-bottom:0}.playerInfo span{color:#d1a751}.playerInfo b{color:#fff;text-align:right}
.submittedPanel{margin-top:14px}.submittedTabs{padding:14px 16px 0;display:flex;gap:10px;flex-wrap:wrap}.submittedList{padding:14px 16px 16px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.submittedCard{border:1px solid rgba(255,213,106,.18);border-radius:12px;background:#081625;padding:10px}
.submittedCard b{display:block;color:#ffd56a;margin-bottom:7px}.miniCrew{display:flex;gap:5px;margin-bottom:9px}.miniCrew img{width:42px;height:42px;object-fit:contain;border-radius:8px;border:1px solid #9c6b21;background:#0f2034}.submittedMeta{display:flex;justify-content:space-between;color:#cbd8e6;font-size:12px}
@media(max-width:1180px){.crewLayout{grid-template-columns:1fr}.crewHeroGrid{grid-template-columns:repeat(6,1fr)}.submittedList{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.crewWrap{padding:0 10px 14px}.crewBanner{height:300px}.crewHeroGrid{grid-template-columns:repeat(4,1fr)}.stageTabs{grid-template-columns:1fr 1fr}.submittedList{grid-template-columns:1fr}.formationGrid{gap:8px}.crewHead{font-size:15px}}

.slot.mainSlot{border-color:#ffd56a!important;box-shadow:0 0 22px rgba(255,213,106,.25)}

/* v20 crew star core + mobile tap sorting */
.slot{overflow:visible!important}
.slot.selectedSlot{border-color:#4db4ff!important;box-shadow:0 0 20px rgba(77,180,255,.35)}
.pickHero.selected{border-color:#4db4ff!important;box-shadow:0 0 20px rgba(77,180,255,.35)}
.starCore{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,213,106,.65);background:#071625;color:#7c8796;font-weight:1000;z-index:5;cursor:pointer}
.starCore.on{color:#ffd56a;background:#3a2707;box-shadow:0 0 18px rgba(255,213,106,.45)}
.mainSlot img{object-fit:contain}
@media(max-width:760px){.slot{touch-action:manipulation}.formationGrid{width:100%;max-width:360px}.starCore{width:30px;height:30px}}

/* v28 player panel requested fixes */
.playerPanel{max-width:400px !important}
.playerInfo div{display:grid;grid-template-columns:minmax(92px,1fr) minmax(0,1fr)!important;gap:8px;align-items:center}
.playerInfo b{min-width:0!important;word-break:break-word!important;text-align:right}
.myPostsLink{color:#4db4ff;font-weight:1000;text-decoration:none}
.myPostsLink:hover{color:#ffd56a}

/* v30 keep player information visible */
.playerInfo{display:grid!important;gap:9px!important}
.playerInfo div{display:grid!important;grid-template-columns:minmax(95px,1fr) minmax(0,1fr)!important;gap:8px!important;align-items:center!important}
.playerInfo b{display:block!important;min-width:0!important;text-align:right!important;word-break:break-word!important}
.playerInfo a.myPostsLink{display:block!important;grid-column:1 / -1!important;text-align:center!important;color:#4db4ff!important;font-weight:1000!important;text-decoration:none!important;border:1px solid rgba(77,180,255,.28);border-radius:10px;padding:8px;background:#081625}

/* =============================== */
/* SUBMITTED CARD - HOVER EFFECT   */
/* =============================== */

.submittedCard {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(255, 213, 106, 0.18);
  border-radius: 12px;
  background: #081625;
  padding: 10px;

  cursor: pointer;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    filter 0.25s ease;
}

/* Lớp sáng nhẹ bên trong card */
.submittedCard::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255, 213, 106, 0.12),
      transparent 38%,
      rgba(56, 160, 255, 0.08)
    );

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Vệt sáng quét */
.submittedCard::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -90%;

  width: 40%;
  height: 220%;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 35%,
      rgba(255, 255, 255, 0.38) 50%,
      rgba(255, 255, 255, 0.08) 65%,
      transparent 100%
    );

  transform: rotate(18deg);
  opacity: 0;
  pointer-events: none;
}

/* Hover card */
.submittedCard:hover {
  border-color: rgba(255, 213, 106, 0.75);

  background:
    linear-gradient(180deg, #0c2038, #081625);

  box-shadow:
    0 0 18px rgba(255, 190, 70, 0.22),
    inset 0 0 0 1px rgba(255, 230, 150, 0.08);
}

.submittedCard:hover::before {
  opacity: 1;
}

.submittedCard:hover::after {
  animation: submittedCardShine 0.8s ease forwards;
  opacity: 1;
}

@keyframes submittedCardShine {
  from {
    left: -90%;
  }

  to {
    left: 135%;
  }
}

/* Text PVP */

.submittedCard:hover > b {
  color: #fff1b8;
  text-shadow:
    0 0 8px rgba(255, 213, 106, 0.65),
    0 0 14px rgba(255, 165, 45, 0.28);
}

/* Icon đội hình */
.submittedCard .miniCrew {
  position: relative;
  z-index: 2;
}

.submittedCard .miniCrew img {
  transition:
    filter 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.submittedCard:hover .miniCrew img {
  filter:
    brightness(1.15)
    contrast(1.05)
    saturate(1.12);

  box-shadow:
    0 0 10px rgba(255, 213, 106, 0.35);
}

/* Meta dưới */
.submittedCard .submittedMeta {
  position: relative;
  z-index: 2;

  transition: color 0.25s ease;
}

.submittedCard:hover .submittedMeta {
  color: #eaf3ff;
}