/* Mobile-first responsive layer for Pat'z Pickleball Queuing System */
html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
img,svg,video,canvas{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px}

@media(max-width:900px){
  body{min-width:0!important}
  .wrap,.staff-control-wrap,.leaderboard-wrap{width:100%!important;max-width:100%!important;padding:12px!important}
  .topbar,.leaderboard-hero{flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .top-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important}
  .top-actions .btn{width:100%!important;min-height:44px!important}
  .card{padding:14px!important;border-radius:14px!important}
  .court-head{gap:8px!important;flex-wrap:wrap!important}
  .court-head>.btn,.court-head>a.btn{min-height:42px!important}
  .btn{min-height:44px;padding:11px 13px;font-size:12px}
  input,select,textarea{min-height:46px!important}
  .notice{font-size:13px;line-height:1.45}

  /* Staff dashboard */
  .staff-topbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding-bottom:10px!important}
  .staff-brand-logo{width:100%!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important}
  .staff-brand-logo img{width:min(360px,92vw)!important;height:auto!important;max-height:105px!important;object-fit:contain!important}
  .staff-header-right{width:100%!important;display:flex!important;flex-direction:column!important;gap:10px!important}
  .staff-header-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .staff-header-actions .btn,.staff-header-actions button{width:100%!important;min-width:0!important;min-height:44px!important;padding:9px 7px!important;font-size:10px!important;white-space:normal!important;line-height:1.15!important}
  .staff-header-statuses{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .staff-mode-compact,.staff-access-compact{min-width:0!important;padding:10px!important}
  .staff-status-label{font-size:9px!important}
  .staff-mode-value,.staff-access-remaining{font-size:12px!important;word-break:break-word}
  .staff-upgrade-compact{min-height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .staff-workflow{display:none!important}
  .staff-court-grid,.staff-court-grid[class*="court-count-"]{grid-template-columns:1fr!important;gap:12px!important}
  .staff-court-content{min-height:0!important;padding:12px!important}
  .staff-empty-court{min-height:150px!important}
  .staff-action-row,.staff-action-row-three,.staff-finish-form,.secondary-actions{grid-template-columns:1fr!important}
  .staff-upnext-row{grid-template-columns:1fr!important;gap:10px!important}
  .staff-upnext-card{grid-template-columns:96px minmax(0,1fr)!important;min-height:145px!important;padding:10px!important}
  .staff-upnext-label span{font-size:18px!important}.staff-upnext-label strong{font-size:30px!important}
  .staff-add-batch{min-height:85px!important}
  .match-mode-grid,.compat-grid,.match-toggles{grid-template-columns:1fr!important}
  .team-picker{grid-template-columns:1fr!important}.versus{min-height:34px}
  .manual-actions{align-items:stretch!important}.manual-actions .btn{width:100%!important;min-width:0!important}
  .reclub-fetch-controls{grid-template-columns:1fr!important}.reclub-player-grid{grid-template-columns:1fr!important;max-height:none!important}
  .reclub-selection-tools{align-items:stretch!important}.reclub-player-search{min-width:0!important;width:100%!important;flex:1 1 100%!important}
  .reclub-selection-action .btn{width:100%!important}
  .reclub-demo-note{align-items:flex-start!important;flex-direction:column!important;gap:4px!important}
  .reclub-add-dialog{width:calc(100vw - 24px)!important;max-height:92vh!important;overflow:auto!important;padding:20px 16px!important}
  .lock-partner-box{width:calc(100vw - 24px)!important;max-height:92vh!important;overflow:auto!important}
  .lock-partner-form{grid-template-columns:1fr!important}

  /* Tables become stacked cards, preventing horizontal page scrolling */
  .table-wrap,.table-scroll{overflow:visible!important;width:100%!important}
  .table,.access-table,.leaderboard-table{display:block!important;width:100%!important;min-width:0!important;border:0!important}
  .table thead,.access-table thead,.leaderboard-table thead{display:none!important}
  .table tbody,.access-table tbody,.leaderboard-table tbody{display:grid!important;gap:10px!important;width:100%!important}
  .table tr,.access-table tr,.leaderboard-table tr{display:block!important;width:100%!important;padding:11px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:12px!important;background:rgba(7,20,31,.75)!important}
  .table td,.access-table td,.leaderboard-table td{display:block!important;width:100%!important;padding:7px 0!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .table td+td,.access-table td+td,.leaderboard-table td+td{border-top:1px solid rgba(255,255,255,.06)!important}
  .waiting-player-cell{min-width:0!important}
  .pw-wrap{min-width:0!important;flex-wrap:wrap!important}.pw-actions{width:100%!important}.pw-actions .btn{flex:1!important}
  .action-stack,.actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}.action-stack form,.actions form{width:100%!important}.action-stack .btn,.actions .btn,.actions input{width:100%!important}

  /* Plan pages */
  .shell{padding:10px!important;width:100%!important;max-width:100%!important}
  .panel{padding:16px 12px 18px!important;border-radius:18px!important}
  .top{flex-direction:column!important;gap:12px!important}.back{width:100%!important;height:44px!important}
  .plans{grid-template-columns:1fr!important;gap:16px!important}
  .plan{min-height:0!important;padding:18px!important;border-radius:18px!important}
  .plan.day-seven{padding:16px!important;margin-top:10px}
  .plan-head{gap:12px!important}.plan-icon{width:50px!important;height:50px!important;flex-basis:50px!important}.plan-icon svg{width:27px!important;height:27px!important}
  .plan h3{font-size:21px!important}.plan-sub{min-height:0!important;font-size:13px!important}
  .price{font-size:34px!important}.avail{height:52px!important;font-size:15px!important}
  .modal-backdrop,.app-alert{padding:10px!important;align-items:flex-end!important}
  .modal,.app-alert-card{width:100%!important;max-width:none!important;border-radius:18px 18px 0 0!important;max-height:92vh!important;padding:18px 14px!important}
  .qr{width:min(210px,62vw)!important;height:auto!important;aspect-ratio:1/1}
  .download{min-height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:10px 16px!important}
  .field input[type=file]{padding:12px 8px!important;height:auto!important;min-height:52px!important}
  .app-alert-card .actions{display:grid!important;grid-template-columns:1fr!important}.app-alert-card .actions a{width:100%!important;text-align:center!important}

  /* Login/check-in */
  .login-shell{padding:12px!important;min-height:100dvh!important}
  .login-card{width:100%!important;max-width:520px!important;padding:22px 16px!important}

  /* Admin settings/payment pages */
  .cardx{padding:15px!important;border-radius:14px!important}
  .meta-grid,.grid{grid-template-columns:1fr!important}
  .plan-setup{padding:14px!important}
  .payrow{display:block!important;padding:14px!important}.payrow>div{padding:8px 0!important;border-bottom:1px solid rgba(255,255,255,.06)!important}.payrow>div:last-child{border-bottom:0!important}
  .receipt{width:min(160px,48vw)!important;height:auto!important}
  .ui-modal{padding:10px!important;align-items:flex-end!important}.ui-card,.img-card{width:100%!important;max-width:none!important;border-radius:18px 18px 0 0!important;padding:18px!important;max-height:92vh!important;overflow:auto!important}
  .ui-actions{display:grid!important;grid-template-columns:1fr 1fr!important}.ui-btn{width:100%!important;min-width:0!important}

  /* Leaderboard */
  .leaderboard-grid{grid-template-columns:1fr!important;gap:12px!important}
  .leaderboard-card{padding:14px!important}
  .history-list{max-height:none!important}

  /* Mode page */
  .mode-shell{padding:12px!important}.mode-card{width:100%!important;padding:18px!important}
  .mode-options{grid-template-columns:1fr!important}.mode-option{min-height:0!important}
  .timer-option{grid-template-columns:1fr!important;gap:10px!important}.timer-minutes{width:100%!important}
  .mode-actions{display:grid!important;grid-template-columns:1fr 1fr!important}.mode-actions .btn{width:100%!important}
  .plan-lock-card{width:calc(100vw - 24px)!important;padding:18px!important}.plan-lock-actions{display:grid!important;grid-template-columns:1fr!important}

  /* Change password */
  main.wrap[style*="max-width:650px"]{padding:14px!important;padding-top:20px!important}
  main.wrap[style*="max-width:650px"] form>div[style*="display:flex"]{display:grid!important;grid-template-columns:1fr!important}
}

@media(max-width:600px){
  .top-actions{grid-template-columns:1fr!important}
  .staff-header-statuses{grid-template-columns:1fr!important}
  .staff-upnext-card{grid-template-columns:80px minmax(0,1fr)!important}
  .staff-upnext-label{padding:2px 6px!important}.staff-upnext-label span{font-size:15px!important}.staff-upnext-label strong{font-size:25px!important}
  .staff-player-row{height:auto!important;min-height:44px!important;padding:8px 10px!important}
  .staff-player-row b{font-size:14px!important}
  .ui-actions,.mode-actions{grid-template-columns:1fr!important}
}

/* Live board phone layout */
@media(max-width:760px){
  .live-board-shell{padding:8px 10px 14px!important;overflow:visible!important}
  .mafia-live-header{height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:8px 0 12px!important}
  .live-brand-logo{grid-column:1/-1!important;width:100%!important;height:auto!important;justify-content:center!important}.live-brand-logo img{width:min(340px,90vw)!important;height:auto!important;max-height:95px!important}
  .live-dashboard-title{display:flex!important;grid-column:1/-1!important;font-size:24px!important;white-space:normal!important;order:2!important}
  .mafia-slogan{font-size:12px!important;letter-spacing:1px!important;padding-right:10px!important;text-align:left!important;order:3!important}.live-clock{order:4!important}.live-clock span{font-size:10px!important}.live-clock strong{font-size:25px!important}
  .live-court-grid,.live-court-grid[class*="court-count-"]{grid-template-columns:1fr!important;gap:10px!important;margin-top:10px!important}
  .live-court-card{height:auto!important;min-height:390px!important}
  .up-next-strip{grid-template-columns:1fr!important;gap:9px!important}.up-next-panel{min-height:120px!important}
  .mafia-live-footer{min-height:70px!important;flex-wrap:wrap!important;gap:8px!important;padding:10px!important}.footer-message{text-align:left!important}
  .calling-overlay{padding:8px!important;overflow:auto!important}.calling-card{height:auto!important;min-height:100%!important}.calling-layout{grid-template-columns:1fr!important}.calling-court-number{min-height:120px!important}.calling-court-number strong{font-size:100px!important}.calling-player{padding:10px!important;gap:10px!important}.calling-avatar,.calling-avatar-fallback{width:58px!important;height:58px!important}.calling-player b{font-size:clamp(30px,10vw,52px)!important;white-space:normal!important}.calling-play-count{width:42px!important;height:42px!important}
}

@media(max-width:760px){
  /* Live rankings: scroll naturally instead of cropping to a desktop TV viewport */
  .rank-live{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  .rank-content{height:auto!important;min-height:100dvh!important;overflow:visible!important;padding:10px!important}
  .rank-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:0!important;gap:8px!important}
  .title-wrap{order:-2!important;width:100%!important}.title-wrap h1{font-size:38px!important}.title-wrap .sub{font-size:11px!important;letter-spacing:.12em!important;padding:7px 13px!important}
  .brand-block{justify-content:center!important}.brand-logo{width:62px!important;height:62px!important;flex-basis:62px!important}.brand-copy{display:block!important}.brand-copy strong{font-size:18px!important}.brand-copy small{font-size:7px!important;white-space:normal!important}
  .rank-meta{width:100%!important;justify-content:space-between!important;margin:0!important;padding:0!important}.live-tag{font-size:14px!important;padding:8px 13px!important}.clock strong{font-size:22px!important}.clock small{font-size:10px!important}
  .hero{height:auto!important;min-height:300px!important;flex:auto!important;margin-top:6px!important}.podium{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;width:100%!important;max-width:none!important;gap:4px!important;align-items:flex-end!important}
  .podium-card{height:178px!important;padding:7px 5px!important}.rank1 .podium-card{height:205px!important}.podium-avatar{width:50px!important;height:50px!important}.rank1 .podium-avatar{width:64px!important;height:64px!important}.podium-name{font-size:12px!important}.podium-stat span{font-size:6px!important}.podium-stat strong{font-size:10px!important}.podium-base{height:46px!important;font-size:34px!important}.rank1 .podium-base{height:56px!important}
  .rank-panel{margin-top:10px!important;border-radius:14px!important;overflow:visible!important}.rank-title{padding:10px 12px!important}.rank-title h2{font-size:18px!important}
  .rank-table{display:block!important;width:100%!important}.rank-table thead{display:none!important}.rank-table tbody{display:grid!important;gap:8px!important}.rank-table tr{display:grid!important;grid-template-columns:auto 1fr auto!important;gap:5px 10px!important;padding:10px!important;border-radius:10px!important;background:#06455c!important}.rank-table td{display:block!important;padding:3px 0!important;border:0!important;font-size:12px!important}.rank-table td:nth-child(n+4){font-size:10px!important;color:#bce7eb!important}.rank-player-cell{gap:8px!important}.rank-no{font-size:16px!important}.rank-foot{font-size:8px!important;letter-spacing:.12em!important;flex-wrap:wrap!important}
  .bg-silhouette,.bg-ball,.hero-note,.hero-quote{display:none!important}
}

@media(max-width:600px){
  /* Admin account creation form */
  .wrap section.card form[style*="display:flex"]{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important}
  .wrap section.card form[style*="display:flex"] label,.wrap section.card form[style*="display:flex"] input,.wrap section.card form[style*="display:flex"] select,.wrap section.card form[style*="display:flex"] button{width:100%!important;min-width:0!important}
  .new-pass{font-size:19px!important}

  /* Player check-in page */
  .login-shell .login-card h1{font-size:26px!important}
  .login-shell .login-card p{line-height:1.5}
}