:root {
  --bg: #0a0a0f; --bg2: #111118; --bg3: #18181f; --bg4: #222230;
  --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14);
  --text: #eeeef5; --text2: #8888a8; --text3: #55556a;
  --accent: #f07020; --accent2: #ff8c40; --gold: #f5c842;
  --green: #2ecc71; --red: #e74c3c; --blue: #4a9eff; --purple: #a07bff;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --radius: 8px; --radius-lg: 12px;
  --sidebar-w: 200px; --topbar-h: 54px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;overflow:hidden;}
.page{display:none;height:100vh;flex-direction:column;overflow:hidden;}
.page.active{display:flex;}
.login-bg{flex:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 60% 60% at 20% 50%,rgba(240,112,32,.1) 0,transparent 70%),radial-gradient(ellipse 50% 50% at 80% 20%,rgba(74,158,255,.07) 0,transparent 60%),var(--bg);}
.login-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:2.5rem 2rem;width:100%;max-width:420px;}
.brand{text-align:center;margin-bottom:2rem;}
.brand-icon{font-size:3rem;margin-bottom:.5rem;}
.brand-title{font-family:var(--font-display);font-size:2.2rem;font-weight:800;letter-spacing:.06em;color:var(--text);}
.brand-sub{color:var(--text2);font-size:13px;margin-top:4px;}
.topbar{height:var(--topbar-h);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;flex-shrink:0;z-index:10;}
.topbar-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:.06em;margin-right:.75rem;}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px;}
.topbar-username{color:var(--text2);font-size:13px;}
.topbar-team{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--accent);letter-spacing:.05em;background:rgba(240,112,32,.1);padding:3px 10px;border-radius:20px;border:1px solid rgba(240,112,32,.2);}
.badge-role{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.1em;padding:3px 10px;border-radius:20px;}
.badge-role.commissioner{background:rgba(245,200,66,.1);color:var(--gold);border:1px solid rgba(245,200,66,.25);}
.badge-role.gm{background:rgba(74,158,255,.1);color:var(--blue);border:1px solid rgba(74,158,255,.25);}
.main-layout{display:flex;flex:1;overflow:hidden;}
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);padding:.75rem .5rem;display:flex;flex-direction:column;gap:2px;flex-shrink:0;}
.nav-item{width:100%;text-align:left;padding:8px 12px;border-radius:var(--radius);background:transparent;border:none;color:var(--text2);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:all .15s;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:var(--bg4);color:var(--text);font-weight:500;}
.content-area{flex:1;overflow-y:auto;padding:1.25rem 1.5rem;}
.tab-content{display:none;}
.tab-content.active{display:block;}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:11px;color:var(--text2);margin-bottom:4px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
input[type=text],input[type=email],input[type=password],input[type=number],select{width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);font-size:13px;outline:none;transition:border-color .15s;}
input:focus,select:focus{border-color:var(--accent);}
select option{background:var(--bg3);}
.btn-primary{padding:8px 18px;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;}
.btn-primary:hover{background:var(--accent2);}
.btn-secondary{padding:8px 16px;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text2);font-size:13px;cursor:pointer;transition:all .15s;}
.btn-secondary:hover{background:var(--bg3);color:var(--text);}
.btn-success{padding:8px 16px;background:#1a7a3a;border:none;border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.btn-success:hover{background:#1f9044;}
.btn-danger{padding:8px 14px;background:#7a1a1a;border:none;border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.btn-ghost{padding:6px 12px;background:transparent;border:1px solid var(--border2);border-radius:var(--radius);color:var(--text2);font-size:12px;cursor:pointer;}
.btn-ghost:hover{color:var(--text);background:var(--bg3);}
.full{width:100%;}
.error-msg{background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.3);color:var(--red);padding:8px 12px;border-radius:var(--radius);font-size:13px;margin-bottom:1rem;}
.success-msg{background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.25);color:var(--green);padding:8px 12px;border-radius:var(--radius);font-size:13px;margin-bottom:1rem;}
.page-title{font-family:var(--font-display);font-size:1.6rem;font-weight:700;letter-spacing:.04em;margin-bottom:1.25rem;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.5rem;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;text-align:center;}
.stat-num{font-family:var(--font-display);font-size:2rem;font-weight:700;}
.stat-label{font-size:11px;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:.05em;}
.section-block{margin-bottom:1.5rem;}
.section-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.75rem;}
.current-pick-banner,.current-pick-info{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:1rem 1.25rem;}
.recent-picks-list{display:flex;flex-direction:column;gap:5px;}
.pick-item{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;font-size:13px;}
.pick-num{font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--text3);min-width:28px;}
.pick-owner-name{font-weight:500;min-width:90px;}
.pick-player-name{flex:1;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1rem;align-items:center;}
.search-input{flex:1;min-width:180px;padding:7px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:13px;outline:none;}
.search-input:focus{border-color:var(--accent);}
.filter-pills{display:flex;gap:5px;flex-wrap:wrap;position:relative;z-index:1;}
.filter-pill{padding:4px 11px;border-radius:20px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:12px;cursor:pointer;transition:all .15s;}
.filter-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);}
.data-table{width:100%;border-collapse:collapse;}
.data-table th{background:var(--bg3);padding:8px 12px;text-align:left;font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);}
.data-table td{padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--bg3);}
.pos-badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:600;}
.pos-PG{background:rgba(74,158,255,.15);color:#4a9eff;}
.pos-SG{background:rgba(160,123,255,.15);color:#a07bff;}
.pos-SF{background:rgba(46,204,113,.15);color:#2ecc71;}
.pos-PF{background:rgba(245,200,66,.15);color:#f5c842;}
.pos-C{background:rgba(231,76,60,.15);color:#e74c3c;}
.ovr-badge{font-family:var(--font-display);font-size:1rem;font-weight:700;}
.ovr-elite{color:var(--gold);}
.ovr-star{color:var(--accent);}
.ovr-good{color:var(--blue);}
.ovr-avg{color:var(--text2);}
.status-badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:600;}
.status-available{background:rgba(46,204,113,.12);color:var(--green);}
.status-drafted{background:rgba(231,76,60,.1);color:var(--red);}
.status-fa{background:rgba(245,200,66,.1);color:var(--gold);}
.player-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;}
.player-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.85rem 1rem;cursor:pointer;transition:all .15s;position:relative;}
.player-card:hover{border-color:var(--accent);background:var(--bg3);}
.player-card.drafted{opacity:.32;pointer-events:none;}
.player-card.in-watchlist{border-color:rgba(160,123,255,.35);}
.player-card .player-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px;}
.player-card .player-team{font-size:11px;color:var(--text2);margin-bottom:7px;}
.player-card .player-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.player-card .player-ratings{display:flex;gap:14px;font-size:12px;color:var(--text2);}
.player-card .player-ratings span strong{color:var(--text);font-family:var(--font-display);font-size:.95rem;}
.drafted-label{position:absolute;top:6px;right:6px;font-size:9px;font-weight:700;background:rgba(231,76,60,.15);color:var(--red);padding:2px 5px;border-radius:4px;}
.watchlist-star{position:absolute;top:6px;right:8px;font-size:15px;cursor:pointer;color:var(--text3);transition:color .15s;pointer-events:all;}
.watchlist-star.active{color:var(--gold);}
.card-actions{display:flex;gap:5px;margin-top:8px;}
.card-actions button{flex:1;padding:5px;font-size:11px;border-radius:var(--radius);border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;transition:all .15s;}
.draft-btn{background:rgba(240,112,32,.08)!important;color:var(--accent)!important;border-color:rgba(240,112,32,.25)!important;}
.draft-btn:hover{background:var(--accent)!important;color:#fff!important;}
.draft-board-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:8px;}
.draft-controls{display:flex;gap:8px;}
.draft-board-grid{display:grid;gap:5px;}
.draft-cell{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:7px 8px;min-height:64px;display:flex;flex-direction:column;}
.draft-cell .cell-header{font-size:10px;color:var(--text3);margin-bottom:3px;display:flex;justify-content:space-between;}
.draft-cell .cell-player{font-size:12px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.draft-cell.current-turn{border-color:var(--accent);background:rgba(240,112,32,.05);}
.draft-cell.empty{border-style:dashed;}
.gm-draft-layout{display:grid;grid-template-columns:1fr 270px;gap:1rem;}
.draft-status-bar{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:10px;font-size:13px;flex-wrap:wrap;}
.my-turn-banner{background:rgba(240,112,32,.07);border:1px solid rgba(240,112,32,.3);border-radius:var(--radius-lg);padding:.9rem 1.25rem;display:flex;align-items:center;gap:12px;margin-bottom:1rem;font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--accent);letter-spacing:.05em;}
.turn-pulse{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
.timer-display{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem 1rem;display:flex;align-items:center;gap:10px;margin-bottom:1rem;}
.timer-label{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.timer-value{font-family:var(--font-display);font-size:1.8rem;font-weight:700;}
.timer-value.urgent{color:var(--red);animation:pulse .5s infinite;}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;}
.settings-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;}
.settings-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:1rem;}
.hint-text{font-size:12px;color:var(--text3);margin-bottom:.75rem;}
.form-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:.75rem;}
.form-row input{flex:1;min-width:120px;}
.draft-order-list{display:flex;flex-direction:column;gap:4px;max-height:350px;overflow-y:auto;}
.order-item{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;cursor:grab;user-select:none;}
.order-item:active{opacity:.7;}
.order-num{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--text3);min-width:22px;}
.order-name{flex:1;font-size:13px;}
.order-gm{font-size:11px;color:var(--accent);}
.drag-handle{color:var(--text3);font-size:14px;}
.gm-user-list{display:flex;flex-direction:column;gap:6px;margin-bottom:.75rem;max-height:220px;overflow-y:auto;}
.gm-user-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg3);border-radius:var(--radius);}
.gm-user-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--bg4);color:var(--accent);flex-shrink:0;}
.gm-user-info{flex:1;}
.gm-user-name{font-size:13px;font-weight:500;}
.gm-user-email{font-size:11px;color:var(--text3);}
.gm-teams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.gm-team-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;}
.gm-team-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;}
.gm-team-title{font-family:var(--font-display);font-size:1rem;font-weight:700;}
.gm-team-players{display:flex;flex-direction:column;gap:3px;max-height:160px;overflow-y:auto;}
.gm-team-player{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);padding:2px 0;}
.my-team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px;}
.my-team-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.85rem 1rem;}
.my-team-round{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:1000;display:flex;align-items:center;justify-content:center;}
.modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:1.5rem;min-width:300px;max-width:380px;width:100%;position:relative;z-index:1001;}
.modal-player-header{background:var(--bg3);border-radius:var(--radius);padding:1rem;margin-bottom:1rem;}
.modal-player-header .mname{font-size:1.1rem;font-weight:600;margin-bottom:4px;}
.modal-player-header .mmeta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text2);}
.modal-question{font-size:13px;color:var(--text2);margin-bottom:1rem;}
.modal-actions{display:flex;flex-direction:column;gap:8px;}
.login-hint{text-align:center;color:var(--text3);font-size:12px;margin-top:1rem;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
@media(max-width:768px){.sidebar{display:none;}.stat-grid{grid-template-columns:repeat(2,1fr);}.gm-draft-layout{grid-template-columns:1fr;}.gm-right-panel{display:none;}}


/* ===== MOBILE / TABLET RESPONSIVE ===== */

.board-wrapper {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.board-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
  width:100%;
}

.players-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}

