/* =========================================================
   30 Squares® Team Building — shared V2 brand layer
   Place at: static/css/team_building_brand.css
   ========================================================= */

:root{
  --tb-brand-navy:#061b48;
  --tb-brand-navy-2:#0b347e;
  --tb-brand-blue:#1468fa;
  --tb-brand-sky:#2bb9ff;
  --tb-brand-green:#19c98c;
  --tb-brand-gold:#ffb000;
  --tb-brand-ink:#10254f;
  --tb-brand-muted:#61708a;
  --tb-brand-line:#dce6f4;
  --tb-brand-soft:#f5f8fe;
  --tb-brand-shadow:0 18px 42px rgba(8,33,79,.10);
}

body{
  background:#fff;
}

.tb-shell,
.leader-shell{
  width:min(1380px,calc(100% - 36px))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

.tb-hero{
  border-radius:0!important;
  max-width:none!important;
  margin:0!important;
  min-height:310px;
  background:
    linear-gradient(90deg,rgba(3,24,63,.97) 0%,rgba(3,24,63,.84) 50%,rgba(3,24,63,.22) 80%,rgba(3,24,63,.04) 100%),
    url("../img/brand/hero_background_16x9.jpg") center/cover no-repeat!important;
  box-shadow:none!important;
  border:0!important;
}

.tb-hero-inner{
  width:min(1380px,calc(100% - 36px))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding:48px 0 54px!important;
}

.tb-title,
.team-title,
.finish-title{
  color:#fff!important;
  font-family:'Outfit',sans-serif;
  font-weight:900!important;
  letter-spacing:-.035em;
  text-shadow:0 8px 28px rgba(0,0,0,.22)!important;
}

.tb-sub,
.team-sub,
.finish-sub{
  color:#e2eeff!important;
}

.tb-card,
.account-card,
.quick-card,
.price-card,
.team-card,
.metric,
.stat,
.stat-card,
.intro-card,
.panel,
.table-card,
.leaderboard-card,
.tb-receipt-card,
.tb-start-card,
.finish-card{
  border:1px solid rgba(15,42,92,.08)!important;
  border-radius:20px!important;
  box-shadow:var(--tb-brand-shadow)!important;
}

.tb-card-body,
.account-body,
.team-body,
.finish-body{
  padding:22px!important;
}

.btn-rounded,
.tb-btn,
.btn-start,
.action-btn,
.btn-clue,
.btn-pill{
  border-radius:10px!important;
  font-weight:900!important;
}

.btn-primary,
.rank-btn,
.rank-perfect-button,
.rank-view-large,
.rank-view-large-v4{
  background:linear-gradient(135deg,#1268ff,#0f5be4)!important;
  border-color:#1268ff!important;
  box-shadow:0 10px 24px rgba(18,104,255,.24);
}

.quick-card,
.metric,
.stat,
.stat-card{
  background:#fff!important;
}

.quick-card:hover,
.account-card:hover,
.team-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px rgba(8,33,79,.13)!important;
}

.account-head,
.team-head,
.clue-head{
  background:linear-gradient(180deg,#f7faff,#fff)!important;
  border-bottom:1px solid #e9eff8!important;
}

.section-title,
.tb-section-title,
.section-heading h2{
  color:var(--tb-brand-ink)!important;
  font-weight:900!important;
  letter-spacing:-.025em;
}

.section-sub,
.tb-section-sub,
.text-muted{
  color:var(--tb-brand-muted)!important;
}

.status-pill,
.route-chip,
.hero-pill,
.mini-badge,
.proof-link{
  border-radius:999px!important;
}

.form-control,
.form-select,
.w3w-input,
.proof-file{
  border-radius:12px!important;
  border-color:#ccd9eb!important;
  min-height:46px;
}

.form-control:focus,
.form-select:focus,
.w3w-input:focus,
.proof-file:focus{
  border-color:var(--tb-brand-blue)!important;
  box-shadow:0 0 0 .2rem rgba(20,104,250,.12)!important;
}

.table thead th,
.rank-table th{
  background:#f6f9fd!important;
  color:#64748b!important;
}

.table tbody tr:hover td,
.rank-table tbody tr:hover td{
  background:#f8fbff;
}

/* Public Team Building landing page */
.tb-shell > .tb-hero{
  min-height:500px;
  display:flex!important;
  align-items:center!important;
}

.tb-shell > .tb-hero .tb-hero-panel{
  width:min(760px,100%)!important;
  margin:0!important;
  padding:54px 0!important;
  text-align:left!important;
  background:transparent!important;
  border:0!important;
  backdrop-filter:none!important;
  border-radius:0!important;
}

.tb-shell > .tb-hero .tb-sub{
  margin-left:0!important;
  margin-right:0!important;
}

.tb-shell > .tb-hero .justify-content-center{
  justify-content:flex-start!important;
}

.tb-shell > .quick-grid{
  margin-top:-52px!important;
  position:relative;
  z-index:3;
}

.tb-badge,
.rank-kicker{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#dcecff!important;
}

.quick-icon{
  border-radius:14px!important;
  background:linear-gradient(135deg,#1268ff,#0f5be4)!important;
}

.price{
  color:var(--tb-brand-blue)!important;
}

.step-card,
.info-box,
.info-strip,
.map-placeholder,
.existing-game-status{
  background:#f6f9fe!important;
  border-color:#dce6f4!important;
  border-radius:16px!important;
}

/* Dashboard and management pages */
.quick-grid{
  gap:16px!important;
}

.quick-card{
  min-height:125px!important;
  padding:18px!important;
}

.quick-card span,
.metric span,
.stat span,
.stat-card .k{
  color:#6a7891!important;
}

.quick-card strong,
.metric strong,
.stat strong,
.stat-card .v{
  color:var(--tb-brand-ink)!important;
}

.account-card,
.team-card{
  overflow:hidden;
}

/* Team play/start/clue/result pages */
.team-play-page,
.clue-page,
.tb-start-page,
.finish-page{
  background:
    linear-gradient(180deg,rgba(4,22,58,.46),rgba(4,22,58,.76)),
    url("../img/brand/hero_background_16x9.jpg") center/cover fixed no-repeat!important;
}

.team-hero,
.clue-hero,
.tb-start-head,
.finish-head{
  background:linear-gradient(135deg,rgba(6,27,72,.98),rgba(11,62,145,.94))!important;
  border-color:rgba(255,255,255,.13)!important;
}

.team-hero,
.clue-hero{
  border-radius:24px!important;
}

.clue-card{
  border-radius:20px!important;
}

.action-btn,
.btn-clue{
  border-radius:10px!important;
}

.hero-pill{
  color:#fff!important;
  background:rgba(255,255,255,.11)!important;
  border-color:rgba(255,255,255,.17)!important;
}

/* Receipts */
.tb-receipt-hero{
  background:linear-gradient(135deg,#061b48,#0b4cae)!important;
  border-radius:20px!important;
}

.tb-box{
  background:#f6f9fe!important;
  border-color:#dce6f4!important;
}

/* Mobile */
@media(max-width:991px){
  .tb-shell,
  .leader-shell,
  .tb-hero-inner{
    width:min(100% - 24px,1380px)!important;
  }

  .tb-shell > .tb-hero{
    min-height:440px;
  }

  .tb-shell > .tb-hero .tb-hero-panel{
    padding:38px 0!important;
  }

  .tb-shell > .quick-grid{
    margin-top:18px!important;
  }
}

@media(max-width:575px){
  .tb-hero-inner{
    padding:34px 0 40px!important;
  }

  .tb-title{
    font-size:2.3rem!important;
  }

  .tb-card-body,
  .account-body,
  .team-body,
  .finish-body{
    padding:16px!important;
  }
}