.brand{font-size:24px;gap:4px}.club-hero{display:flex;justify-content:space-between;align-items:center;gap:25px;background:linear-gradient(130deg,#334726,#1c2e22);border:1px solid #607c3e;border-radius:12px;padding:32px;margin-bottom:24px;overflow:hidden}.club-hero-identity{display:flex;align-items:center;gap:24px;width:100%}.club-hero-crest{width:86px;height:86px;flex-shrink:0;background:#162619;border:2px solid #577341;border-radius:12px;padding:6px;display:grid;place-items:center;filter:drop-shadow(0 6px 12px #0008)}.club-hero-crest img{width:100%;height:100%;object-fit:contain}.club-hero h2{font-size:48px;margin:12px 0 8px}.club-hero p{color:#b5c6a6;font-size:13px;max-width:480px;overflow-wrap:anywhere}.club-tags{display:flex;gap:8px;flex-wrap:wrap}.club-tags span{font-size:9px;border:1px solid #526642;padding:7px;border-radius:5px;color:#c1d5ad}.arena-drawing{width:300px;flex-shrink:0;padding-top:25px;transform:rotate(-3deg);opacity:.6}.arena-drawing.built{opacity:1}.arena-roof{height:66px;background:linear-gradient(15deg,#668147,#b1d578);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);display:grid;place-items:center;color:#20351c;font:24px var(--display);border-bottom:4px solid #90b56a}.arena-facade{height:85px;background:#536b3b;display:flex;justify-content:space-evenly;padding:15px 14px 0;margin:0 12px;border-bottom:8px solid #bfd78b}.arena-facade span{width:32px;background:repeating-linear-gradient(0deg,#162d21 0 12px,#6a8851 13px 15px);border:1px solid #9cba72}.arena-ground{height:18px;background:#789359;transform:skewX(-35deg);margin:0 -5px}.arena-drawing small{display:block;font-size:8px;letter-spacing:2px;text-align:center;color:#b6cfa0;margin-top:15px}.club-opponent{font-size:24px!important;overflow-wrap:anywhere}.club-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.club-form{display:grid;gap:15px}.club-form label{display:grid;gap:7px;font-size:11px;color:#aabe99}.club-form input,.club-form select{width:100%;margin:0}.club-form .button{margin-top:5px}.development-track{height:8px;background:#2f3d27;border-radius:8px;overflow:hidden}.development-track span{height:100%;display:block;background:var(--lime)}.club-roadmap{list-style:none;padding:0;margin:25px 0}.club-roadmap li{display:flex;gap:17px;margin-bottom:23px}.club-roadmap b{font:28px var(--display);color:var(--lime)}.club-roadmap strong{font-size:12px}.club-roadmap p{font-size:11px;color:#8d9f80;margin:6px 0}.facility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}.facility{margin:0;display:flex;flex-direction:column}.facility-preview{width:100%;height:115px;background:radial-gradient(ellipse at center,#263927,#131f16);border-radius:8px;overflow:hidden;margin-bottom:14px;border:1px solid #2e3d2c;display:flex;align-items:center;justify-content:center}.facility-preview-img{width:100%;height:100%;object-fit:contain;padding:8px;transition:transform .25s ease}.facility:hover .facility-preview-img{transform:scale(1.05)}.facility-preview-img.unbuilt{opacity:.38;filter:grayscale(.9)}.facility-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.facility-icon{font-size:32px;color:var(--lime)}.facility h3{font-size:24px;margin:0 0 6px}.facility p{font-size:11px;color:#99ab8d;min-height:44px;margin:0 0 8px}.facility-effect{font-size:11px;color:var(--lime);margin-bottom:12px;font-weight:600}.facility-levels{display:flex;gap:5px;margin-bottom:16px}.facility-levels i{flex:1;height:5px;background:#3b492f;border-radius:4px}.facility-levels i.complete{background:var(--lime)}.facility .budget-row{margin-top:auto;flex-wrap:wrap}.reference-teams{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.reference-team-card{padding:12px 14px;background:linear-gradient(135deg,#1f2c1e,#141e15);border:1px solid #30422e;border-radius:8px;font-size:11px;display:flex;gap:12px;align-items:center;transition:border-color .2s ease}.reference-team-card:hover{border-color:#5c7b46}.reference-rank{color:#81a45a;font-family:var(--display);font-size:18px;width:20px;flex-shrink:0}.club-crest-wrap{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center}.club-crest{width:30px;height:30px;object-fit:contain;display:block}.club-crest-fallback{display:none;font-size:10px;color:#81a45a;font-weight:700}.club-name{font-weight:500;color:#e1edd8;font-size:12px}.nav-item{padding-top:11px;padding-bottom:11px}
@media(max-width:1200px){.facility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand{font-size:21px}.arena-drawing{width:240px}.club-hero h2{font-size:40px}}
@media(max-width:980px){.brand{font-size:0}.club-columns{grid-template-columns:1fr}.club-hero{padding:24px}.arena-drawing{width:200px}.arena-roof{font-size:19px}.arena-facade span{width:24px}.reference-teams{grid-template-columns:1fr}}
@media(max-width:650px){.club-hero{flex-direction:column;align-items:flex-start}.club-hero-identity{flex-direction:column;align-items:flex-start;gap:14px}.club-hero-crest{width:64px;height:64px}.arena-drawing{width:240px;align-self:center;margin-bottom:10px}.facility-grid{grid-template-columns:1fr}.facility p{min-height:0}.sidebar{height:72px}.nav-item{font-size:6px;padding:7px 1px}.club-hero h2{font-size:36px}.club-tags span{font-size:8px}.facility .budget-row{flex-wrap:nowrap}}

.login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at top,#293a23,transparent 65%)}.login-shell .onboarding{width:min(100%,540px);padding:44px 38px}

.scene-container{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.scene-tabs{display:flex;gap:10px;background:#101d16;padding:6px;border-radius:10px;border:1px solid #2d4233;width:fit-content}
.scene-tab{background:transparent;border:0;color:#94ad91;font-size:13px;font-weight:600;padding:8px 18px;border-radius:8px;cursor:pointer;transition:all .2s ease}
.scene-tab:hover{color:#fff;background:#1b2d23}
.scene-tab.active{background:linear-gradient(135deg,#365029,#22391e);color:var(--lime);border:1px solid #638543;box-shadow:0 4px 12px #0006}

.scene-view{display:none}
.scene-view.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Campus Art (Zewnątrz) */
.campus-art{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 12px 36px #0008;background:#152219}
.campus-ground{width:100%;display:block}
.campus-buildings{position:absolute;inset:0}
.campus-object{position:absolute;background:none;border:0;padding:0;filter:drop-shadow(0 6px 8px #08160edd);cursor:pointer;transition:transform .2s ease,filter .2s ease;display:flex;flex-direction:column;align-items:center;text-align:center}
.campus-object img{width:100%;display:block}
.campus-object span{display:inline-block;background:#0e1e17f2;border:1px solid #729048;border-radius:6px;padding:3px 8px;color:#eaf5d6;font-size:10px;font-weight:500;white-space:nowrap;margin-top:-6px;box-shadow:0 4px 10px #0008;pointer-events:none;transition:border-color .2s,color .2s,background .2s}

/* Coordinates on Campus Ground */
.object-arena{width:36%;left:32%;top:18%;z-index:5}
.object-parking{width:22%;left:4%;top:58%;z-index:6}
.object-shop{width:17%;left:27%;top:56%;z-index:6}
.object-cafe{width:18%;left:4%;top:34%;z-index:4}
.object-hospitality{width:20%;left:74%;top:38%;z-index:4}
.object-beach_volleyball{width:22%;left:73%;top:62%;z-index:6}
.object-training_hall{width:22%;left:4%;top:8%;z-index:2}
.object-outdoor_gym{width:18%;left:27%;top:2%;z-index:2}
.object-running_track{width:24%;left:70%;top:4%;z-index:2}
.object-recovery_center{width:19%;left:48%;top:57%;z-index:6}
.object-club_hotel{width:18%;left:48%;top:2%;z-index:2}

/* Indoor Art (Wewnątrz hali) */
.indoor-art{position:relative;overflow:hidden;border-radius:12px;box-shadow:0 12px 36px #0008;background:#0c1611}
.indoor-ground{width:100%;display:block;filter:brightness(0.92)}
.indoor-layers{position:absolute;inset:0}
.indoor-object{position:absolute;background:none;border:0;padding:0;filter:drop-shadow(0 6px 12px #040d07ee);cursor:pointer;transition:transform .2s ease,filter .2s ease;display:flex;flex-direction:column;align-items:center;text-align:center}
.indoor-object img{width:100%;display:block}
.indoor-object span{display:inline-block;background:#09140ff2;border:1px solid #578a5e;border-radius:6px;padding:3px 8px;color:#eaf5d6;font-size:10px;font-weight:500;white-space:nowrap;margin-top:-6px;box-shadow:0 4px 10px #0008;pointer-events:none;transition:all .2s ease}

/* Coordinates in Indoor Arena */
.in-object-court_surface{width:46%;left:27%;top:44%;z-index:3}
.in-object-lighting{width:46%;left:27%;top:2%;z-index:4}
.in-object-net_system{width:26%;left:37%;top:36%;z-index:5}
.in-object-challenge_system{width:22%;left:73%;top:46%;z-index:6}
.in-object-screen{width:24%;left:38%;top:16%;z-index:6}
.in-object-locker_room{width:22%;left:4%;top:66%;z-index:7}
.in-object-tactics_room{width:22%;left:74%;top:66%;z-index:7}
.in-object-stands{width:23%;left:3%;top:24%;z-index:2}
.in-object-vip{width:23%;left:74%;top:20%;z-index:2}
.in-object-sound_system{width:20%;left:5%;top:4%;z-index:4}

.campus-object.unbuilt img,.indoor-object.unbuilt img{opacity:.35;filter:grayscale(1) brightness(.8)}
.campus-object:hover,.indoor-object:hover{transform:scale(1.06);filter:drop-shadow(0 0 14px #caf76b);z-index:15}
.campus-object:hover span,.indoor-object:hover span{border-color:var(--lime);color:#fff;background:#13271d}

.campus-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.campus-legend span{padding:6px 10px;border-radius:6px;font-size:11px;border:1px solid #3c4c34;cursor:pointer;transition:border-color .2s ease}
.campus-legend span:hover{border-color:var(--lime)}
.campus-legend .built-tag{color:var(--lime);border-color:#5c7844;background:#1e2a1b}
.campus-legend .plan-tag{color:#84967f;border-color:#2a3627;background:#151e16}

.scene-header-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.development-level-badge{background:linear-gradient(135deg,#1f3322,#122016);border:1px solid #578044;border-radius:10px;padding:6px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 12px #0006}
.dev-label{font-size:10px;font-weight:700;letter-spacing:1px;color:#9ebf96}
.dev-value{font-size:18px;font-family:var(--display);color:var(--lime);line-height:1}

.first-step-pulse{animation:pulseArena 2s infinite ease-in-out;z-index:20!important}
@keyframes pulseArena{0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px #caf76b88)}50%{transform:scale(1.05);filter:drop-shadow(0 0 20px #caf76b)}}
.pulse-tag{background:#2e4a21!important;border-color:var(--lime)!important;color:#ffffff!important;font-weight:700!important;box-shadow:0 0 14px #caf76bcc!important}
.first-step-highlight{background:#233a1e!important;border-color:#7da64e!important;color:#eaf7d5!important;font-weight:600}

.indoor-locked-overlay{position:absolute;inset:0;background:#06100ce6;backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;z-index:20}
.indoor-locked-box{max-width:440px;background:#142218;border:1px solid #5a7d45;border-radius:14px;padding:28px 24px;text-align:center;box-shadow:0 12px 32px #000c}
.lock-icon{font-size:36px;display:block;margin-bottom:10px}
.indoor-locked-box h3{font-size:22px;color:#ffffff;margin:0 0 8px}
.indoor-locked-box p{font-size:12px;color:#a4ba9e;line-height:1.5;margin:0 0 18px}

.facility-locked{opacity:.75;border-color:#2a362b}
.img-locked{filter:grayscale(1) brightness(.65)!important;opacity:.4!important}
.badge-locked{background:#231a1a!important;color:#e88a8a!important;border:1px solid #572d2d!important}
.badge-built{background:#1e2e1c!important;color:var(--lime)!important;border:1px solid #5c7844!important}
.badge-ready{background:#162b25!important;color:#85f0db!important;border:1px solid #366657!important}
.locked-tag{color:#8a6a6a;border-color:#422a2a;background:#1a1212}

.facility-subsections{display:flex;flex-direction:column;gap:32px;margin-bottom:24px}
.facility-section-title{font-size:20px;color:#cbf76b;margin:0 0 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #2d4233;padding-bottom:8px}

.facility-filter-tabs{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.facility-filter-btn{background:#152219;border:1px solid #354e3c;color:#a8c2ab;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}
.facility-filter-btn.active{background:#2a442e;color:var(--lime);border-color:#659150}

.facility-tier-preview{background:#111b15;border:1px solid #233628;border-radius:6px;padding:8px 10px;font-size:10px;color:#a4bda7;margin-bottom:12px;line-height:1.4}
.facility-tier-preview strong{color:#e8ffba;display:block;margin-bottom:2px}

.purchase-dialog{color:var(--white);background:#121a15;border:1px solid #748a54;border-radius:18px;padding:32px;width:min(1120px,96vw);max-height:94dvh;overflow:auto;box-shadow:0 24px 75px rgba(0,0,0,0.85)}
.purchase-dialog::backdrop{background:#050d0cdd;backdrop-filter:blur(8px)}
.purchase-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}
.facility-dialog-info{margin-top:16px;background:#14231a;border:1px solid #344d3b;border-radius:12px;padding:20px}
.facility-levels-desc{margin-top:12px}
.facility-levels-desc h4{font-size:12px;color:var(--lime);margin:0 0 8px;text-transform:uppercase;letter-spacing:1px}
.facility-levels-desc ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.facility-levels-desc li{font-size:11px;color:#8a9f8b;padding:6px 10px;background:#0d1812;border-radius:6px;border:1px solid #1c2b20}
.facility-levels-desc li.unlocked{color:#e2f2d5;border-color:#5c7844;background:#19291d}
.facility-levels-desc li strong{color:var(--lime)}

.asset-preview{background:radial-gradient(ellipse at center,#263827,#131e16);border-radius:12px;text-align:center;overflow:hidden;padding:16px 12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.asset-preview img{display:block;max-width:100%;max-height:340px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 10px 20px #0009)}
.asset-preview p{padding:8px 12px 12px;margin:0}

.campus-step-banner-wrap{position:absolute;inset:0;display:grid;place-items:center;padding:24px;z-index:10}
.campus-step-card{background:#0e1d14e6;border:2px solid #578044;border-radius:16px;padding:26px 32px;text-align:center;color:#fff;max-width:480px;backdrop-filter:blur(8px);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;box-shadow:0 16px 36px #000c;display:flex;flex-direction:column;align-items:center;gap:8px}
.campus-step-card:hover{transform:scale(1.03);border-color:var(--lime);box-shadow:0 20px 48px #caf76b40}
.step-badge{background:#23391e;border:1px solid #52753a;color:var(--lime);font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:1px}
.step-icon{font-size:42px;line-height:1;margin:4px 0}
.step-title{font-size:22px;font-family:var(--display);color:#ffffff;letter-spacing:.5px}
.step-desc{font-size:12px;color:#a9c4a7;line-height:1.45;margin-bottom:8px}
.step-btn{background:var(--lime);color:#0e1e12;font-weight:700;font-size:13px;padding:10px 22px;border-radius:8px;transition:background .2s ease;box-shadow:0 4px 14px #0006}
.campus-step-card:hover .step-btn{background:#e0ff8c}

.object-arena-integrated{width:38%;left:31%;top:15%;height:52%;z-index:5;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.arena-hotspot-zone{flex:1;width:100%;border-radius:12px;transition:background .2s ease,border .2s ease}
.built-hotspot-tag{display:inline-block;background:#0d1c15f2;border:1px solid #729048;border-radius:8px;padding:5px 12px;color:#eaf5d6;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px #0009;pointer-events:none;transition:all .2s ease}
.object-arena-integrated:hover .built-hotspot-tag{background:#1e3520;border-color:var(--lime);color:#ffffff;transform:translateY(-2px);box-shadow:0 6px 16px #caf76b4d}
.campus-ground-base{width:100%;display:block}
.campus-ground-arena-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:2}

/* OpenStreetMap Land Selection (Krok 1) */
.osm-land-section{display:flex;flex-direction:column;gap:14px;background:#101d16;border:1px solid #36502a;border-radius:14px;padding:20px;box-shadow:0 12px 32px #0009}
.osm-land-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.osm-land-header h3{font-size:22px;margin:4px 0 6px;color:#ffffff}
.osm-land-map{width:100%;height:380px;border-radius:12px;border:2px solid #4a6e35;overflow:hidden;box-shadow:inset 0 0 16px #0008;z-index:1;background:#0d1812}
.osm-location-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#182a1d;border:1px solid #4a6d36;border-radius:10px;padding:14px 18px;flex-wrap:wrap}
.osm-location-details{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.osm-loc-item{display:flex;flex-direction:column;gap:2px}
.osm-loc-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#92b58d;font-weight:700}
.osm-loc-val{font-size:15px;font-weight:600;color:#eaf7d8}
.osm-loc-coords{font-size:12px;color:#a3c29e;font-family:monospace}

@media(max-width:650px){.campus-object span,.indoor-object span{font-size:7px;padding:2px 4px;margin-top:-2px}.asset-preview img{max-height:220px}.scene-tabs{width:100%;justify-content:space-around}.scene-tab{padding:6px 10px;font-size:11px}.campus-step-card{padding:18px 20px}.step-title{font-size:18px}.step-desc{font-size:11px}.osm-land-map{height:280px}.osm-location-bar{flex-direction:column;align-items:stretch}.osm-location-details{flex-direction:column;align-items:flex-start;gap:10px}}

/* Club Reputation Widget */
.club-reputation-widget {
  background: linear-gradient(135deg, rgba(18, 30, 22, 0.96), rgba(10, 18, 13, 0.96));
  border: 1px solid #3c543a;
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 320px;
  max-width: 380px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.rep-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.rep-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #9dbb95;
  text-transform: uppercase;
}
.rep-status-pill {
  font-size: 10px;
  color: #d8eed2;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
}

.rep-main-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rep-score-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.rep-score-value {
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.5px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.rep-star-symbol {
  display: inline-block;
  color: inherit;
  font-size: 0.88em;
  line-height: 1;
  vertical-align: 0.04em;
  margin-right: 2px;
  filter: drop-shadow(0 0 4px currentColor);
}
.rep-tier-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.rep-thermo-scale-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rep-scale-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: #09120c;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: visible;
}
.rep-scale-bar {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #9F1239 0%, #DC2626 12.5%, #EA580C 25%, #F59E0B 37.5%, #22C55E 50%, #10B981 62.5%, #0EA5E9 75%, #EAB308 87.5%, #FFF4C2 100%);
  opacity: 0.95;
  transition: filter 0.5s ease;
}
.rep-scale-indicator {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 5;
}
.rep-indicator-arrow {
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px #000);
  animation: indicatorBounce 2s infinite ease-in-out;
}
@keyframes indicatorBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.rep-scale-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #7d967a;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0 2px;
}
.tick-label { white-space: nowrap; }
.tick-crit { color: #f43f5e; }
.tick-gold { color: #f59e0b; }
.tick-neg { color: #fb923c; }
.tick-zero { color: #34d399; font-weight: 700; }
.tick-sky { color: #38bdf8; }
.tick-pos { color: #fbbf24; }
.tick-star { color: #f8fafc; font-weight: 700; }

.rep-next-tier-box {
  background: rgba(10, 18, 13, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.rep-next-tier-box.completed {
  background: rgba(255, 215, 0, 0.06);
  border-color: rgba(255, 215, 0, 0.3);
}
.rep-next-tier-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rep-next-tier-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #8fa886;
  text-transform: uppercase;
}
.rep-next-tier-name {
  font-size: 11.5px;
  font-weight: 700;
}
.rep-next-tier-status {
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
}

.rep-footnote {
  font-size: 9px;
  color: #7b9477;
  margin: 8px 0 0;
  line-height: 1.3;
}

/* Dynamic Animation on Points Gain */
.rep-floating-gain-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  background: linear-gradient(135deg, #caf76b, #4ade80);
  color: #091a0c;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(202, 247, 107, 0.6);
  z-index: 20;
  animation: floatUpFade 3.2s ease forwards;
  pointer-events: none;
  letter-spacing: 0.5px;
}
.rep-floating-gain-badge.rep-loss-badge {
  background: linear-gradient(135deg, #ff6b81, #ef4444);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.6);
}
@keyframes floatUpFade {
  0% { opacity: 0; transform: translateY(12px) scale(0.8); }
  15% { opacity: 1; transform: translateY(0) scale(1.12); }
  30% { transform: translateY(-2px) scale(1); }
  80% { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.85); }
}

.score-bump {
  animation: repScoreBump 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes repScoreBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.32); color: #caf76b; text-shadow: 0 0 16px rgba(202, 247, 107, 0.8); }
  100% { transform: scale(1); }
}

.pulse-bar {
  animation: repBarPulse 1.6s ease;
}
@keyframes repBarPulse {
  0% { filter: brightness(1) drop-shadow(0 0 2px rgba(202, 247, 107, 0.2)); }
  50% { filter: brightness(1.7) drop-shadow(0 0 14px rgba(202, 247, 107, 0.9)); }
  100% { filter: brightness(1) drop-shadow(0 0 2px rgba(202, 247, 107, 0.2)); }
}

.rep-gain-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #caf76b;
  background: rgba(202, 247, 107, 0.12);
  border: 1px solid rgba(202, 247, 107, 0.35);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* Tiers Visual Themes */
.rep-critical {
  border-color: #e11d48;
  background: linear-gradient(135deg, rgba(80, 15, 25, 0.95), rgba(30, 5, 10, 0.95));
  box-shadow: 0 0 20px rgba(225, 29, 72, 0.35);
}
.rep-critical .rep-score-value { color: #ff4d6d; }
.rep-critical .rep-tier-badge { background: #4c0519; color: #ff4d6d; border: 1px solid #e11d48; }

.rep-warning {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(70, 20, 20, 0.95), rgba(30, 8, 8, 0.95));
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.3);
}
.rep-warning .rep-score-value { color: #f87171; }
.rep-warning .rep-tier-badge { background: #450a0a; color: #f87171; border: 1px solid #dc2626; }

.rep-deficit, .rep-negative {
  border-color: #f97316;
  background: linear-gradient(135deg, rgba(60, 25, 12, 0.95), rgba(25, 10, 5, 0.95));
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.25);
}
.rep-deficit .rep-score-value, .rep-negative .rep-score-value { color: #fb923c; }
.rep-deficit .rep-tier-badge, .rep-negative .rep-tier-badge { background: #431407; color: #fb923c; border: 1px solid #ea580c; }

.rep-caution {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(50, 35, 10, 0.95), rgba(22, 16, 5, 0.95));
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
}
.rep-caution .rep-score-value { color: #fbbf24; }
.rep-caution .rep-tier-badge { background: #451a03; color: #fbbf24; border: 1px solid #d97706; }

.rep-neutral {
  border-color: #34d399;
  background: linear-gradient(135deg, rgba(16, 42, 28, 0.95), rgba(10, 24, 16, 0.95));
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.2);
}
.rep-neutral .rep-score-value { color: #6ee7b7; }
.rep-neutral .rep-tier-badge { background: #064e3b; color: #6ee7b7; border: 1px solid #10b981; }

.rep-good {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 46, 32, 0.95), rgba(8, 26, 18, 0.95));
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.25);
}
.rep-good .rep-score-value { color: #86efac; }
.rep-good .rep-tier-badge { background: #064e3b; color: #86efac; border: 1px solid #059669; }

.rep-sky {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(14, 45, 66, 0.95), rgba(7, 24, 38, 0.95));
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.28);
}
.rep-sky .rep-score-value { color: #38bdf8; }
.rep-sky .rep-tier-badge { background: #082f49; color: #38bdf8; border: 1px solid #0284c7; }

.rep-positive {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(55, 42, 10, 0.95), rgba(25, 18, 5, 0.95));
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}
.rep-positive .rep-score-value { color: #fde047; }
.rep-positive .rep-tier-badge { background: #451a03; color: #fde047; border: 1px solid #f59e0b; }

.rep-stellar {
  border-color: #e0f2fe;
  background: linear-gradient(135deg, rgba(30, 48, 70, 0.95), rgba(14, 24, 38, 0.95));
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.4), inset 0 0 14px rgba(224, 242, 254, 0.2);
  animation: stellarGlow 3s infinite alternate;
}
@keyframes stellarGlow {
  0% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
  100% { box-shadow: 0 0 32px rgba(224, 242, 254, 0.6), inset 0 0 16px rgba(255, 255, 255, 0.3); }
}
.rep-stellar .rep-score-value { color: #ffffff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }
.rep-stellar .rep-tier-badge { background: #0f172a; color: #ffffff; border: 1px solid #e0f2fe; box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); }

@media (max-width: 980px) {
  .club-hero { flex-direction: column; align-items: stretch; }
  .club-reputation-widget { max-width: 100%; min-width: 0; width: 100%; margin-top: 10px; }
}

/* Facility Filter Bar & Completed Toggle */
.facility-filter-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: #101c15;
  border: 1px solid #283e2b;
  border-radius: 10px;
  padding: 8px 14px;
}

.facility-filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.facility-filter-btn {
  background: #17261b;
  border: 1px solid #334e38;
  color: #9ab497;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.facility-filter-btn:hover {
  background: #203525;
  color: #fff;
  border-color: #557e5a;
}

.facility-filter-btn.active {
  background: linear-gradient(135deg, #324c25, #20351b);
  color: var(--lime);
  border-color: #658c44;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.facility-completed-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #a4c0a1;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.facility-completed-checkbox-label:hover {
  background: #192b1e;
  color: #e2f0de;
}

.facility-completed-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--lime);
  cursor: pointer;
  margin: 0;
}

/* ==========================================================================
   BANK & LOAN SYSTEM STYLES
   ========================================================================== */
.bank-panel {
  border-left: 3px solid #ffaa40;
  background: linear-gradient(180deg, #151d2c 0%, #101622 100%);
}

.bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
}

@media (max-width: 768px) {
  .bank-grid {
    grid-template-columns: 1fr;
  }
}

.bank-summary-box,
.bank-actions-box {
  background: #0d131d;
  border: 1px solid #1c283d;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bank-summary-box h3,
.bank-actions-box h3 {
  margin: 0;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bank-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #182335;
  font-size: 13px;
  color: #8fa0ba;
}

.bank-stat-row:last-of-type {
  border-bottom: none;
}

.bank-stat-row strong {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.loan-packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.loan-package-btn {
  background: #141f30;
  border: 1px solid #253754;
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.18s ease;
  color: #fff;
}

.loan-package-btn:hover:not(:disabled) {
  background: #1e304d;
  border-color: #ffaa40;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 170, 64, 0.15);
}

.loan-package-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

.loan-package-btn .loan-amount {
  font-size: 15px;
  font-weight: 800;
  color: #ffc470;
}

.loan-package-btn .loan-rep-cost {
  font-size: 11px;
  font-weight: 700;
  color: #f28b82;
  background: rgba(242, 139, 130, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

.custom-loan-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.custom-loan-row input {
  flex: 1;
  background: #141f30;
  border: 1px solid #253754;
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

.custom-loan-row input:focus {
  outline: none;
  border-color: #ffaa40;
}

.bank-repay-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #111a26;
  border: 1px solid #23354d;
  border-radius: 8px;
  padding: 14px;
  margin-top: 6px;
}

.bank-repay-section h4 {
  margin: 0;
  font-size: 13px;
  color: #90d5ff;
}

.bank-warning-box {
  background: rgba(242, 139, 130, 0.1);
  border: 1px solid rgba(242, 139, 130, 0.3);
  color: #fca5a5;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
}

.badge-debt {
  background: #521c1a;
  color: #ff9b9b;
  border: 1px solid #7d2a27;
  font-weight: 700;
}

.text-debt {
  color: #f87171 !important;
}

.text-loan {
  color: #ffaa40 !important;
}

.badge-repaid {
  background: #1a4223;
  color: #86efac;
  border: 1px solid #2b6a38;
}

/* Modal kalkulatora pożyczki */
dialog.loan-modal-dialog {
  background: #101724;
  border: 1px solid #334b6e;
  border-radius: 18px;
  color: #fff;
  padding: 0;
  max-width: 900px;
  width: min(900px, 96vw);
  max-height: 94vh;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
  margin: auto;
}

dialog.loan-modal-dialog::backdrop {
  background: rgba(5, 9, 16, 0.88);
  backdrop-filter: blur(8px);
}

.loan-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid #1a273b;
  background: #141f30;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
}

.loan-modal-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.loan-modal-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media(max-width:700px){
  .loan-modal-presets {
    grid-template-columns: repeat(2, 1fr);
  }
}

.loan-preset-card {
  background: #141f30;
  border: 1px solid #253754;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #fff;
}

.loan-preset-card:hover:not(:disabled) {
  background: #1d2c44;
  border-color: #ffaa40;
}

.loan-preset-card.active {
  background: #203554;
  border-color: #ffaa40;
  box-shadow: 0 0 0 1px #ffaa40;
}

.loan-preset-card:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.loan-calc-result-box {
  background: #090e16;
  border: 1px solid #1e2c40;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   TOPBAR MINI STATS (REPUTATION & WALLET BALANCE)
   ========================================================================== */
.topbar-mini-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #141d17;
  border: 1px solid #28392a;
  border-radius: 6px;
  padding: 6px 12px;
  transition: all 0.15s ease;
  text-decoration: none;
  color: #fff;
}

.topbar-stat-item:hover {
  background: #1c2b21;
  border-color: var(--lime);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.topbar-stat-tag {
  font-size: 9px;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: #7b8e7c;
  text-transform: uppercase;
}

.topbar-stat-val {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0px;
}

.topbar-stat-val small {
  font-size: 10px;
  color: #8fa0ba;
}

.topbar-stat-icon {
  font-size: 13px;
}

.topbar-stat-val.ranking-pill-val {
  color: #fbbf24;
}

.topbar-stat-val.ranking-pill-val .topbar-stat-icon {
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}

.topbar-stat-divider {
  color: #314234;
  font-size: 12px;
  font-weight: 600;
}

.topbar-stat-warning {
  border-color: rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.08);
}

.topbar-stat-warning:hover {
  border-color: #fb923c;
  background: rgba(251, 146, 60, 0.15);
}

.topbar-stat-critical {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
  animation: pulse-stat-border 2s infinite ease-in-out;
}

.topbar-stat-critical:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.18);
}

.topbar-bank-quick-btn {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 1px solid #f87171;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  animation: pulse-bank-btn 1.6s infinite ease-in-out;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.topbar-bank-quick-btn:hover {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border-color: #fca5a5;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.7);
}

.topbar-bank-quick-btn .topbar-stat-icon {
  font-size: 14px;
}

@keyframes pulse-bank-btn {
  0%, 100% {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
    border-color: rgba(248, 113, 113, 0.7);
  }
  50% {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.85);
    border-color: #fca5a5;
  }
}

@keyframes pulse-stat-border {
  0%, 100% {
    border-color: rgba(239, 68, 68, 0.4);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.9);
  }
}

@media (max-width: 650px) {
  .topbar-stat-tag {
    display: none;
  }
  .topbar-stat-item {
    padding: 4px 8px;
    gap: 4px;
  }
  .topbar-stat-val {
    font-size: 11px;
  }
}

/* ==========================================================================
   TRANSACTION HISTORY: RESERVED / LOCKED FUNDS
   ========================================================================== */
.tx-hold-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(251, 191, 36, 0.08);
  border: 1px dashed rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  gap: 12px;
}

.tx-row-hold {
  background: rgba(251, 191, 36, 0.04) !important;
  border-left: 3px solid #fbbf24;
}

.tx-row-hold:hover {
  background: rgba(251, 191, 36, 0.08) !important;
}

.badge-hold {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.tx-hold-amount {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

/* Wallet / Financial transactions table styling */
.wallet-tx-table {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.wallet-tx-table th,
.wallet-tx-table td {
  padding: 12px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #293127;
}

.wallet-tx-table th.col-date,
.wallet-tx-table td.col-date {
  width: 135px;
  white-space: nowrap;
}

.wallet-tx-table th.col-op,
.wallet-tx-table td.col-op {
  width: auto;
  white-space: normal;
  word-break: break-word;
  line-height: 1.45;
}

.wallet-tx-table th.col-details,
.wallet-tx-table td.col-details {
  width: 160px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.wallet-tx-table th.col-round,
.wallet-tx-table td.col-round {
  width: 105px;
  white-space: nowrap;
}

.wallet-tx-table th.col-amount,
.wallet-tx-table td.col-amount {
  width: 135px;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
}

@media (max-width: 900px) {
  .wallet-tx-table {
    table-layout: auto;
  }
}

#club-staff-section {
  scroll-margin-top: 24px;
}

.club-opponent-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 6px;
  max-width: 100%;
  cursor: pointer;
}

.club-opponent-box:hover .club-opponent {
  color: var(--lime) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.club-opponent-crest {
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  background: #162619;
  border: 1px solid #456336;
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.club-opponent-box:hover .club-opponent-crest {
  transform: scale(1.1);
  border-color: var(--lime);
}

/* ==========================================================================
   MARKET MODULE & CONTRACTED PLAYERS STYLES
   ========================================================================== */
.player-card.contracted-card {
  border-color: rgba(255, 215, 0, 0.65) !important;
  background: linear-gradient(180deg, #182319 0%, #121812 100%) !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.12), inset 0 0 12px rgba(255, 215, 0, 0.05) !important;
  position: relative;
}

.player-card.contracted-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd700, #cbf76b, #ffd700);
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.player-card.contracted-card:hover {
  border-color: #ffd700 !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.25) !important;
}

.contract-badge {
  background: #272412;
  color: #ffd700;
  border: 1px solid #b8860b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

.market-page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.market-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.user-contracts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.contract-card-owned {
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.contract-card-owned:hover {
  border-color: #ffd700 !important;
}








/* High-contrast current value marker across the entire reputation gradient. */
.rep-scale-indicator{top:-10px}
.rep-indicator-arrow{display:grid;place-items:center;width:26px;height:26px;font-size:20px;line-height:1;color:#fff;background:#101913;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #101913,0 0 12px #ffffff88;text-shadow:none;filter:none;animation:none}
.rep-scale-ticks{padding-top:5px}

/* Mobile application shell and identity form. */
@media(max-width:650px){
 .sidebar{position:fixed;inset:auto 0 0;width:100%;height:auto;min-height:68px;padding:4px 8px calc(4px + env(safe-area-inset-bottom));z-index:20}
 .sidebar .brand,.sidebar .workspace-label,.sidebar .side-bottom{display:none}
 .sidebar nav{display:flex;flex-direction:row;justify-content:flex-start;gap:4px;margin:0;width:100%;overflow-x:auto;overscroll-behavior-x:contain}
 .sidebar .nav-item{display:flex;flex:0 0 72px;flex-direction:column;justify-content:center;gap:4px;margin:0;padding:8px 4px;font-size:10px;white-space:nowrap}
 .sidebar .nav-item>span{font-size:21px}.sidebar .nav-item i{display:none}
 .main-shell{margin-left:0;min-width:0}.main-shell>main{padding-bottom:calc(95px + env(safe-area-inset-bottom))}
 .main-shell .topbar{height:auto;min-height:110px;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px;letter-spacing:.4px}
 .topbar .topbar-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;min-width:0}
 .topbar .topbar-stat-divider{display:none}.topbar .topbar-stat-item{min-width:0;justify-content:center;margin:0;padding:8px 4px;font-size:11px}
 .topbar .topbar-stat-val{font-size:12px;white-space:nowrap}.topbar .topbar-stat-tag{display:none}
 .topbar .topbar-bank-quick-btn{grid-column:1/-1}
 .topbar .topright{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:10px;width:100%;min-width:0}
 .topbar .landing-user-badge{max-width:100%;min-width:0;justify-content:flex-start;overflow:hidden}
 .topbar .landing-user-badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .topbar .landing-user-crest{flex-shrink:0}.topbar .topbar-sim-btn{width:42px;height:42px;margin:0}
 .modal-backdrop{padding:12px;min-width:0}.modal-backdrop .onboarding{width:100%;min-width:0;max-width:100%;padding:22px 18px;max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}
 .onboarding h1,.onboarding p{overflow-wrap:anywhere}.onboarding form,.crest-creator-widget,.crest-preview-info{min-width:0;max-width:100%}
 .onboarding .crest-preview-section{flex-direction:column;align-items:stretch;gap:16px}
 .onboarding .crest-preview-container{align-self:center;max-width:100%}
 .onboarding .crest-action-bar{flex-wrap:wrap}.onboarding button{white-space:normal;max-width:100%}
 .onboarding input,.onboarding select{width:100%;min-width:0;box-sizing:border-box}
}
.squad-history-dialog{width:min(900px,94vw);max-width:94vw;max-height:90dvh;overflow:auto}
.squad-history-dialog th,.squad-history-dialog td{padding:10px 12px;text-align:left;white-space:normal}
.squad-history-dialog h3{font-size:21px;margin:20px 0 8px}
.squad-history-dialog table{width:100%;font-size:12px}

/* Mobile onboarding: one scroll surface, on the backdrop, never inside the card. */
@media(max-width:650px){
 html:has(.modal-backdrop .onboarding),body:has(.modal-backdrop .onboarding){touch-action:pan-y}
 .modal-backdrop:has(.onboarding){display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;padding: max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));}
 .modal-backdrop .onboarding{flex:0 0 auto;width:100%;max-width:520px;min-width:0;max-height:none!important;height:auto;overflow:visible!important;margin-block:auto;padding:24px 18px;touch-action:pan-y}
 .onboarding-bg-art{right:0;width:min(260px,100%);overflow:hidden}
 .onboarding-roadmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
 .onboarding-roadmap .roadmap-step{min-width:0;white-space:normal}
 .onboarding-roadmap .roadmap-connector{display:none}
 .onboarding-title{font-size:clamp(28px,8vw,40px);letter-spacing:-.5px}
 .onboarding-logo-wrap{height:110px;margin-bottom:20px}
 .onboarding .crest-preview-section{min-width:0;width:100%;box-sizing:border-box}
}

/* A single-column squad must scroll together; a sticky summary covers the court. */
@media(max-width:980px){
 .market-court-layout{grid-template-columns:minmax(0,1fr)}
 .market-court-layout>*,.tactical-court-panel{min-width:0}
 .market-court-layout .tactical-summary{position:static;top:auto;order:0;width:100%;min-width:0}
}