/* Phone-first reading and navigation; desktop and print retain their layouts. */
.nav-link .nav-icon{display:none}
@media screen and (max-width:680px){
  html{scroll-padding-top:112px;scroll-padding-bottom:100px}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom));background:#f3f7fc}
  .site-header{height:76px;border-bottom:0}
  .header-inner{height:76px;grid-template-rows:76px;padding:0 16px}
  .brand img{width:97px;height:44px}
  .brand-type{font-size:27px}
  .header-actions .export-btn{width:44px;min-height:44px;padding:0;border-radius:12px;background:#f1f6fc;border-color:#e0eaf5}
  .export-btn>span:last-child{display:none}
  .site-header nav{position:fixed;z-index:15;left:0;right:0;bottom:0;width:100%;height:auto;min-height:72px;padding:7px 12px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:rgba(255,255,255,.97);border-top:1px solid #d9e5f2;box-shadow:0 -6px 26px #17365d0a;backdrop-filter:blur(16px)}
  .nav-link{height:56px;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:5px;border-radius:13px;font-size:12px;color:#667e99}
  .nav-link .nav-icon{display:inline-flex}
  .nav-icon svg{width:21px;height:21px}
  .nav-link.active{background:#eaf5fd;color:#2D5990}
  .nav-link.active:after{display:none}
  .page-shell{padding:8px 16px 0}
  .hero{min-height:0;border-radius:22px;background:linear-gradient(135deg,#17365d,#2D5990 75%,#008dc9);box-shadow:0 12px 28px #17365d14;padding-bottom:16px}
  .hero-content{padding:24px 22px 0;max-width:none}
  .hero-eyebrow{font-size:8px;letter-spacing:.65px;gap:5px;flex-wrap:wrap}
  .hero-eyebrow .eyebrow-line{width:10px}
  h1{font-size:clamp(76px,22vw,104px);line-height:.96;letter-spacing:-1.8px;margin:18px 0 10px}
  .hero-tagline{font-size:16px;letter-spacing:1px;margin-bottom:10px}
  .hero-content>p{font-size:13px;line-height:1.6;margin-bottom:0;max-width:none}
  .hero-content>p br{display:none}
  .hero-cta{display:none}
  .hero-season{font-size:9px;letter-spacing:.35px;margin:17px 0 18px;gap:7px;line-height:1.5}
  .featured-match{position:relative;inset:auto;width:auto;margin:0 14px;padding:15px 16px;border-radius:14px;background:#112e55a6;box-shadow:none}
  .featured-top{font-size:9px;letter-spacing:.8px}
  .featured-top>span:last-child{font-size:9px}
  .featured-teams{margin:12px 0}
  .featured-team{font-size:34px;gap:10px}
  .featured-date{font-size:11px;gap:7px;padding-top:5px;min-height:44px;flex-wrap:wrap}
  .featured-date a{min-height:44px;font-weight:600}
  .season-strip{padding:20px 0;gap:0;border-bottom-color:#dce7f3}
  .season-strip>div{gap:6px;padding:0 5px}
  .season-strip>div:first-child{padding-left:5px}
  .strip-number{font-size:32px}
  .season-strip>div>span:last-child{font-size:8px;letter-spacing:.3px;line-height:1.5}
  .match-centre{margin-top:26px;gap:32px;margin-bottom:30px}
  .section-heading{gap:10px;margin-bottom:18px}
  .section-kicker{font-size:10px;letter-spacing:1.3px}
  h2{font-size:32px;line-height:1.05}
  .count-label{font-size:11px}
  .fixtures-section .section-heading h2{max-width:240px}
  .filters{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:1fr;gap:8px;padding:10px 0 12px;margin:0;background:#f3f7fc}
  .segmented{display:flex;width:100%;padding:4px;gap:4px;background:#e5edf7;border-color:#dce6f2;border-radius:13px}
  .segmented button{flex:1;min-height:44px;font-size:13px;border-radius:9px;padding:8px}
  .filter-select select{width:100%;max-width:none;min-height:44px;font-size:16px;padding:9px 36px 9px 14px;background:#fff;border-color:#dce6f2;border-radius:10px}
  .filter-select>span:last-child{top:16px;right:15px}
  .fixture-grid{grid-template-columns:1fr;gap:12px}
  .match-card{border:1px solid #dde7f3;border-radius:17px;box-shadow:0 3px 12px #17365d04}
  .match-card:hover{transform:none}
  .match-top{padding:14px 16px 0;align-items:center;gap:8px;font-size:10px}
  .match-top-label{flex-direction:row;align-items:center;gap:8px;font-size:10px;letter-spacing:.5px}
  .pool-badge{font-size:9px;padding:4px 6px;border-radius:5px}
  .match-status{font-size:10px;margin:0;gap:5px}
  .match-teams{padding:15px 20px 10px;gap:12px}
  .team-lockup{flex-direction:row;gap:12px}
  .team-lockup:last-child{flex-direction:row-reverse;gap:12px}
  .team-name{font-size:32px;letter-spacing:.3px}
  .crest{width:34px;height:40px;font-size:11px}
  .match-teams .vs{font-size:10px;background:#f3f7fc;border-radius:50%;padding:8px;letter-spacing:0}
  .match-datetime{font-size:12px;gap:7px;margin-bottom:13px}
  .match-datetime svg{width:13px;height:13px}
  .match-bottom{padding:6px 12px 6px 16px;min-height:57px;background:#f7faff;gap:10px}
  .result-display{font-size:13px;line-height:1.4;padding-left:0;min-height:44px}
  .share-match{width:44px;min-height:44px;border-radius:10px;border-color:#dce7f3}
  .share-match svg{width:17px;height:17px}
  .fixture-footer{flex-direction:column-reverse;gap:12px;margin-top:16px}
  .fixture-footer .btn{width:100%;font-size:13px;min-height:48px;background:#fff;border-radius:12px}
  .fixture-footer>span{font-size:12px}
  .standings-card{border-radius:17px;border-color:#dce7f3}
  .standings-tabs button{font-size:15px;min-height:52px}
  .standings-top{padding:0 16px}
  th{font-size:11px;padding:13px 4px}
  td{font-size:14px;padding:15px 4px}
  th:first-child,td:first-child{padding-left:12px}
  th:last-child,td:last-child{padding-right:12px}
  .table-team{gap:8px}
  .table-team .crest{width:24px;height:28px}
  .table-legend{font-size:11px;margin:16px 12px}
  .points-key{justify-content:space-between;gap:12px;padding:14px 16px}
  .points-key span,.points-key b{font-size:12px}
  .qualification-note{background:#e7f1fb;border-color:#d9e8f6;border-radius:15px}
  .qualification-note a{min-height:44px;font-size:12px}
  .qualification-note p{font-size:13px;line-height:1.6}
  .tie-note{font-size:12px;line-height:1.6}
  .playoffs-section{padding:25px 18px 20px;border-radius:20px}
  .playoff-heading h2{font-size:34px}
  .playoff-heading .eyebrow{font-size:10px}
  .playoff-heading p{font-size:13px}
  .date-pill{font-size:10px;margin-top:14px}
  .round-heading{font-size:11px;letter-spacing:1px}
  .round-matches{grid-template-columns:1fr;gap:10px}
  .bracket-card{padding:14px;border-radius:12px}
  .bracket-card-top{font-size:11px}
  .bracket-card-top small{font-size:11px}
  .bracket-teams{flex-direction:row;gap:8px;font-size:14px;margin:14px 0 4px}
  .bracket-result{font-size:12px;padding-top:10px}
  .final-card{padding:24px 16px;border-radius:15px}
  .final-teams{flex-direction:row;font-size:13px}
  .playoff-foot{font-size:11px;line-height:1.6}
  .season-tools{padding:25px 0;gap:18px}
  .season-tools h3{font-size:25px;line-height:1.1}
  .season-tools p{font-size:13px;line-height:1.6}
  .season-tools .btn{font-size:13px;min-height:48px;border-radius:12px}
  .back-top{width:44px;height:44px}
  .footer-right{font-size:11px;line-height:1.6}
  .modal{width:calc(100% - 20px);padding:22px;border-radius:22px;max-height:85dvh}
  .modal textarea{font-size:16px;min-height:180px}
  .icon-button{min-height:44px;width:44px}
  .dialog-actions{flex-direction:column}
  .dialog-actions .btn{min-height:48px;font-size:13px}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom));font-size:13px}
}
@media screen and (max-width:360px){
  .page-shell{padding-left:12px;padding-right:12px}
  .header-inner{padding:0 12px}
  .hero-content{padding:22px 18px 0}
  .hero-eyebrow{font-size:7px;letter-spacing:.3px}
  .featured-match{margin:0 10px;padding:13px}
  .featured-team{font-size:30px}
  .featured-date{font-size:10px}
  .team-lockup,.team-lockup:last-child{gap:8px}
  .match-teams{padding-left:16px;padding-right:16px}
  .team-name{font-size:29px}
  .match-top{padding-left:13px;padding-right:13px}
  .match-status{font-size:9px}
}