.player-card {
  width:100%;
  min-width:0;
}

button {
  min-height:44px;
}

input,
select,
textarea {
  font-size:16px;
}

@media (max-width: 768px) {

  body {
    padding:8px;
  }

  .players-grid {
    grid-template-columns:1fr;
    gap:10px;
  }

  .board-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .player-card {
    padding:10px;
    border-radius:12px;
  }

  .player-name {
    font-size:14px;
  }

  .player-ratings {
    font-size:12px;
  }

  .topbar,
  .toolbar,
  .filters {
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  button,
  input,
  select {
    width:100%;
  }

  .modal {
    width:95vw;
    max-height:90vh;
    overflow:auto;
  }

  table {
    font-size:12px;
  }
}


/* ===== iPhone FIXES ===== */

.topbar,
.header,
.navbar {
  position:relative;
  z-index:50;
}

select {
  position:relative;
  z-index:9999;
  background:#111;
}

.card,
.panel,
.status-card {
  overflow:visible !important;
}

@media (max-width:768px){

  .topbar,
  .header {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px;
  }

  .topbar select,
  .topbar button,
  .topbar input {
    width:100%;
  }

  .topbar > * {
    min-width:0;
  }

  .status-card {
    margin-top:10px;
  }

  .player-card {
    overflow:hidden;
  }

  body {
    overflow-x:hidden;
  }
}


/* ===== iOS SAFARI FINAL FIX ===== */

html, body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.topbar,
.header,
.toolbar,
.controls {
  overflow:visible !important;
  position:relative;
  z-index:1000;
}

select,
.dropdown,
.team-select {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:99999 !important;
  appearance:auto !important;
  -webkit-appearance:menulist !important;
  background:#161616 !important;
  color:white !important;
}

@media (max-width:768px){

  .topbar {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:stretch !important;
    width:100% !important;
  }

  .topbar > * {
    width:100% !important;
    max-width:100% !important;
  }

  select {
    min-height:48px !important;
    font-size:16px !important;
    padding:12px !important;
  }

  button {
    min-height:48px !important;
  }

  .status-card,
  .panel,
  .card {
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .players-grid {
    display:flex !important;
    flex-direction:column !important;
  }

  .player-card {
    width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ===== POPUP TURNO ===== */
@keyframes fadeIn  { from{opacity:0}           to{opacity:1} }
@keyframes popIn   { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }

/* ===== MOBILE NAV SPACING ===== */
@media (max-width:768px) {
  .content-area { padding-bottom: 72px !important; }
  .sidebar { display: none !important; }

  /* Topbar compacto */
  .topbar {
    flex-wrap: nowrap !important;
    padding: 0 .75rem !important;
    height: 48px !important;
    flex-direction: row !important;
    gap: 6px !important;
  }
  .topbar-left { gap: 6px !important; }
  .topbar-right { gap: 6px !important; }
  .topbar-username { display: none !important; }
  .topbar-team { font-size:.75rem !important; padding: 2px 7px !important; }
  .topbar-logo { font-size:.9rem !important; }
  .badge-role { font-size:.6rem !important; padding: 2px 7px !important; }

  /* Cards en iPhone */
  .player-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .player-card { padding: .65rem .75rem !important; }
  .player-card .player-name { font-size: 12px !important; }

  /* Layout draft */
  .gm-draft-layout { grid-template-columns: 1fr !important; }
  .gm-right-panel { display: block !important; }

  /* Draft board scroll */
  .draft-board-grid { min-width: 600px; }
  .draft-board-header { flex-direction: column; align-items: flex-start; }
  .draft-controls { flex-wrap: wrap; }

  /* Settings */
  .settings-grid { grid-template-columns: 1fr !important; }

  /* Modal */
  .modal-box { max-width: 94vw !important; margin: 1rem !important; }

  /* Stat grid */
  .stat-grid { grid-template-columns: repeat(2,1fr) !important; }
}