/* Wags' World — a full-bleed mobile game shell.

   Rules this file follows, in order of importance:

   1. NO JS LAYOUT. The size of everything comes from flexbox plus
      `aspect-ratio` and the safe-area insets. A hand-computed camera fit
      cannot track mobile Safari's collapsing toolbars, and it was leaving
      black bands the user could see. CSS tracks it for free.
   2. NO BORDER around the display. It runs the full width of the screen.
   3. THE DECK ABSORBS THE REST. `#deck` is the only flexible row, so leftover
      height becomes thumb room instead of a letterbox.
   4. Sizes are percentages of the app width, so the proportions hold from a
      320 px phone to the 560 px cap on desktop. Fixed clamps drift. */

:root {
  --ink:   #eef1f7;
  --muted: #8b94a6;
  --bg:    #0a0b0e;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app {
  position: relative;
  width: min(100vw, 560px);
  height: 100vh;
  height: 100dvh;                 /* wins wherever supported; tracks the toolbar */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------- status line ---------------- */
#hud {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-t) + 8px) 14px 7px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
#hud .brand { font-weight: 700; color: var(--ink); letter-spacing: .2em; }
#hud .status { margin-left: auto; display: flex; align-items: center; gap: 6px; letter-spacing: .1em; }
#hud .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6ee7a0; box-shadow: 0 0 8px #6ee7a0;
}
#hud .where { font-variant-numeric: tabular-nums; }

/* ---------------- the display ---------------- */
#stage {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 160 / 208;        /* MUST equal the canvas backing aspect,
                                     or CSS stretch distorts the tiles */
  background: #000;
  position: relative;
}
#screen {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* a faint glass sheen so the display reads as a screen, not a hole */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 34%);
}

/* ---------------- control deck ---------------- */
#deck {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4% 4% calc(var(--safe-b) + 4%);
}

/* --- D-pad: the SP's plus-shaped cross --- */
#dpad {
  position: relative;
  width: 31%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  touch-action: none;
  --plus: polygon(34% 0, 66% 0, 66% 34%, 100% 34%, 100% 66%, 66% 66%, 66% 100%,
                  34% 100%, 34% 66%, 0 66%, 0 34%, 34% 34%);
}
#dpad .cross,
#dpad .cross::after {
  position: absolute;
  inset: 0;
  clip-path: var(--plus);
}
#dpad .cross {
  background: #15171b;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .7));
}
#dpad .cross::after {
  content: "";
  inset: 3px;
  background: linear-gradient(178deg, #5a606a, #363b43 46%, #24272c);
}
#dpad .dp {
  position: absolute;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
}
#dpad .up    { left: 34%; top: 0;    width: 32%; height: 34%; }
#dpad .down  { left: 34%; top: 66%;  width: 32%; height: 34%; }
#dpad .left  { left: 0;   top: 34%;  width: 34%; height: 32%; }
#dpad .right { left: 66%; top: 34%;  width: 34%; height: 32%; }
#dpad .on { background: rgba(255, 255, 255, .11); }
#dpad .up.on    { border-radius: 8px 8px 0 0; }
#dpad .down.on  { border-radius: 0 0 8px 8px; }
#dpad .left.on  { border-radius: 8px 0 0 8px; }
#dpad .right.on { border-radius: 0 8px 8px 0; }
#dpad .dp::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  border: 6px solid transparent;
  opacity: .40;
}
#dpad .up::before    { transform: translate(-50%,-62%); border-bottom-color: #c6cdd7; border-top-width: 0; }
#dpad .down::before  { transform: translate(-50%,-38%); border-top-color: #c6cdd7; border-bottom-width: 0; }
#dpad .left::before  { transform: translate(-62%,-50%); border-right-color: #c6cdd7; border-left-width: 0; }
#dpad .right::before { transform: translate(-38%,-50%); border-left-color: #c6cdd7; border-right-width: 0; }

/* --- A / B: small, dark, identical --- */
#ab {
  /* a DEFINITE width, or the buttons' percentage/aspect sizing inside a
     shrink-to-fit flex box resolves to auto and collapses to the letter */
  width: 36%;
  display: flex;
  align-items: center;
  gap: 3.5%;
  transform: rotate(-9deg);
  flex: 0 0 auto;
}
#ab button {
  appearance: none;
  flex: 1 1 0;                      /* share #ab equally */
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .09);
  font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
  color: #cbd1db;
  cursor: pointer;
  touch-action: manipulation;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  background: radial-gradient(125% 125% at 33% 20%, #5d646e, #343941 58%, #22262b);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .16),
    inset 0 -4px 8px rgba(0, 0, 0, .62),
    0 3px 7px rgba(0, 0, 0, .6);
}
#ab button:active {
  transform: translateY(2px);
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .68), 0 1px 3px rgba(0, 0, 0, .6);
}

