/* Modern file upload redesign */
.modern-file-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: .35rem .4rem;
  margin-bottom: .2rem;
}
.upload-zone {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border: 2px dashed #444;
  border-radius: 10px;
  background: #181a1f;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.upload-zone.dragover {
  border-color: var(--accent-red-hot);
  background: #23242a;
}
.upload-zone:focus {
  outline: 2px solid var(--accent-red-hot);
}
.upload-zone svg {
  margin-right: .2rem;
  color: var(--accent-red-hot);
}
.upload-zone-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.upload-title {
  font-size: .98rem;
  font-weight: 600;
  color: #fff;
}
.upload-desc {
  font-size: .82rem;
  color: #7a8699;
}
.upload-controls {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.attach-btn, .attach-clear {
  background: #fff;
  border: 1.5px solid #eaeaea;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  cursor: pointer;
  transition: border-color .18s, background .18s;
  padding: 0;
}
.attach-btn svg, .attach-clear svg {
  color: var(--accent-red-hot);
}
.attach-btn:hover, .attach-clear:hover {
  border-color: var(--accent-red-hot);
  background: #fff0f0;
}
.img-size-control {
  display: flex;
  align-items: center;
  gap: .18rem;
  margin-left: .2rem;
}
.img-size-control label {
  font-size: .74rem;
  margin-bottom: 0;
  color: #bdbdbd;
}
.img-size-control input[type=range] {
  width: 70px;
  margin: 0 .1rem;
  accent-color: var(--accent-red-hot);
}
.size-display {
  font-size: .78rem;
  color: #222a38;
  min-width: 2.2em;
  text-align: right;
}
.modern-thumb {
  display: none;
  margin-left: .5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  max-width: 90px;
  max-height: 6.5rem;
  object-fit: cover;
  background: #222;
}
.attach-filename {
  font-size: .86rem;
  color: #cfd6e6;
  margin-left: .3rem;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root{
  --bg:#000000;
  --accent:#d3522a;
  --muted:#6b6b6b;
  --card:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Segoe UI, Roboto, -apple-system, system-ui, 'Helvetica Neue', Arial;
  /* Vertical depth gradient: lighter top -> darker bottom */
  background:linear-gradient(to bottom, #22394f 0%, #1a2d41 28%, #142433 55%, #0d1a26 78%, #09131d 100%);
  color:#222;
  -webkit-font-smoothing:antialiased;
}
/* Hide main content before first state is applied */
body.boot .fight-main{ opacity:0 }
/* Hide headline during initial boot to avoid size/color flicker */
body.boot .event-title{ visibility:hidden }
body.boot *{ transition:none !important }
.site-header{
  padding:1.2rem;
  background:linear-gradient(90deg, rgba(211,82,42,0.12), rgba(211,82,42,0.04));
  :root{
    --bg:#000000;
    --accent:#ff8a50; /* warm accent on dark */
    --muted:#bdbdbd;
    --card:#0f0f10; /* card background */
    --card-strong:#18181a;
    --glass: rgba(255,255,255,0.03);
  }
}
.site-header h1{margin:0;font-size:1.25rem}
.tag{color:var(--muted);font-size:0.9rem;margin-top:0.25rem}
.fight-header .title-row{display:flex;justify-content:space-between;align-items:center}
.fight-main{padding:clamp(0.8rem, 2vw, 1.4rem) 0 0}
/* Ensure main fills the viewport so footer doesn't create a visual break */
.fight-main{display:flex;flex-direction:column;min-height:100vh}
.fight-main > .cards{flex:1}
.loyalty-footer{margin-top:auto}
/* Helpful empty-state layout to avoid odd gaps */
.cards.is-empty{min-height:60vh;place-content:center}
.cards.empty-center{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:8vh;min-height:unset}
.empty-placeholder{color:#c3c8d2;font-size:1.05rem;max-width:680px;line-height:1.35;text-align:center;padding:0 1.2rem;font-weight:600;letter-spacing:.4px}
.fight-info{padding:0 0 .25rem}

#logo-wrap{display:flex;justify-content:center;padding:0.15rem 0}
#logoImage{display:block;width:100%;max-width:900px;height:auto;border-radius:6px}

/* scale down on very small screens */
@media(max-width:420px){
  #logoImage{max-width:420px}
}
.cards{display:grid;gap:.8rem;padding:1rem;background:transparent;border-radius:8px;align-content:start;align-items:start}
/* When list is empty, center the placeholder nicely */
.cards.is-empty{min-height:60vh;place-content:center}
/* Stronger vertical centering for fightList when empty */
.fight-main{display:flex;flex-direction:column;min-height:100vh;}
.fight-main > .cards{flex:1;}
.cards.empty-center{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:8vh;min-height:unset;}
.loyalty-footer{margin-top:auto;padding:1.2rem 1.2rem 1.4rem;}
.empty-placeholder{color:#c3c8d2;font-size:1.05rem;max-width:680px;line-height:1.35;text-align:center;padding:0 1.2rem;font-weight:600;letter-spacing:.4px}
/* Section title above fight list */
.section-title{color:#fff;margin:0 0 .8rem;padding:0;font-size:1.25rem;text-align:center}
/* Event title headline */
.event-title{margin:0 auto .5rem;text-align:center;color:#fff;letter-spacing:.5px;min-height:2.4rem;line-height:1.05;padding-top:0}
.event-title{font-size:clamp(2.4rem,6.5vw,4.4rem);font-weight:800}
/* Enhanced visual effects for event title (lift, outline, glow) */
.event-title.event-title--fx{
  --et-stroke:rgba(255,255,255,0.25);
  --et-shadow:rgba(0,0,0,0.45);
  --et-glow:rgba(255,255,255,0.07);
  position:relative;
  /* Canva-like layered shadows: subtle inner light, lift, depth, glow */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 1.5px 2.5px var(--et-shadow),
    0 4px 8px rgba(0,0,0,0.28),
    0 0 4px var(--et-glow);
  -webkit-text-stroke:1px var(--et-stroke);
  paint-order:stroke fill;
}
/* Slightly stronger glow variant when a bright color is chosen (optional class) */
.event-title.event-title--fx.glow{
  --et-glow:rgba(255,255,255,0.14);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.16),
    0 2px 3px var(--et-shadow),
    0 6px 12px rgba(0,0,0,0.34),
    0 0 8px var(--et-glow),
    0 0 18px rgba(255,255,255,0.10);
}
@supports not (-webkit-text-stroke:1px var(--et-stroke)){
  /* Fallback outline via multi-direction shadows (kept subtle) */
  .event-title.event-title--fx{
    text-shadow:
      -1px 0 var(--et-stroke),
       1px 0 var(--et-stroke),
       0 -1px var(--et-stroke),
       0 1px var(--et-stroke),
       0 1.5px 2.5px var(--et-shadow),
       0 4px 8px rgba(0,0,0,0.28),
       0 0 4px var(--et-glow);
  }
}
/* Event image can replace the headline text */
.event-image{display:block;margin:.2rem auto .15rem;max-width:90%;height:auto}
/* Font choices */
.font-bebas .event-title{font-family:'Bebas Neue', Arial, sans-serif; font-weight:400; letter-spacing:1px}
.font-anton .event-title{font-family:'Anton', Arial, sans-serif}
.font-oswald .event-title{font-family:'Oswald', Arial, sans-serif}
.font-montserrat .event-title{font-family:'Montserrat', Arial, sans-serif}
.font-poppins .event-title{font-family:'Poppins', Arial, sans-serif}
.font-playfair .event-title{font-family:'Playfair Display', Georgia, serif}
.font-impact .event-title{font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
/* Small event info block shown under the main title */
.event-info{text-align:center;margin-bottom:.35rem;margin-top:.25rem}
.event-info .event-line{color:#fff;opacity:0.95;margin:0;line-height:1}
.event-info .event-line-1{font-size:1.18rem;font-weight:900;font-family:'Bebas Neue', Arial, sans-serif;letter-spacing:1.2px;}
.event-info .event-line-2{font-size:1.08rem;color:var(--muted);font-weight:900;font-family:'Bebas Neue', Arial, sans-serif;letter-spacing:1.1px;}

/* Enlarged free-form info box lines injected into #eventInfoDisplay (distinct from schedule lines) */
#eventInfoDisplay .event-line{font-size:1.32rem;letter-spacing:1.3px;font-weight:900;font-family:'Bebas Neue', Arial, sans-serif;line-height:1.08;margin:.25rem 0;}
#eventInfoDisplay{padding-bottom:.2rem;}
.fight-klass{color:var(--muted);text-align:center;font-size:0.95rem;margin-bottom:6px;font-weight:600}
  body{
    margin:0;
    font-family:Segoe UI, Roboto, -apple-system, system-ui, 'Helvetica Neue', Arial;
    background:linear-gradient(to bottom, #22394f 0%, #1a2d41 28%, #142433 55%, #0d1a26 78%, #09131d 100%);
    color:#fff;
    -webkit-font-smoothing:antialiased;
  }
.card{background:var(--card);padding:.9rem;border-radius:12px;box-shadow:0 6px 14px rgba(22,22,22,0.06);border:1px solid rgba(255,255,255,0.06)}
.card h3{margin:0 0 .25rem}
.site-footer{padding:1rem;text-align:center;color:var(--muted);font-size:0.9rem}

  .site-header{
    padding:1.2rem;
    background:linear-gradient(90deg, rgba(211,82,42,0.06), rgba(0,0,0,0));
  }
.fight-cards{grid-auto-rows:auto}
.fight-card{display:flex;flex-direction:column;gap:.4rem;padding:.65rem;border-radius:12px;max-height:90vh;overflow:auto;-webkit-overflow-scrolling:touch}
/* Smooth elevation/scale transitions for fight cards */
.fight-card{transition:transform .18s ease, box-shadow .22s ease}

/* During programmatic updates, disable transitions to avoid flicker */
body.updating *{transition:none !important}
body.updating .fight-main{opacity:0}
  .site-header h1{margin:0;font-size:1.25rem;color: #fff}
  .tag{color:var(--muted);font-size:0.9rem;margin-top:0.25rem}
.fight-card .fighters{display:flex;gap:.5rem;align-items:center}
  .card{background:var(--card);padding:.9rem;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.08)}
.fight-card .fighters span{opacity:.7}
  .site-footer{padding:1rem;text-align:center;color:var(--muted);font-size:0.9rem}
.fight-card.live{border:4px solid #ef233c;box-shadow:0 18px 36px rgba(0,0,0,0.26)}
  .fight-card{display:flex;flex-direction:column;gap:.4rem;padding:.65rem;border-radius:12px;max-height:90vh;overflow:auto;-webkit-overflow-scrolling:touch}
.fight-row{display:flex;gap:0.75rem;align-items:stretch}
  .fight-card.live{border:4px solid #ef233c;box-shadow:0 18px 36px rgba(0,0,0,0.26)}
.fighter-box{flex:1;padding:.55rem .65rem;border-radius:12px;border:1px solid rgba(0,0,0,0.06);background:linear-gradient(180deg,#ffffff,#fffaf8);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:clamp(88px,12vw,120px);transition:transform .12s ease,box-shadow .12s ease}
  .fighter-box{flex:1;padding:.55rem .65rem;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg,var(--card-strong),var(--card));display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:clamp(88px,12vw,120px);transition:transform .12s ease,box-shadow .12s ease}
.fighter-box.winner{transform:translateY(-6px);box-shadow:0 10px 22px rgba(0,0,0,0.28)}
  .fighter-box.winner{transform:translateY(-6px);box-shadow:0 12px 26px rgba(0,0,0,0.32)}
.fighter-name{font-weight:700;font-size:1.02rem;color:#111;text-align:center}
  .fighter-name{font-weight:700;font-size:1.02rem;color:#111}
.fighter-meta{font-size:0.78rem;color:var(--muted);margin-top:6px;line-height:1.05;text-align:center;opacity:0.95}
.corner-chip{margin-top:.4rem;padding:.22rem .8rem;border-radius:999px;font-size:.7rem;font-weight:900;letter-spacing:.28em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.35rem;color:#fff;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.08)}
.corner-chip::before{content:'';width:.55rem;height:.55rem;border-radius:999px;border:2px solid rgba(255,255,255,0.65);background:rgba(255,255,255,0.4);display:inline-block}
.corner-chip-red{background:linear-gradient(140deg,#651112,#b32020);color:#ffe1d9;box-shadow:0 10px 20px -12px rgba(255,62,62,0.55)}
.corner-chip-red::before{background:#ffb2a3;border-color:#ffe1d9}
.corner-chip-blue{background:linear-gradient(140deg,#0f274f,#1f4d91);color:#d7ecff;box-shadow:0 10px 20px -12px rgba(74,144,226,0.5)}
.corner-chip-blue::before{background:#9ccfff;border-color:#d7ecff}
.fighter-box.winner{background:linear-gradient(180deg,#dff6e6,#c9f0d1);border-color:#7ad08a}
.fighter-box.winner .fighter-name{color:#063b14}
.fighter-box.winner .fighter-meta{color:#0a4f22}
.fighter-box.loser{background:linear-gradient(180deg,#fde2e2,#f9d1d1);border:1px solid #e9b1b1}
.fighter-box.loser .fighter-name{color:#7a0f0f}
.fighter-box.loser .fighter-meta{color:#a64444}
.fighter-box.draw{border:2px solid #000;background:linear-gradient(180deg,#f7f7f7,#f1f1f1)}
.fighter-box.draw .fighter-name{color:#000}
.fighter-box.draw{box-shadow:0 6px 16px rgba(0,0,0,0.18)}
.vs-draw{font-size:0.75rem;color:#000;margin-top:4px;font-weight:700;text-transform:lowercase}
.vs-col{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;gap:4px}
.vs-label{font-weight:700;color:var(--muted);font-size:0.95rem;margin-bottom:2px}
.weight-label{margin-top:10px;text-align:center;color:var(--muted);font-weight:600}
.win-method{
  display:block;
  width:fit-content;
  margin:8px auto 0;
  padding:.28rem .6rem;
  text-align:center;
  color:var(--muted);
  background:linear-gradient(180deg,#ffffff,#fafcff);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:999px;
  font-weight:800;
  letter-spacing:.4px;
  font-size:.82rem;
  position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08);
}
/* Placeholder style for when no method is set */
.win-method--placeholder{
  color:#94a3b8;
  background:rgba(255,255,255,0.6);
  border-color:rgba(0,0,0,0.06);
  font-weight:700;
}
/* bottom vs label removed; using win-method pill instead */
.now-strip{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.6rem 1rem;margin:0 auto .3rem;max-width:620px;border-radius:18px;background:linear-gradient(140deg, rgba(82,15,18,0.58), rgba(54,8,10,0.52));border:1px solid rgba(255,255,255,0.04);box-shadow:0 3px 10px -4px rgba(0,0,0,0.30),0 1px 1px rgba(0,0,0,0.35) inset;background-clip:padding-box}
  .controls button{flex:1;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:var(--card)}
.now-match{font-weight:700;letter-spacing:.5px;text-align:center}
/* weight on its own line under Now */
.now-match .now-weight{display:block;opacity:.96}
  .modal-content{background:var(--card);padding:1rem;border-radius:12px;max-width:360px;width:90%;text-align:center}
.controls{display:flex;gap:.5rem;padding:1rem}
  .now-strip{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.6rem 1rem;margin:0 auto .3rem;max-width:620px;border-radius:18px;background:linear-gradient(140deg, rgba(82,15,18,0.58), rgba(54,8,10,0.52));border:1px solid rgba(255,255,255,0.04);box-shadow:0 3px 10px -4px rgba(0,0,0,0.30),0 1px 1px rgba(0,0,0,0.35) inset}

/* red frame for the live 'Nu' strip and the active fight card */
.now-strip.red-frame{border:2px solid #ef233c; box-shadow:0 6px 14px rgba(0,0,0,0.22); border-radius:18px; background-clip:padding-box}
.fight-card.live{border:4px solid #ef233c; box-shadow:0 18px 36px rgba(0,0,0,0.26)}
.fight-card.live .weight-label{color:var(--accent)}
/* First live fight gets a slightly larger presence */
/* Any live/red-framed fight pops out slightly */
.fight-card.live, .fight-card.red-frame{transform:scale(1.03); z-index:2}
/* Slightly taller inner boxes when live to keep balance */
/* Keep live cards visually highlighted without changing box height */
.fight-card.live .fighter-box, .fight-card.red-frame .fighter-box{min-height:clamp(88px,12vw,120px)}

/* Stabilize inner text block heights so short names don't shrink boxes too much */
.fighter-name{min-height:2.2em;display:flex;align-items:center;justify-content:center;text-align:center}
.fighter-meta{min-height:1.2em}

/* explicit red-frame modifier for targeting specific fights */
.fight-card.red-frame{border:4px solid #ef233c; box-shadow:0 20px 46px rgba(0,0,0,0.26); border-radius:12px; background-clip:padding-box}
.fight-card.red-frame .fighter-name{color:#ef233c}
.controls button{flex:1;padding:.6rem;border-radius:8px;border:1px solid #eee;background:white}
.small{padding:.35rem .6rem;font-size:.9rem}

/* When admin sets standby, suppress the red-frame visuals entirely */
body.standby .fight-card.live,
body.standby .fight-card.red-frame {
  box-shadow: none !important;
  border: none !important;
}
body.standby .fight-card.live,
body.standby .fight-card.red-frame {
  transform:none !important;
}
/* Hide now-strip when in standby (pause) state */
body.standby .now-strip{ display:none !important }

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center}
.modal-content{background:white;padding:1rem;border-radius:12px;max-width:360px;width:90%;text-align:center}
.muted{color:var(--muted);font-size:0.85rem}

.loyalty-footer{padding:1.2rem;text-align:center;color:#ddd;background:transparent;margin-top:0.4rem}
.loyalty-footer a{color:#fff;text-decoration:underline}

/* Social bar styling */
.social-bar{display:flex;flex-direction:column;gap:.55rem;align-items:center;justify-content:center;margin-top:.4rem;font-size:.85rem}
.social-row{display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,0.05);padding:.55rem .75rem;border-radius:10px;min-width:240px;max-width:420px;width:90%;color:#eee;border:1px solid rgba(255,255,255,0.07)}
.social-row svg{flex-shrink:0}
.social-row a{color:#fff;text-decoration:none;font-weight:600}
.social-row a:hover{text-decoration:underline}

/* Mobile-first: small screens are default. Add media queries for larger screens */
@media(min-width:720px){
  body{max-width:900px;margin:0 auto}
  .hero h2{font-size:1.4rem}
  .cards{grid-template-columns:repeat(3,1fr);padding:1.5rem}
}

@media(max-width:640px){
  .fight-main{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1.6rem);}
  .fight-card{max-height:none;overflow:visible;}
  .cards{padding:0.9rem 0.6rem 1.6rem;}
}

/* Compact mode (single fight): shrink card to content and remove tall scroll region */
.cards.compact > .fight-card{max-height:none;overflow:visible}
.cards.compact{align-content:start}
/* Prevent growth when only one card: override flex fill */
.fight-main > .cards.compact{flex:0}