/* Shared walk HUD: the public homepage and game use one visual treatment. */
:is(.home-page, .game-page) .walk-ui {
  --walk-ink: var(--home-ink, #293e33);
  --walk-accent: var(--home-accent, #8b513e);
  --walk-muted: #526150;
  --walk-veil: 238, 234, 221;
  color: var(--walk-ink);
  text-shadow: 0 1px 10px rgba(var(--walk-veil), .65);
}
:is(.home-page, .game-page)[data-time=dusk] .walk-ui { --walk-ink: var(--home-ink, #eee9d9); --walk-accent: var(--home-accent, #f2ce99); --walk-muted: #d0d2c6; --walk-veil: 16, 27, 41; }
:is(.home-page, .game-page) .walk-ui::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--walk-veil), .82), transparent 170px),
    linear-gradient(0deg, rgba(var(--walk-veil), .8), transparent 210px);
}
:is(.home-page, .game-page) .walk-top { top: 32px; left: 42px; right: 42px; align-items: center; }
:is(.home-page, .game-page) .walk-top>div:first-child {
  display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none;
}
.walk-brand-mark { width: 26px; height: 32px; object-fit: contain; }
:is(.home-page, .game-page)[data-time=dusk] .walk-brand-mark { filter: brightness(0) invert(1) sepia(.4); opacity: .85; }
:is(.home-page, .game-page) .walk-kicker { color: var(--walk-muted); font-size: 9px; letter-spacing: 2px; }
:is(.home-page, .game-page) .walk-top h2 { color: inherit; font: 20px/1.4 var(--serif); letter-spacing: 3px; margin: 4px 0 0; }
:is(.home-page, .game-page) .walk-top-actions { gap: 28px; }
:is(.home-page, .game-page) .walk-top-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: none;
  color: inherit; font-size: 12px; letter-spacing: 1px; text-shadow: inherit;
}
:is(.home-page, .game-page) .walk-top-actions button:hover { background: none; color: var(--walk-accent); }
:is(.home-page, .game-page) .walk-top-actions svg { width: 18px; height: 18px; stroke-width: 1.1; }
:is(.home-page, .game-page) .walk-return svg { width: 32px; }
:is(.home-page, .game-page) .walk-return span { font-size: inherit; margin: 0; }
:is(.home-page, .game-page) .walk-pad {
  left: 34px; bottom: 22px; padding: 0; gap: 0;
  grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px);
  border: 0; background: none;
}
:is(.home-page, .game-page) .walk-pad button {
  position: relative; width: 44px; height: 44px; color: inherit;
  border: 0; background: none; box-shadow: none; transition: color .2s;
}
:is(.home-page, .game-page) .walk-pad button svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
:is(.home-page, .game-page) .walk-pad [data-walk-move=left] svg { transform: rotate(-90deg); }
:is(.home-page, .game-page) .walk-pad [data-walk-move=right] svg { transform: rotate(90deg); }
:is(.home-page, .game-page) .walk-pad [data-walk-move=back] svg { transform: rotate(180deg); }
:is(.home-page, .game-page) .walk-pad button:hover, :is(.home-page, .game-page) .walk-pad button.held {
  color: var(--walk-accent); background: none; box-shadow: none;
}
:is(.home-page, .game-page) .walk-pad button::after {
  content: ''; position: absolute; bottom: 5px; width: 3px; height: 3px;
  background: currentColor; border-radius: 50%; opacity: 0;
}
:is(.home-page, .game-page) .walk-pad button.held::after { opacity: 1; }
:is(.home-page, .game-page) .walk-pad>span { color: var(--walk-muted); font: 15px var(--serif); }
:is(.home-page, .game-page) .walk-guidance {
  bottom: 34px; padding: 0; border: 0; background: none;
  width: max-content; max-width: calc(100% - 400px);
}
:is(.home-page, .game-page) .walk-guidance p { font-size: 10px; line-height: 1.9; color: inherit; }
:is(.home-page, .game-page) .walk-guidance kbd { font-size: 10px; color: inherit; letter-spacing: 1px; }
:is(.home-page, .game-page) .walk-guidance>span {
  display: block; margin-bottom: 7px; color: var(--walk-muted); font: 12px var(--serif); letter-spacing: 3px;
}
:is(.home-page, .game-page) #walk-notice {
  position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 48px); color: var(--walk-accent); margin: 0;
}
:is(.home-page, .game-page) .walk-desktop-help { display: block; }
:is(.home-page, .game-page) .walk-touch-help { display: none; }
:is(.home-page, .game-page) .walk-map { right: 42px; bottom: 32px; width: 132px; padding: 0; border: 0; background: none; }
:is(.home-page, .game-page) #walk-map svg { filter: drop-shadow(0 1px 5px rgba(var(--walk-veil), .55)); }
:is(.home-page, .game-page) .walk-map>span { color: var(--walk-muted); font-size: 10px; letter-spacing: 3px; margin-top: 10px; }
:is(.home-page, .game-page) #walk-map .map-land { fill: none; stroke: none; }
:is(.home-page, .game-page) #walk-map .map-water { stroke: currentColor; stroke-width: 3; stroke-opacity: .6; }
:is(.home-page, .game-page) #walk-map .map-road { stroke: currentColor; stroke-width: .7; stroke-opacity: .35; }
:is(.home-page, .game-page) #walk-map .map-house { fill: currentColor; fill-opacity: .12; stroke: currentColor; stroke-width: .65; stroke-opacity: .7; }
:is(.home-page, .game-page) #walk-map .map-bridge { stroke: var(--walk-accent); stroke-width: 2; }
:is(.home-page, .game-page) #walk-pin circle { fill: var(--walk-accent); stroke: rgb(var(--walk-veil)); stroke-width: 1.5; }
:is(.home-page, .game-page) #walk-pin path { fill: var(--walk-accent); }
@media(max-width:700px) {
  :is(.home-page, .game-page) .walk-top { top: 20px; left: 20px; right: 20px; gap: 12px; }
  :is(.home-page, .game-page) .walk-top>div:first-child { gap: 8px; }
  .walk-brand-mark { width: 22px; height: 28px; }
  :is(.home-page, .game-page) .walk-kicker { font-size: 8px; letter-spacing: 1px; }
  :is(.home-page, .game-page) .walk-top h2 { font-size: 18px; letter-spacing: 2px; }
  :is(.home-page, .game-page) .walk-top-actions { gap: 18px; }
  :is(.home-page, .game-page) .walk-top-actions button { font-size: 11px; gap: 6px; letter-spacing: 0; }
  :is(.home-page, .game-page) .walk-secondary svg { display: none; }
  :is(.home-page, .game-page) .walk-return svg { width: 22px; }
  :is(.home-page, .game-page) .walk-pad { left: 12px; bottom: max(20px, env(safe-area-inset-bottom)); }
  :is(.home-page, .game-page) .walk-map { right: 20px; bottom: max(38px, env(safe-area-inset-bottom)); width: 118px; }
  :is(.home-page, .game-page) .walk-guidance { bottom: 172px; max-width: calc(100% - 40px); }
  :is(.home-page, .game-page) .walk-guidance>span { font-size: 11px; }
  :is(.home-page, .game-page) .walk-ui::before {
    background: linear-gradient(180deg, rgba(var(--walk-veil), .82), transparent 135px),
      linear-gradient(0deg, rgba(var(--walk-veil), .82), rgba(var(--walk-veil), .42) 180px, transparent 300px);
  }
}
@media(pointer:coarse) {
  :is(.home-page, .game-page) .walk-desktop-help { display: none; }
  :is(.home-page, .game-page) .walk-touch-help { display: block; }
}
@media(max-height:520px) and (orientation:landscape) {
  :is(.home-page, .game-page) .walk-top { top: 12px; }
  :is(.home-page, .game-page) .walk-pad { bottom: 8px; }
  :is(.home-page, .game-page) .walk-map { bottom: 20px; width: 112px; }
  :is(.home-page, .game-page) .walk-guidance { bottom: 20px; max-width: calc(100% - 320px); }
  :is(.home-page, .game-page) .walk-guidance>span { display: none; }
}
@media(prefers-reduced-motion:reduce) { :is(.home-page, .game-page) .walk-pad button { transition: none; } }