/* Responsive refinements. Keep the existing desktop design and game colours. */
.main-nav a>.nav-title{width:auto;font:inherit;text-align:inherit;line-height:inherit}
.main-nav .nav-full-label{font:inherit}
.preview-canvas:focus-visible{outline:3px solid #9ab8ff;outline-offset:-3px}
/* The route heading receives focus; individual controls retain visible rings. */
.main-content:focus{outline:none}

@media(max-width:980px){
  .main-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .main-nav a{justify-content:center;min-width:0;min-height:44px;padding-inline:8px}
  .account .icon-button{width:44px;min-height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  .chart-detail summary{min-height:44px;align-content:center}
  .small{min-height:44px}
}

@media(max-width:700px){
  html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .workspace{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .sidebar{position:relative;min-height:72px;padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-left,0px)) 14px;padding-right:max(68px,env(safe-area-inset-right,0px));}
  .sidebar>.brand{font-size:.9375rem;min-height:44px}
  .sidebar .brand small{font-size:.55rem}
  .sidebar .account{top:calc(14px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));padding:0;margin:0}
  .main-nav{position:fixed;inset:auto 0 0;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin:0;padding:6px max(5px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(5px,env(safe-area-inset-left,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 16px #182b4d08}
  .main-nav a{flex-direction:column;justify-content:center;gap:5px;min-width:0;min-height:56px;padding:6px 1px;font-size:.6875rem;line-height:1.2;white-space:nowrap;text-align:center}
  .main-nav a>span:not(.nav-title){width:24px;font-size:1.25rem;line-height:22px}
  .main-nav .nav-full-label{display:none}
  .main-nav a[aria-current=page]{box-shadow:inset 0 -3px var(--blue)}
  .topbar{height:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .main-content{padding:24px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
  .page-heading{margin-bottom:22px}
  .page-heading>button{width:100%}
  .page-heading>div{min-width:0}
  .game-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .game-tabs button{min-width:0;min-height:64px;flex-direction:column;gap:3px;padding:9px 4px;font-size:.75rem;line-height:1.35}
  .game-tabs button small{font-size:.8125rem}
  .filter-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:12px 10px}
  .filter-bar label{min-width:0;width:100%;margin:0;font-size:.8125rem}
  .filter-bar input,.filter-bar select{width:100%;max-width:100%;min-width:0;padding:10px 8px}
  #results-filter label:has(select){grid-column:1/-1}
  .filter-bar>button{width:100%;min-width:0;margin:0}
  .filter-bar .filter-count{grid-column:1/-1;margin:0;padding:0;min-height:20px}
  .pagination{gap:12px;padding:16px}
  .pagination>span{width:100%}
  .pagination>div{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0;gap:10px}
  .pagination button{padding-inline:8px}
  .card{min-width:0}
  .section-heading h2{flex-wrap:wrap}
  .latest-card footer{align-items:center;padding-block:6px}
  .latest-card footer>a,.text-link{display:inline-flex;align-items:center;min-height:44px}
  .detail-list>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .detail-list dt,.detail-list dd{min-width:0;overflow-wrap:anywhere}
  .archive-game-counts{justify-content:space-between;gap:12px}
  .parity-chart{gap:1px}
  .parity-chart span{min-width:0}
  .sum-chart{gap:4px}
  .sum-bin small{font-size:.75rem;white-space:normal;overflow-wrap:normal;text-align:center;line-height:1.25;min-height:32px}
  .chart-detail ul{padding-left:20px}
  #analysis-content .compact-table th{white-space:normal;line-height:1.45}
  #analysis-content .compact-table th,#analysis-content .compact-table td{padding:9px 6px}
  .practice-kind-label{width:100%;min-width:0}
  .practice-kind-label select{width:100%}
  .practice-history .section-heading{align-items:stretch}
  .record-review,.health-game,.research-evidence-body{overflow-wrap:anywhere}
  .research-sequence{grid-template-columns:repeat(5,minmax(24px,1fr) minmax(12px,.6fr)) minmax(24px,1fr)}
  .research-ball{width:28px!important;height:auto!important;aspect-ratio:1}
  .research-gap-arrow{line-height:28px}
  .research-rate-label{gap:10px;align-items:flex-start}
  .research-rate-label strong{flex-shrink:0}
  .research-periods{overflow:visible}
  .research-periods table,.research-periods tbody,.research-periods caption{display:block;width:100%}
  .research-periods thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .research-periods tbody{display:grid;gap:12px}
  .research-periods tbody tr{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
  .research-periods tbody th{display:block;width:100%;padding:4px 0 8px;font-weight:650}
  .research-periods td{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.75rem;white-space:normal;overflow-wrap:anywhere}
  .research-periods td::before{content:attr(data-label);color:var(--muted);font-weight:500}
  .research-periods td:last-child{border-bottom:0}
  .research-octave-grid{gap:4px}
  .research-octave-grid>div{padding-inline:2px;min-width:0;overflow-wrap:anywhere}
  .page-footer{gap:4px;flex-direction:column}
  .access-intro{padding:calc(18px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 18px max(24px,env(safe-area-inset-left,0px))}
  .access-message{padding:18px 0 0}
  .access-message .eyebrow,.access-message>p:not(.eyebrow),.access-games{display:none}
  .access-message h1{font-size:1.65rem;margin:0;line-height:1.2}
  .access-form-wrap{align-items:flex-start;padding:26px max(24px,env(safe-area-inset-right,0px)) calc(36px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
  .access-form>.muted{margin-bottom:22px}
  .access-note{margin-top:20px}
  .access-layout{min-height:100dvh;align-content:start}
  .setup-steps{overflow-wrap:anywhere}
  .skip-link{z-index:6}
}

@media(max-width:350px){
  .main-content{padding-inline:12px}
  .card:not(.table-card):not(.latest-card):not(.research-card):not(.research-other){padding:17px}
  .latest-card .game-header{padding-inline:18px}
  .draw-content{padding-inline:18px}
  .latest-card .balls{gap:5px}
  .game-tabs{gap:5px}
  .game-tabs button{font-size:.6875rem}
  .research-card{padding-inline:15px}
  .research-ball{width:24px!important}
  .research-gap-arrow{line-height:24px}
  .research-description{font-size:.8125rem}
  .gap-columns{gap:12px}
  .gap-list li{gap:6px;font-size:.75rem}
}

@media(max-height:500px) and (max-width:980px){
  .access-intro{padding:18px 24px;min-height:0}
  .access-message,.access-intro .disclaimer{display:none}
  .access-form-wrap{padding:24px}
  .access-layout{min-height:100dvh}
}