/* journey.html: the town off the roundabout. For now only the map (art/make_town.py: roads and landscape, no
   buildings) and Soutik's small sprite walking its roads. Same idiom as the walk: hard pixels, the pixel font,
   square corners. journey.js sets --s, the CSS pixels per art pixel (whole device pixels), and moves the camera. */
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pixelify-sans-400.woff2) format("woff2");
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { scrollbar-width: none; overscroll-behavior: none; }
html::-webkit-scrollbar { display: none; }
body { background: #1d5b19; color: #fdfdfd; font-family: "Pixelify Sans", monospace; overflow: hidden; -webkit-tap-highlight-color: transparent; }
/* full screen: the town is the whole window and the bar floats over its top edge */
#bar { position: fixed; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 20px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); pointer-events: none; }
#bar > * { pointer-events: auto; }
#bar h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* kept for screen readers; on screen it sat over the offices' plates */
#back { color: #0f0f0f; background: #fdfdfd; border: 3px solid #0f0f0f; box-shadow: 3px 3px 0 #29BA74; padding: 6px 10px; font-size: 20px; line-height: 1; text-decoration: none; white-space: nowrap; }
#back:hover, #back:focus-visible { background: #ffbc00; outline: 0; }
#hint { margin: 0 0 0 auto; font-size: 20px; line-height: 1; color: #fdfdfd; background: #0f0f0f; padding: 8px 10px; }
#view { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: pointer; }
#town { position: absolute; left: 0; top: 0; width: calc(720px * var(--s, 2)); height: calc(452px * var(--s, 2)); background: #4a7c27 url(img/town-map.png?v=25) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; will-change: transform; }
/* an office's plate: the company's real logo alone (a normal smooth image, never pixelated), standing on the
   roof. White, black border, square: the site's own sign. */
.plate { position: absolute; z-index: 3000; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; padding: 5px 7px; background: #fdfdfd; border: 2px solid #0f0f0f; box-shadow: 2px 2px 0 #0f0f0f; pointer-events: none; white-space: nowrap; }
.plate img { display: block; height: calc(11px * var(--s, 2)); width: auto; max-width: calc(34px * var(--s, 2)); object-fit: contain; image-rendering: auto; }
.plate span { display: block; font-size: 20px; line-height: 1; color: #0f0f0f; }
.bld { position: absolute; background: 0 0 / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; }
#me { position: absolute; left: 0; top: 0; width: calc(20px * var(--s, 2)); height: calc(27px * var(--s, 2)); background: url(img/town-soutik.png?v=4) 0 0 / calc(60px * var(--s, 2)) calc(108px * var(--s, 2)) no-repeat; image-rendering: pixelated; will-change: transform; }
@media (max-width: 699px) {
  #bar { gap: 10px; padding-left: 10px; padding-right: 10px; }
  #hint { font-size: 10px; text-align: right; padding: 6px; }   /* 10px: the pixel font is sharp at multiples of 10 */
}

/* the swimming pool's live water, and the card that offers the strokes while he is in it */
#pool { position: absolute; image-rendering: pixelated; pointer-events: none; }
#swim { position: fixed; z-index: 20; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; background: #fdfdfd; border: 3px solid #0f0f0f; box-shadow: 5px 5px 0 #3fa9d6; font-family: "Pixelify Sans", monospace; max-width: calc(100% - 20px); }
#swim[hidden] { display: none; }
#swim .og-btn { font-family: "Pixelify Sans", monospace; font-size: 20px; line-height: 1; padding: 10px 12px; white-space: nowrap; text-align: center; }
#swim .og-btn.on { background: #8fd3ea; }
@media (max-width: 520px) { #swim { left: 10px; right: 10px; transform: none; } #swim .og-btn { flex: 1; font-size: 10px; padding: 12px 4px; } }

/* a gold carpet in front of every door with something behind it, and at the pool: slanted like the ground, still */
.carpet { position: absolute; z-index: 2; transform: skewX(-45deg); background: repeating-linear-gradient(90deg, #ffd23f 0 calc(3px * var(--s, 2)), #f2b90f calc(3px * var(--s, 2)) calc(4px * var(--s, 2))); border: calc(1px * var(--s, 2)) solid #b8860b; box-shadow: 0 0 0 1px #0f0f0f; pointer-events: none; image-rendering: pixelated; }
#tip { color: #0f0f0f; position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 16px 20px; background: #fdfdfd; border: 4px solid #0f0f0f; box-shadow: 6px 6px 0 #ffbc00; font-family: "Pixelify Sans", monospace; font-size: 20px; text-align: center; }
#tip p { margin: 0; } #tip b { font-weight: 400; padding: 2px 6px; background: #0f0f0f; color: #ffd23f; } #tip .og-btn { font-family: inherit; }
#swim button[data-s="in"] { background: #ffd23f; } #swim.deck button { display: none; } #swim.deck button[data-s="in"] { display: block; }
/* every hint on this page is written the same way: the same face and size, black on white, a hard edge, a gold shadow */
#nudge { position: fixed; z-index: 25; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fdfdfd; color: #0f0f0f; border: 4px solid #0f0f0f; box-shadow: 6px 6px 0 #ffbc00; font-family: "Pixelify Sans", monospace; font-size: 20px; line-height: 1.2; max-width: calc(100% - 20px); }
#nudge b { font-weight: 400; padding: 2px 6px; background: #0f0f0f; color: #ffd23f; } #nudge button { font: inherit; font-size: 20px; padding: 8px 12px; border: 3px solid #0f0f0f; background: #29BA74; box-shadow: 4px 4px 0 #0f0f0f; cursor: pointer; white-space: nowrap; }