/* Shared touch controls and overlays. */
.mobile-play-links{display:none}
.walk-heading h2{margin:6px 0 14px;font-size:26px}
.walk-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.walk-modes button{min-height:44px;border:1px solid #bcc7a9;background:transparent;font:13px var(--sans);border-radius:3px}
.walk-modes button[aria-pressed=true]{background:var(--olive);color:var(--white);border-color:var(--olive)}
.walk-rules{font-size:12px;color:#6e795d;line-height:1.8;margin:10px 0 15px}
.walk-rules summary{cursor:pointer;min-height:30px}
.walk-rules p{padding:12px;background:#e9eddf;border:1px solid #d1d9c1;margin:5px 0}
.walk-stats{align-items:center;margin:12px 0;font-size:12px;gap:8px}
.walk-stats strong{font-weight:600;color:#4b6034}
.walk-board{touch-action:none;user-select:none;-webkit-user-select:none}
.walk-cell.is-wall{background:#bac6a5}
.walk-cell.is-wall>span{width:78%;height:66%;border-radius:45% 55% 38% 40%;background:#86996f;box-shadow:3px 2px 0 #6b82594d;position:relative}
.walk-cell.is-wall>span:after{content:'';position:absolute;left:23%;bottom:10%;width:1px;height:50%;background:#a8b894;transform:rotate(-20deg)}
.walk-cell .number-flower{width:72%;height:72%;display:grid;place-items:center;border:1px solid #ba8272;background:#f4dfcf;border-radius:40%;font:600 14px var(--sans);color:#834d3c}
.walk-cell.is-next .number-flower{background:#f3c97e;border:2px solid #9d7341;color:#604621;box-shadow:0 0 0 2px #fff5d9}
.walk-cell.has-flower:not(.is-next){background:#e6e8dc}
.walk-cell.is-near{outline:2px dashed #7c9060;outline-offset:-3px}
.walk-cell:focus-visible{outline:3px solid #b6745c;outline-offset:-3px;z-index:1}
.walk-dialog #walk-status{font:20px/1.35 var(--hand);text-align:center;min-height:54px;margin:12px 0}
.walk-dialog[data-result=won] #walk-status{color:#516c35}
.walk-dialog[data-result=cutoff] #walk-status,.walk-dialog[data-result=trapped] #walk-status,.walk-dialog[data-result=out-of-steps] #walk-status{color:#a25440}
.walk-dialog .walk-arrows{display:flex;gap:8px;justify-content:center;margin:8px 0}
.walk-dialog .walk-arrows button{width:50px;height:48px;margin:0;font-size:24px;touch-action:manipulation}
.walk-actions{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:7px;margin:12px 0}
.walk-actions button{min-height:44px;padding:7px;border:1px solid #c7cfb6;background:#fffdf780;font:11px/1.5 var(--sans);border-radius:3px}
.walk-actions button:active,.walk-arrows button:active{background:#d8e0c7}
.walk-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#788168;font:10px/1.5 var(--sans)}
.walk-bump{animation:walk-bump .15s ease-out}@keyframes walk-bump{25%{translate:-3px}75%{translate:3px}}
.photo-field{display:grid;gap:12px}
.photo-actions{display:flex;gap:9px;flex-wrap:wrap}
.photo-actions button{flex:1;min-height:44px;font-size:12px}
#share-photo{border:1px solid #b4bfa0;background:#f4f4e8;color:var(--olive);padding:12px}
@media(max-width:700px){
  html{scroll-padding-top:15px}
  .site-header nav a,.site-header .wordmark,.header-heart{min-height:44px;display:flex;align-items:center}
  .site-header nav a{font-size:12px;padding:10px 3px}
  .mobile-play-links{display:flex;gap:8px;flex-wrap:wrap;margin:19px 0 0}
  .mobile-play-links button{min-height:44px;padding:9px 12px;border:1px solid #c9ccb9;border-radius:20px;background:#fffdf78a;font:12px var(--sans)}
  .hero-scribble{display:none}
  .filters{gap:6px}.filters button,.shroom-tabs button{min-height:44px;font-size:12px;padding:10px 13px}
  .favorite-button,.dialog-prev,.dialog-next{min-width:44px;min-height:44px}
  .teemo-mini-controls button,.text-button,.small-button{min-height:44px;font-size:12px}
  .teemo-mini-controls{margin-top:8px;gap:16px}
  .teemo-stage{height:clamp(240px,43svh,340px)}
  .teemo-play-layout{gap:14px}
  .teemo-notes>.eyebrow{display:none}
  .teemo-notes #teemo-note{font-size:23px;min-height:0;margin:8px 0 13px}
  .teemo-buttons{gap:7px}.teemo-buttons button{min-height:44px;font-size:12px;padding:10px}
  .teemo-stage-footer{padding:10px 7px 6px}.teemo-stage-footer>span:first-child{font-size:19px}
  .snapshot-button{margin-top:8px;width:100%}
  .poke-hint{font-size:12px}.teemo-source{display:inline-block;line-height:1.7;font-size:10px;padding:7px 0}
  dialog.fan-dialog{max-height:calc(100svh - 16px);max-width:calc(100vw - 16px);overscroll-behavior:contain;padding:18px 16px;margin:auto}
  dialog.fan-dialog>.dialog-close{position:sticky;float:right;top:0;right:0;margin:-6px -5px 0 8px;min-width:44px;min-height:44px;background:#fffdf7;z-index:10;box-shadow:0 2px 6px #34422b15}
  dialog.fan-dialog>h2{margin:9px 0 14px;font-size:23px}
  .skin-dialog .dialog-close{width:44px;height:44px}
  .photo-dialog .photo-booth-layout{gap:14px;clear:both}
  .photo-dialog .photo-booth-layout canvas{width:auto;height:210px;max-width:100%;max-height:30svh}
  .photo-tools{gap:10px}
  .photo-tools input:not([type]),.photo-tools input[type=text],.photo-tools select{font-size:16px;min-height:44px;padding:11px 12px}
  .photo-tools>label,.photo-field>label,.photo-tools legend{font-size:13px}
  .photo-tools fieldset{min-height:50px;gap:0;justify-content:space-around;padding:9px 4px}
  .photo-tools fieldset label{display:flex;align-items:center;min-height:38px;font-size:13px;padding:0 6px}
  .photo-field{gap:7px}
  .photo-actions{position:sticky;bottom:-18px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);z-index:2}
  .photo-tools .save-note{display:none}
  .photo-tools>p{font-size:12px;margin:0}
  .memory-actions{position:sticky;bottom:-18px;background:var(--paper);padding:9px 0;z-index:2}
  .daily-collection button{min-height:44px;font-size:11px}
  .toast{max-width:calc(100vw - 28px);white-space:normal;width:max-content;text-align:center;line-height:1.6;bottom:calc(18px + env(safe-area-inset-bottom,0px));font-size:13px}
  .walk-heading .eyebrow{display:none}.walk-heading h2{font-size:23px;margin:0 0 15px;line-height:44px}
  .walk-dialog .walk-modes{clear:both;margin:0 0 8px;gap:6px}
  .walk-rules{margin:0;font-size:11px}.walk-rules summary{min-height:26px;line-height:26px}
  .walk-dialog .walk-stats{font-size:11px;margin:7px 0}
  .walk-dialog .walk-board{max-width:min(100%,390px,calc(100svh - 398px));min-width:208px;max-height:none;padding:5px;gap:2px}
  .walk-dialog #walk-status{font-size:20px;min-height:30px;margin:7px 0;line-height:1.35}
  .walk-controls{position:sticky;bottom:-18px;padding:4px 0 7px;background:var(--paper);z-index:3}
  .walk-dialog .walk-arrows{margin:5px 0;gap:10px}.walk-dialog .walk-arrows button{width:48px;height:46px;min-height:46px}
  .walk-actions{margin:8px 0;gap:6px}.walk-actions button{font-size:11px}
  .walk-bottom{font-size:9px;gap:4px}.walk-bottom #walk-help{max-width:65%;text-align:right}
  .walk-cell .number-flower{font-size:12px}.walk-cell .flag{font-size:19px}
  .dart-session-actions{position:sticky;bottom:-18px;background:var(--paper);padding:6px 0;z-index:6}
  .dart-toolbar button{min-height:44px;font-size:12px}.dart-dialog .dart-instructions{font-size:11px}
}
@media(max-width:370px){.site-header{padding:0 15px}.teemo-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.walk-dialog .walk-board{min-width:0;max-width:min(100%,calc(100svh - 410px))}.walk-bottom #walk-help{display:none}.walk-cell .number-flower{font-size:11px}}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){
  dialog.walk-dialog{width:min(730px,calc(100vw - 20px));max-height:calc(100svh - 16px);padding:12px 18px}
  .walk-heading .eyebrow,.walk-rules,.walk-bottom{display:none}.walk-heading h2{margin:0;font-size:20px;line-height:38px}
  .walk-dialog>.dialog-close{position:sticky;float:right;top:0;width:44px;height:44px;margin:-4px -4px 0 4px;right:0}
  .walk-modes{margin:0 50px 0 0;position:absolute;right:15px;top:13px;width:245px}.walk-modes button{min-height:38px;font-size:12px}
  .walk-layout{display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:20px;align-items:center;clear:both}
  .walk-dialog .walk-board{width:min(100%,calc(100svh - 100px));max-width:270px;min-width:0}
  .walk-stats{font-size:10px;margin:5px 0}.walk-dialog #walk-status{font-size:18px;margin:6px 0;min-height:45px}
  .walk-controls{position:static;padding:0;display:flex;flex-direction:column}.walk-actions{grid-template-columns:1fr;margin:10px 0;gap:5px}.walk-actions button{min-height:39px}
  .walk-dialog .walk-arrows{gap:4px}.walk-dialog .walk-arrows button{width:44px;min-width:44px;height:44px;margin:0}
}
@media(prefers-reduced-motion:reduce){.walk-bump{animation:none}}
/* Short portrait phones keep a readable map, with the D-pad at its side. */
@media(max-width:700px) and (max-height:680px) and (orientation:portrait){
  .walk-heading h2{line-height:36px;margin-bottom:10px;font-size:21px}
  .walk-layout{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:0 10px;align-items:center}
  .walk-map-panel{min-width:0;grid-column:1;grid-row:1}
  .walk-controls{display:contents}
  .walk-dialog .walk-board{width:100%;min-width:0;max-width:390px;padding:4px}
  .walk-dialog .walk-stats{font-size:10px;min-height:20px}.walk-stats #walk-best{display:none}
  .walk-dialog #walk-status{font-size:18px;min-height:46px;margin:8px 0}
  .walk-dialog .walk-arrows{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr;gap:8px;margin:0;align-self:center}
  .walk-dialog .walk-arrows button{width:48px;height:48px}
  .walk-actions{grid-column:1/-1;grid-row:2;margin:3px 0 8px}
  .walk-bottom{grid-column:1/-1;grid-row:3}.walk-bottom #walk-help{display:none}
}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){
  .walk-dialog .walk-modes{right:65px;width:245px;margin:0}
  .walk-dialog .walk-board{width:min(100%,calc(100svh - 160px));max-width:270px}
}
@media(max-width:700px){.skin-dialog>.dialog-close{position:sticky;float:right;top:8px;margin:8px 8px -52px 0;z-index:10}}