/* 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}
}

.spelling-suggestion{margin:12px 0;padding:12px;border:2px solid var(--line);border-radius:8px}.spelling-suggestion button{min-height:48px;white-space:normal;max-width:100%}.spelling-suggestion p{margin:6px 0 10px}

.share-preview{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:8px;background:#151c27;color:#f4f6fc;-webkit-text-fill-color:#f4f6fc;color-scheme:dark;opacity:1;font:16px/1.6 monospace;overflow-wrap:break-word}

/* Photo details remain usable on small touch screens. */
#enlargephoto{margin-bottom:12px;min-height:44px}#closephoto{min-height:44px;margin-bottom:12px}#animalphoto{cursor:zoom-in}.photo-view{max-height:94dvh;overflow:auto}.photo-view::backdrop{background:rgb(0 0 0 / .75)}#placephoto:focus-visible,#animalphoto:focus-visible{outline:3px solid #e8ca79;outline-offset:-4px}

/* Keep helpful hints visually and spatially distinct from ending a round. */
.give-up-area{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}.give-up-area p{font-size:13px;line-height:1.6;margin:0 0 12px;color:#d5dce5}.give-up-area .give-up-button{background:#32222b;color:#ffd3d7;border:2px solid #a96774;box-shadow:none;min-height:48px;white-space:normal}.give-up-area .give-up-button:hover:not(:disabled){background:#492c37}.give-up-area .give-up-button:focus-visible{outline:3px solid #ffd3d7;outline-offset:4px}#placehint,#animalhint{background:#d8e8fa;color:#172636;border-color:#91b8df;min-height:48px}