/* --- START / SELECT --- */
#system {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
#system .syskeys,
#system .syslabels { display: flex; gap: 5px; }
#system button {
  appearance: none;
  width: 44px;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .09);
  cursor: pointer;
  background: linear-gradient(180deg, #434951, #23262b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -2px 5px rgba(0, 0, 0, .6),
    0 2px 5px rgba(0, 0, 0, .55);
}
#system button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .55);
}
#system .syslabels span {
  width: 44px;
  text-align: center;
  font: 600 7.5px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .06em;
  color: rgba(198, 206, 218, .5);
}

/* ---------------- first-run hint, then out of the way ---------------- */
#hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b) + 6px);
  transform: translateX(-50%);
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(6, 7, 10, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--muted);
  transition: opacity .5s ease;
  pointer-events: none;
}
#hint b { color: var(--ink); font-weight: 600; }
#hint.gone { opacity: 0; }

/* landscape phones: the display is the constraint, so trim the chrome */
@media (orientation: landscape) and (max-height: 520px) {
  /* Landscape is this layout's hard case: a portrait-aspect game shown on a
     landscape viewport can only ever be height-bound, so let the display TAKE
     all the leftover height (flex) rather than a fixed share, and keep the
     deck to a compact strip. */
  #hud { padding-top: calc(var(--safe-t) + 4px); padding-bottom: 4px; font-size: 9px; }
  #stage {
    flex: 1 1 auto;
    height: auto;
    width: auto;
    max-width: 100%;
    aspect-ratio: 160 / 208;
    margin: 0 auto;
  }
  #deck {
    flex: 0 0 auto;
    width: 100%;
    padding: 1vh 3% calc(var(--safe-b) + 1vh);
  }
  #dpad { width: 17vh; }
  #ab { width: 20vh; }
  #system button { width: 40px; }
  #system .syslabels span { width: 40px; }
  #hint { display: none; }
}

/* the sound chip mirrors the trot chip; both live in the HUD */
#hud #sound {
  appearance: none;
  margin-left: 4px;
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  cursor: pointer;
}
#hud #sound[aria-pressed="true"] {
  background: rgba(155, 188, 15, .18);
  border-color: rgba(155, 188, 15, .5);
  color: #cbe04a;
}

/* ---------------- auto-trot chip ---------------- */
#hud #trot {
  appearance: none;
  margin-left: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  font: 700 8.5px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
}
#hud #trot[aria-pressed="true"] {
  background: rgba(110, 231, 160, .16);
  border-color: rgba(110, 231, 160, .5);
  color: #8ff0b6;
}
#hud .status { margin-left: auto; }

/* ---------------- the town map (SELECT) ----------------
   A full-screen sheet: the minimap with numbered pins, and a list of
   destinations under it. The list is what you actually tap -- five labels on a
   460 px map collide, and a numbered list is a 44 px touch target. */
#townmap {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-t) + 10px) 12px calc(var(--safe-b) + 10px);
  background: rgba(6, 7, 10, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#townmap[hidden] { display: none; }
.tm-panel {
  width: min(100%, 380px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tm-head { display: flex; align-items: center; gap: 8px; }
.tm-title {
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .18em;
  color: var(--ink);
}
#tm-close {
  appearance: none;
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
  font: 700 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
}
.tm-stage {
  position: relative;
  aspect-ratio: 461 / 420;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #12131a;
}
#tm-img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
#tm-pins { position: absolute; inset: 0; }
.tm-pin {
  position: absolute;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  appearance: none;
  border-radius: 50%;
  border: 2px solid #0a0b0e;
  background: #e8e2d2;
  color: #14151a;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.tm-pin.park  { background: #7fd08a; }
.tm-pin.water { background: #79b6f0; }
.tm-pin.home  { background: #ff8f6a; }
#tm-you {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3), 0 0 12px 4px rgba(255, 255, 255, .45);
  pointer-events: none;
}
#tm-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
#tm-list button {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
  color: var(--ink);
  font: 500 12.5px/1 ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
#tm-list button:active { background: rgba(255, 255, 255, .1); }
#tm-list .n {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #e8e2d2; color: #14151a;
  font: 700 10px/19px ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}
#tm-list .d { margin-left: auto; color: var(--muted); font-size: 10.5px; letter-spacing: .06em; }

@media (orientation: landscape) and (max-height: 520px) {
  .tm-panel { width: min(100%, 560px); }
  .tm-stage { aspect-ratio: 461 / 200; }
}


/* discovered destinations: the map is a checklist, so it has to look like one */
#tm-list button.found .n { background: rgba(155, 188, 15, .22); color: #cbe04a; }
#tm-list button.found > span:nth-child(2) { color: #dfe4ec; }