/* Mobile layout and touch ergonomics; browser zoom remains available. */
.grid>*,.bottom>*,.rare-game>*,.quiz-grid>*,.hero>*{min-width:0}
button{touch-action:manipulation}
input,textarea,button{max-width:100%}
.cardbody,.note,.rareintro,.rareplay{overflow-wrap:anywhere}
dialog{max-height:85vh;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:850px),(pointer:coarse){
  button,.secondary,summary{min-height:44px}
  button{min-width:44px}
  summary{display:list-item;align-content:center;padding-block:10px}
  input,textarea,select,.rareplay input,.recovery-panel textarea{font-size:16px}
  input{min-height:48px;scroll-margin-block:100px}
  .secondary{font-size:13px}
  .quiz-choice{min-height:52px;padding:14px;text-align:left}
  .order-controls{gap:8px}
  .order-controls button{min-width:48px;min-height:48px}
  button:not(:disabled):active{transform:none}
  .rare-list{max-height:32vh;max-height:32dvh;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y}
  .rare-list li{display:block;padding:11px 0;font-size:13px}
  .history{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(82px,1fr);overflow-x:auto;padding-bottom:8px}
  .history .tile{white-space:normal;font-size:12px;padding:10px 6px}
  .leaderboard-table,#categorycoverage{overscroll-behavior-x:contain}
}
@media(max-width:850px){
  header,main{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}
@media(max-width:600px){
  header{padding:14px max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left));gap:10px}
  .brand{font-size:clamp(21px,6vw,27px)}
  header>.secondary{font-size:12px;padding:8px 10px;flex-shrink:0}
  main{padding:24px max(14px,env(safe-area-inset-right)) 28px max(14px,env(safe-area-inset-left))}
  .hero{display:block}.hero p{font-size:14px}
  h1{font-size:clamp(35px,9vw,46px)}
  .daily{margin-top:20px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:14px}
  .daily strong{grid-column:2;grid-row:1 / 3;font-size:27px}
  .daily small:last-child{grid-column:1}.daily small{font-size:10px}
  .cardbody,.note,.rareintro,.rareplay{padding:20px 16px}
  .grid,.bottom,.quiz-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .photo,.animalart{height:clamp(200px,65vw,280px)}
  .badge{font-size:10px;max-width:calc(100% - 28px);left:12px;top:12px}
  .form{display:flex;flex-direction:column;gap:10px}
  .form input,.form .primary{flex:0 0 auto;width:100%}
  .actions{gap:12px}.actions button{flex:1 1 auto}
  .hintcount{flex:1 1 100%;font-size:12px!important}
  .meta,.rare-top{flex-wrap:wrap;font-size:10px;gap:8px}
  .quiz-question h3{font-size:20px;min-height:0}
  .order-list li{gap:8px;padding:10px 8px}.order-item{font-size:14px}
  .order-position{font-size:16px;min-width:16px}
  .order-controls{gap:6px}.order-controls button{padding:4px;min-width:44px;min-height:48px}
  .leaderboard-auth{padding:16px 12px}
  .leaderboard-auth input{max-width:100%}
  .leaderboard-actions>button{flex:1 1 130px}
  .leaderboard-player strong{overflow-wrap:anywhere}
  .leaderboard table{min-width:0;table-layout:fixed}
  .leaderboard th,.leaderboard td{font-size:12px;padding:12px 5px;overflow-wrap:anywhere}
  .leaderboard th:first-child{width:42px}
  .leaderboard th:nth-child(3){width:58px}.leaderboard th:last-child{width:52px}
  .sticker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticker-filters{gap:10px}.sticker-filters button{flex:1 1 auto}
  dialog{width:calc(100% - 28px);max-width:450px;padding:22px 18px}
  footer{margin-inline:14px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
  #securestatus{font-size:14px;line-height:1.6}
}