@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap');

.gsm-wrap{font-family:'Rubik',sans-serif;color:#fff;width:100%;box-sizing:border-box;}
.gsm-wrap *,.gsm-wrap *::before,.gsm-wrap *::after{box-sizing:border-box;margin:0;padding:0;}

/* FILTERS */
.gsm-filters{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.gsm-filters-left{flex:1;min-width:220px;}
.gsm-filters-right{display:flex;gap:10px;flex-wrap:wrap;}
.gsm-search-box{position:relative;width:100%;max-width:360px;}
.gsm-si{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;}
.gsm-search{width:100%;padding:13px 16px 13px 40px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:#fff;font-family:'Rubik',sans-serif;font-size:13px;outline:none;transition:border-color .3s,box-shadow .3s;}
.gsm-search::placeholder{color:rgba(255,255,255,.2);}
.gsm-search:focus{border-color:#b2292e;box-shadow:0 0 0 3px rgba(178,41,46,.08);}
.gsm-sel{padding:13px 36px 13px 14px;background:rgba(255,255,255,.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center no-repeat;border:1px solid rgba(255,255,255,.07);border-radius:6px;color:#fff;font-family:'Rubik',sans-serif;font-size:13px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;min-width:175px;transition:border-color .3s;}
.gsm-sel:focus{border-color:#b2292e;}
.gsm-sel option{background:#111;color:#fff;}

/* === GRID TABLE === */
.gsm-grid-wrap{border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.01);}

.gsm-grid{
  display:grid;
  grid-template-columns: 48px 1.8fr 170px 1fr 1.1fr 90px 44px;
  align-items:center;
}

/* Header */
.gsm-grid-header{background:linear-gradient(90deg,rgba(178,41,46,.06),rgba(178,41,46,.02));border-bottom:1px solid rgba(178,41,46,.15);}
.gsm-gh{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.3);padding:16px 10px;white-space:nowrap;}

/* Row */
.gsm-grid-row{border-bottom:1px solid rgba(255,255,255,.03);transition:background .3s;position:relative;animation:gsmRowIn .5s cubic-bezier(.16,1,.3,1) calc(var(--ri,0)*.04s) both;}
.gsm-grid-row::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:#b2292e;transform:scaleY(0);transition:transform .35s cubic-bezier(.16,1,.3,1);}
.gsm-grid-row:hover{background:rgba(178,41,46,.04);}
.gsm-grid-row:hover::before{transform:scaleY(1);}
.gsm-grid-row:last-child{border-bottom:none;}
@keyframes gsmRowIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Cells */
.gsm-gc{padding:14px 10px;font-size:13px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* # */
.gsm-gc-num{text-align:center;}
.gsm-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:rgba(178,41,46,.06);border:1px solid rgba(178,41,46,.1);font-weight:800;font-size:13px;color:rgba(178,41,46,.6);transition:all .3s;}
.gsm-grid-row:hover .gsm-num{background:#b2292e;color:#fff;border-color:#b2292e;box-shadow:0 0 16px rgba(178,41,46,.25);}

/* Player name */
.gsm-gc-name{overflow:visible;white-space:normal;}
.gsm-pc{display:flex;align-items:center;gap:12px;}
.gsm-pt{position:relative;width:40px;height:40px;flex-shrink:0;}
.gsm-pt img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.06);transition:border-color .3s,box-shadow .3s;}
.gsm-grid-row:hover .gsm-pt img{border-color:rgba(178,41,46,.4);box-shadow:0 0 14px rgba(178,41,46,.15);}
.gsm-pd{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;border:2px solid #0d0d0d;font-style:normal;}
.gsm-pd-forward{background:#e74c3c;}
.gsm-pd-midfielder{background:#f39c12;}
.gsm-pd-defender{background:#3498db;}
.gsm-pd-goalkeeper{background:#27ae60;}
.gsm-pn{font-weight:700;font-size:14px;color:#fff;transition:color .3s;line-height:1.3;max-width:170px;}
.gsm-grid-row:hover .gsm-pn{color:#b2292e;}

/* Position badge */
.gsm-gc-pos{overflow:visible;white-space:normal;}
.gsm-pb{display:inline-block;padding:4px 9px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.5px;line-height:1.4;white-space:normal;max-width:160px;}
.gsm-pb-forward{background:rgba(231,76,60,.1);color:#e74c3c;border:1px solid rgba(231,76,60,.15);}
.gsm-pb-midfielder{background:rgba(243,156,18,.1);color:#f39c12;border:1px solid rgba(243,156,18,.15);}
.gsm-pb-defender{background:rgba(52,152,219,.1);color:#3498db;border:1px solid rgba(52,152,219,.15);}
.gsm-pb-goalkeeper{background:rgba(39,174,96,.1);color:#27ae60;border:1px solid rgba(39,174,96,.15);}

/* Secondary positions */
.gsm-gc-sec{font-size:12px;color:rgba(255,255,255,.35);white-space:normal;line-height:1.4;}

/* Club */
.gsm-gc-club{font-weight:600;font-size:13px;color:rgba(255,255,255,.6);white-space:normal;line-height:1.4;}

/* Year / Age */
.gsm-gc-year{text-align:center;white-space:nowrap;}
.gsm-year-val{font-weight:700;font-size:14px;color:rgba(255,255,255,.8);}
.gsm-age-val{font-size:11px;color:rgba(255,255,255,.3);}

/* Toggle button */
.gsm-gc-toggle{text-align:center;overflow:visible;}
.gsm-toggle-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.3);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:10px;transition:all .3s;display:inline-flex;align-items:center;justify-content:center;}
.gsm-toggle-btn:hover{background:rgba(178,41,46,.12);border-color:rgba(178,41,46,.3);color:#b2292e;}
.gsm-toggle-btn.gsm-toggle-open{background:rgba(178,41,46,.1);border-color:rgba(178,41,46,.25);color:#b2292e;}

/* === DETAIL ROW === */
.gsm-detail-row{border-bottom:1px solid rgba(255,255,255,.03);overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1),opacity .3s;}
.gsm-detail-hidden{display:none;}
.gsm-detail-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:20px 60px 24px 60px;background:rgba(178,41,46,.02);border-top:1px solid rgba(255,255,255,.04);}

.gsm-di-section{padding:14px 16px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);}
.gsm-di-section p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;margin-top:6px;}
.gsm-di-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.25);}

.gsm-di-green{border-color:rgba(39,174,96,.15);background:rgba(39,174,96,.04);}
.gsm-di-green .gsm-di-label{color:rgba(39,174,96,.6);}
.gsm-di-green p{color:rgba(255,255,255,.65);}

/* Fortalezas pills */
.gsm-di-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.gsm-di-tag{display:inline-block;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:600;background:rgba(39,174,96,.07);border:1px solid rgba(39,174,96,.18);color:rgba(39,174,96,.8);letter-spacing:.2px;line-height:1.4;}

.gsm-di-orange{border-color:rgba(243,156,18,.15);background:rgba(243,156,18,.04);}
.gsm-di-orange .gsm-di-label{color:rgba(243,156,18,.7);}
.gsm-di-orange p{color:rgba(255,255,255,.65);}

.gsm-di-blue{border-color:rgba(52,152,219,.15);background:rgba(52,152,219,.04);}
.gsm-di-blue .gsm-di-label{color:rgba(52,152,219,.7);}
.gsm-di-blue p{color:rgba(255,255,255,.65);}

/* Hidden (filtered out) */
.gsm-row-hidden{display:none!important;}

/* PAGINATION */
.gsm-pag{display:flex;align-items:center;justify-content:space-between;padding:20px 4px 0;flex-wrap:wrap;gap:16px;}
.gsm-pag-info{font-size:12px;color:rgba(255,255,255,.2);letter-spacing:1px;font-weight:500;}
.gsm-pag-btns{display:flex;align-items:center;gap:6px;}
.gsm-pag-btn,.gsm-pag-n{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 14px;border-radius:6px;font-family:'Rubik',sans-serif;font-size:13px;font-weight:600;text-decoration:none;transition:all .3s;color:rgba(255,255,255,.4);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}
.gsm-pag-btn:hover,.gsm-pag-n:hover{background:rgba(178,41,46,.08);border-color:rgba(178,41,46,.2);color:#fff;}
.gsm-pag-n.active{background:#b2292e;border-color:#b2292e;color:#fff;box-shadow:0 0 20px rgba(178,41,46,.25);}
.gsm-pag-d{color:rgba(255,255,255,.15);font-size:16px;padding:0 4px;}

/* FOOTER */
.gsm-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 4px 0;font-size:11px;color:rgba(255,255,255,.15);}
.gsm-foot-count{font-weight:600;letter-spacing:1px;}
.gsm-foot-brand{letter-spacing:2px;text-transform:uppercase;font-size:9px;}

.gsm-no-players{text-align:center;padding:80px 24px;font-size:15px;color:rgba(255,255,255,.25);}

/* RESPONSIVE */
@media(max-width:1100px){
  .gsm-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .gsm-grid{min-width:860px;}
  .gsm-detail-inner{padding:20px 16px 24px;}
}
@media(max-width:768px){
  .gsm-filters{flex-direction:column;align-items:stretch;}
  .gsm-filters-left{min-width:unset;}
  .gsm-search-box{max-width:100%;}
  .gsm-filters-right{width:100%;}
  .gsm-sel{flex:1;min-width:0;}
  .gsm-pag{flex-direction:column;align-items:center;}
}
@media(max-width:480px){
  .gsm-foot{flex-direction:column;gap:6px;text-align:center;}
  .gsm-pag-btn,.gsm-pag-n{min-width:34px;height:34px;font-size:12px;padding:0 10px;}
}