/* Responsive layer: loaded last on every page (player + admin) */
img{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}

/* ---------- large desktops ---------- */
@media(min-width:1500px){
  .container{width:min(1280px,calc(100% - 80px))}
  .site-header{padding:0 max(20px,calc((100% - 1280px)/2))}
  .event-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- laptops / small desktops ---------- */
@media(max-width:1100px){
  .event-grid{grid-template-columns:repeat(2,1fr)}
  .steps{gap:14px}
}

/* ---------- tablets ---------- */
@media(max-width:900px){
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;white-space:nowrap}
  .wallet-grid,.admin-grid{grid-template-columns:1fr!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-head{flex-wrap:wrap}
  .section-heading{flex-wrap:wrap;gap:6px}
  .steps{grid-template-columns:1fr}
  .cta-band h2{font-size:25px}
}

/* ---------- phones ---------- */
@media(max-width:700px){
  .site-header{height:auto;flex-wrap:wrap;padding:10px 14px 0;gap:0;align-items:center}
  .site-header .brand{padding-bottom:8px}
  .site-header nav{order:3;width:100%;gap:4px;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav a{flex:0 0 auto;white-space:nowrap;font-size:13px;padding:10px 12px;min-height:42px;display:inline-flex;align-items:center;border-radius:10px}
  .site-header nav .nav-cta{margin-left:auto;padding:10px 16px}
  .site-header::after{height:2px}

  /* category chips: one swipeable row instead of a wall of buttons */
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:14px -14px 18px;padding:2px 14px 8px;scroll-snap-type:x proximity;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;white-space:nowrap;padding:10px 16px;font-size:14px;scroll-snap-align:start}

  .hero{padding:20px 0 22px}
  .hero h1{font-size:clamp(34px,10vw,46px);letter-spacing:-1px}
  .hero-copy>p{font-size:16px}
  .hero-actions{flex-direction:column}
  .hero-actions .button{width:100%;min-height:50px;font-size:15px}
  .win-demo{display:flex;flex-wrap:wrap;gap:6px 10px}
  .trust-strip{grid-template-columns:1fr 1fr;gap:10px}
  .trust-strip b{font-size:18px}
  .banner{margin-left:-6px;margin-right:-6px;border-radius:14px}

  .event-grid{grid-template-columns:1fr}
  .event-card{min-height:0;padding:18px}
  .event-card h3{font-size:18px}
  .event-card p{font-size:14px}
  .event-meta{font-size:12px}
  .card-link{font-size:14px;padding:6px 0}
  button.odds-pick,.odds-row span{min-height:50px;display:flex;align-items:center;justify-content:space-between;font-size:15px}

  .stats-grid{grid-template-columns:1fr}
  .stat-card strong{font-size:26px}
  .auth-wrap{padding:24px 0}
  .auth-card{padding:22px}
  .prediction-wrap{margin:20px auto}
  .prediction-card{padding:20px}
  .choice-form{grid-template-columns:1fr}
  .wallet-balance{width:100%}
  .dashboard-head h1{font-size:30px}

  /* forms: 16px stops iOS zooming in on focus, 48px is a comfortable tap height */
  input,select,textarea{font-size:16px!important}
  .auth-card input,.admin-form input,.admin-form select,.admin-form textarea,.stake-form input{min-height:48px}
  .button{min-height:46px}

  /* bet slip becomes a bottom sheet */
  .bet-slip{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:18px 18px 0 0;border-width:1px 0 0;max-height:68vh;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
  .slip-foot{flex-direction:column;align-items:stretch;text-align:left}
  .slip-foot>span{display:flex;justify-content:space-between}
  .slip-foot button{min-height:50px;font-size:16px}
  .slip-row{grid-template-columns:1fr 110px 36px;gap:8px}
  .slip-remove{min-width:36px;min-height:36px}
  body:has(.bet-slip:not([hidden])) .site-footer{padding-bottom:230px}

  /* wide tables scroll inside their own box; the page itself never does */
  .table-wrap{-webkit-overflow-scrolling:touch}
  .admin-event{flex-direction:column;align-items:flex-start;gap:8px}
  .admin-toast{left:12px;right:12px;top:auto;bottom:16px;max-width:none}
  .user-table input{width:100%;min-width:120px}
  .stat-row div{flex:1 1 140px}

  .pay-box{padding:22px 18px}
  .cta-band{margin-top:40px}
  .cta-band .button{width:100%}
  .site-footer{padding:22px 16px;margin-top:40px}
}

@media(max-width:480px){
  .site-header nav{gap:0;justify-content:space-between}
  .site-header nav a{font-size:12.5px;padding:10px 7px}
  .site-header nav .nav-cta{padding:10px 12px;margin-left:4px}
}
/* ---------- very small phones ---------- */
@media(max-width:380px){
  .brand{font-size:11px}
  .brand-mark{width:30px;height:30px;font-size:17px}
  .site-header nav a{font-size:12px;padding:10px 5px}
  .site-header nav .nav-cta{padding:10px 9px}
}
@media(max-width:340px){
  .trust-strip{grid-template-columns:1fr}
}

/* ---------- touch devices: no sticky hover, bigger targets ---------- */
@media(pointer:coarse){
  .site-header nav a,.filter,.card-link,.back-link{min-height:44px;display:inline-flex;align-items:center}
}
@media(hover:none){
  .event-card:hover,.banner:hover{transform:none}
  .button-primary:hover{transform:none}
}

/* ---------- short landscape phones ---------- */
@media(max-height:480px) and (orientation:landscape){
  .site-header{position:static}
  .bet-slip{max-height:85vh}
  .pay-modal{align-items:flex-start;overflow:auto}
}

/* ---------- keyboard focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold,#ffc72c);outline-offset:2px}

/* ================= ADMIN CONSOLE ================= */
.call-link{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--cyan)}
.resolve-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:900px){
  .admin-body .admin-grid{grid-template-columns:1fr!important}
  .admin-body .user-table{min-width:0}
}
@media(max-width:700px){
  body.admin-body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body.admin-body .site-header{position:sticky;height:58px;padding:0 14px;flex-wrap:nowrap;backdrop-filter:none}
  body.admin-body .site-header .brand{padding:0}

  /* tabs move to a bottom bar: always under the thumb */
  body.admin-body .admin-header nav{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;z-index:60;order:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:0;padding:0 0 env(safe-area-inset-bottom);overflow:visible;
    background:#1a1230;border-top:1px solid var(--purple)}
  body.admin-body .admin-header nav a,body.admin-body .admin-header nav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;padding:6px 2px;margin:0;
    border:0;border-radius:0;background:none;color:var(--muted);font:600 11px/1.2 'DM Sans';text-align:center;white-space:normal;box-shadow:none}
  body.admin-body .admin-header nav a.active{color:var(--gold);background:#ffffff0d}
  body.admin-body .admin-header nav .nav-cta{background:none;color:var(--red);padding:6px 2px}
  body.admin-body .admin-header nav .badge{position:absolute;margin:-30px -34px 0 0}
  body.admin-body .admin-header nav a{position:relative}
  body.admin-body .admin-toast{left:10px;right:10px;top:68px;bottom:auto}

  /* users table -> one card per user */
  .user-table,.user-table tbody,.user-table tr,.user-table td{display:block;width:100%}
  .user-table thead{display:none}
  .user-table tr{margin:0 0 12px;padding:6px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
  .user-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;text-align:right;word-break:break-word}
  .user-table td::before{content:attr(data-label);flex:0 0 auto;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;text-align:left}
  .user-table td.u-name{font:700 17px 'Space Grotesk';color:var(--gold)}
  .user-table td.u-reset{display:block;text-align:left}
  .user-table td.u-reset::before{display:block;margin-bottom:6px}
  .user-table td.u-reset form{display:flex;gap:8px}
  .user-table td.u-reset input{flex:1;min-width:0}
  .admin-body .table-wrap{border:0;padding:0;background:none}

  /* deposits: big, safe tap targets */
  .deposit-item .resolve-form{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .admin-body .resolve-form .button,.admin-body .resolve-form select{min-height:50px;font-size:15px}
  .admin-body .resolve-form select{width:100%}
  .admin-body .admin-event>div{width:100%}
  .admin-body .admin-event small{line-height:1.6}
  .admin-body .media-edit{width:100%}
  .admin-body .dashboard-head h1{font-size:28px}
}

/* admin housekeeping controls */
.admin-body{overflow-x:hidden}
.media-edit summary,.done-events>summary{display:flex;align-items:center;min-height:44px}
.media-edit input:not([type=file]),.media-edit select,.media-edit textarea,.admin-toolbar input,.admin-toolbar select,.admin-toolbar .button{min-height:44px;width:100%;box-sizing:border-box}
.chip-row .chip{min-height:44px;display:inline-flex;align-items:center;padding-inline:16px}
.pager .button,.admin-event form .button{min-height:44px}
@media(min-width:769px){.admin-toolbar input,.admin-toolbar select,.admin-toolbar .button{width:auto}.chip-row .chip{min-height:36px}}

.admin-body .admin-grid{grid-template-columns:minmax(0,1fr)!important}
.admin-body .admin-form,.admin-body .admin-list{min-width:0;max-width:100%;box-sizing:border-box}
.admin-body .admin-form input,.admin-body .admin-form select,.admin-body .admin-form textarea{max-width:100%;box-sizing:border-box}

@media(max-width:768px){.fin-table thead{display:none}.fin-table,.fin-table tbody,.fin-table tr,.fin-table td{display:block;width:100%;box-sizing:border-box}.fin-table tr{border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:6px 10px}.fin-table td{display:flex;justify-content:space-between;text-align:right!important;border:0;padding:6px 0}.fin-table td:before{content:attr(data-label);color:var(--muted);text-align:left;padding-right:12px}.fin-table .bar{display:none}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fin-list li{flex-direction:column;gap:2px}.fin-list strong{text-align:left}}
@media(max-width:380px){.kpi-grid{grid-template-columns:minmax(0,1fr)}}

@media(max-width:768px){.admin-body .fin-table{min-width:0!important}.admin-body .table-wrap{overflow-x:visible}}

.fin-two{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}.fin-two>section{min-width:0}

@media(max-width:768px){.card-link{min-height:44px;display:inline-flex;align-items:center}}

/* touch devices (phones and tablets, any width) */
@media(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px}.site-header nav a,.site-header nav button{min-height:44px;display:inline-flex;align-items:center}.site-header .brand{min-height:44px}.card-link{min-height:44px;display:inline-flex;align-items:center}.site-footer a,.footer a{min-height:44px;display:inline-flex;align-items:center}}

/* collapsible bet slip */
.slip-head [data-toggle]{display:none}
@media(max-width:768px){.slip-head [data-toggle]{display:inline-flex;align-items:center;min-height:36px}.slip-head{cursor:pointer;flex-wrap:wrap;gap:8px}.bet-slip.collapsed{max-height:none;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}.bet-slip.collapsed .slip-list,.bet-slip.collapsed .slip-foot .button-primary,.bet-slip.collapsed .slip-head>span,.bet-slip.collapsed [data-clear]{display:none}.bet-slip.collapsed .slip-foot{padding-top:6px}body:has(.bet-slip.collapsed:not([hidden])) .site-footer{padding-bottom:110px}}

@media(max-width:768px){.bet-slip{display:flex;flex-direction:column;overflow:hidden}.bet-slip[hidden]{display:none}.bet-slip .slip-head,.bet-slip .slip-foot{flex:none}.bet-slip .slip-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}

@media(min-width:701px) and (max-width:900px){.admin-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.admin-body .user-table{min-width:760px}}