/* Bey gözüyle gez (public/walk-mode.js, walk-input.js): first-person walk in the player's own village.
   html.walk-mode hides every panel, bar and counter; the canvas, the map labels and the village chat bubbles (#labels, animations.css; the labels are inert while walking, walk-mode.js) and #walk-ui stay.
   Loaded after the paint (index.html template, data-pos 335): the hiding rules use !important because style.css / the iso themes set `display` on these ids with
   higher or later rules. The exit button paints only when :enabled (AGENTS.md 2026-11-03, test/disabled-button-look.test.mjs). */
html.walk-mode :is(#top, #nav, #panel, #bar, #quick-dock, #dock-more, #chat, #chat-toggle, #layers-panel, #status-pop, #coach-ring, #coach-bubble, #toasts,
  #alerts, #announce, #quest-tracker, #online-list, #admin-inbox, #ranking-panel, #hover, #threat-edge, #tip) { display: none !important; }
html.walk-mode #chat#chat#chat { display: none !important; } /* community.css shows the compact sheet with #chat#chat[data-chat-mode] !important */
html.walk-mode #app, html.walk-mode #app canvas { touch-action: none; }

#walk-ui { position: fixed; inset: 0; z-index: var(--z-info, 30); pointer-events: none; font-family: var(--font-body, inherit); }
#walk-ui [hidden] { display: none !important; }

/* The dip to dark of the way in (walk-mode.js: the stalls of the first frames at the eye happen behind it): opacity is written per frame, so no transition. Under #walk-ui, over the canvas, the labels and the chat bubbles. */
#walk-fade { position: fixed; inset: 0; z-index: calc(var(--z-info, 30) - 1); background: #14100c; opacity: 0; pointer-events: none; }

#walk-exit { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); box-sizing: border-box; min-height: 44px; max-width: 46vw;
  padding: 0 16px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: var(--cursor-pointer, pointer); pointer-events: auto; }
#walk-exit:enabled { background: rgba(24, 18, 12, 0.74); color: #f7f0de; border-color: rgba(247, 240, 222, 0.4); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
#walk-exit:enabled:focus-visible { background: rgba(24, 18, 12, 0.9); border-color: rgba(247, 240, 222, 0.7); }
@media (hover: hover) { #walk-exit:enabled:hover { background: rgba(24, 18, 12, 0.9); border-color: rgba(247, 240, 222, 0.7); } }

/* Controls hint (first entry only) at the top-left, leaving the exit button's corner free; the stick lives at the bottom-left, so the hint never meets it. */
#walk-hint { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); box-sizing: border-box; max-width: calc(100vw - 190px);
  padding: 8px 12px; border-radius: 12px; background: rgba(24, 18, 12, 0.7); color: #f7f0de; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; pointer-events: none; }
#walk-edge { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); box-sizing: border-box; max-width: calc(100vw - 32px); width: max-content;
  padding: 8px 16px; border-radius: 12px; background: rgba(24, 18, 12, 0.7); color: #f7f0de; font-size: 14px; font-weight: 600; text-align: center; pointer-events: none; }

#walk-stick { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 16px); width: 120px; height: 120px;
  box-sizing: border-box; border-radius: 50%; background: rgba(24, 18, 12, 0.35); border: 2px solid rgba(247, 240, 222, 0.35); pointer-events: auto; touch-action: none; }
#walk-stick .walk-knob { position: absolute; left: 34px; top: 34px; width: 48px; height: 48px; border-radius: 50%; background: rgba(247, 240, 222, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); pointer-events: none; }
/* See-through at rest (it covers part of the view), solid while a finger is on it. */
#walk-stick.walk-held { background: rgba(24, 18, 12, 0.7); border-color: rgba(247, 240, 222, 0.9); }
#walk-stick.walk-held .walk-knob { background: rgb(247, 240, 222); }

/* The jump button (touch only, walk-input.js): bottom right, the stick's mirror image; its centre is on the stick's height (the stick is 120 px, this 76 px: 22 px higher). 28 px from the edge, not 16: the map's round (i) button sits in that corner and must not touch the circle. The arrow is drawn, no font glyph. */
#walk-jump { position: absolute; right: max(28px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 38px); width: 76px; height: 76px; box-sizing: border-box; padding: 0;
  border-radius: 50%; border: 2px solid transparent; font: inherit; cursor: var(--cursor-pointer, pointer); pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
#walk-jump::before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-left: 4px solid currentColor; border-top: 4px solid currentColor; border-radius: 2px; transform: translate(-50%, -30%) rotate(45deg); }
#walk-jump:enabled { color: #f7f0de; background: rgba(24, 18, 12, 0.5); border-color: rgba(247, 240, 222, 0.5); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
#walk-jump:enabled:active, #walk-jump:enabled:focus-visible { background: rgba(24, 18, 12, 0.85); border-color: rgba(247, 240, 222, 0.9); }
@media (hover: hover) { #walk-jump:enabled:hover { background: rgba(24, 18, 12, 0.85); border-color: rgba(247, 240, 222, 0.9); } }