/* The park map.

   The scene is three.js (script.js). Everything on this sheet is the park's
   printed matter laid over it: the ribbon banner, the ride signs, the ticket
   stubs for the controls, the paper tag that names a ride. Theme-park
   signage, in the lettering of a 1960s souvenir map, standing in a real
   place.

   Without WebGL (or before the script runs) there is no scene, and the rides
   are what they are in the HTML: a sheet of tickets on the sea. */

:root {
  --sea: #0E5B66;
  --sea-2: #1E8C93;
  --sand: #F2C77B;
  --red: #D8432B;
  --red-dark: #A92F1C;
  --mint: #8FE3CF;
  --yellow: #FFC93C;
  --cream: #FFF6DD;
  --ink: #3A2415;
  --sign: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --hand: "Gochi Hand", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(#8FD3E8, #1E8C93 45%, #0E5B66);
  color: var(--ink);
  font-family: var(--hand);
  -webkit-text-size-adjust: 100%;
}

/* ---- without the scene: a sheet of tickets ------------------------------ */

.stage { padding: 150px 16px 120px; }
#scene { display: none; }

.rides {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.ride {
  display: block;
  padding: 12px 16px 14px;
  background: var(--cream);
  border: 3px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.ride b { display: block; font-family: var(--sign); font-weight: 400; font-size: 1.2rem; color: var(--red); letter-spacing: .02em; }
.ride span { font-size: 1.05rem; }
.ride:hover, .ride:focus-visible { background: var(--yellow); outline: none; }
.lands { display: none; }

/* ---- with the scene ------------------------------------------------------ */

.has-3d, .has-3d body { height: 100%; overflow: hidden; }
.has-3d .stage { position: fixed; inset: 0; padding: 0; overflow: hidden; }
.has-3d #scene { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.has-3d .overlay { position: absolute; inset: 0; pointer-events: none; }
.has-3d .rides, .has-3d .lands { display: block; position: absolute; inset: 0; margin: 0; padding: 0; max-width: none; list-style: none; }

/* A ride's sign: a painted board on a post, standing on the roof. */
.has-3d .ride {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  padding: 5px 11px 3px;
  border-width: 2.5px;
  background: var(--cream);
  white-space: nowrap;
  clip-path: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: background .15s, box-shadow .15s, opacity .3s;
  will-change: transform;
}
.has-3d .ride::after {                 /* the post */
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 3px;
  height: 12px;
  margin: 2px 0 0 -1.5px;
  background: var(--ink);
}
.has-3d .ride b { font-size: .95rem; margin: 0; }
.has-3d .ride span { display: none; }
.has-3d .ride:hover, .has-3d .ride.hot, .has-3d .ride:focus-visible {
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 2;
}
.has-3d .ride:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.has-3d .ride { margin-top: -14px; }   /* leave room for the post */

.has-3d .land-name {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--sign);
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yellow);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  white-space: nowrap;
  opacity: .92;
  will-change: transform;
}
.has-3d .lot-name { font-size: .95rem; color: var(--cream); }

/* From high up, the signs would bury the park: names shrink, lands go. */
.has-3d .stage.far .ride { opacity: .82; }
.has-3d .stage.far .ride b { font-size: .75rem; }
.has-3d .stage.far .land-name { opacity: 0; }

/* A sign that would cover a nearer one waits until the camera is closer.
   After the .far rule, and as specific, so it wins. */
.has-3d .stage .ride.tucked { opacity: 0; pointer-events: none; }
.has-3d .stage .ride.tucked:focus-visible { opacity: 1; }

/* Flying into a ride: the signs get out of the way. */
.has-3d .stage.leaving .ride, .has-3d .stage.leaving .land-name { opacity: 0; transition: opacity .4s; }

/* ---- the ribbon ---------------------------------------------------------- */

.ribbon-wrap {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 60px);
}

.ribbon {
  position: relative;
  margin: 0;
  padding: 10px 34px 12px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--sign);
  font-weight: 400;
  font-size: clamp(1.1rem, 3.6vw, 2.1rem);
  letter-spacing: .03em;
  line-height: 1.05;
  border: 3px solid var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 28px;
  height: 100%;
  background: var(--red-dark);
  border: 3px solid var(--ink);
  z-index: -1;
}
.ribbon::before { left: -22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.ribbon::after  { right: -22px; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }

.sub {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 12px;
  background: var(--cream);
  border: 3px solid var(--ink);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  transform: rotate(-2deg);
}

/* ---- controls: ticket stubs ---------------------------------------------- */

.controls {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: max(14px, env(safe-area-inset-top));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
html:not(.has-3d) .controls { display: none; }

.controls button, .to-list {
  font-family: var(--sign);
  font-size: 1rem;
  letter-spacing: .03em;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 8px 16px 6px;
  cursor: pointer;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: inset 0 -4px 0 rgba(58, 36, 21, .25);
}
.controls button:hover, .to-list:hover { background: var(--cream); }
.controls button:active { transform: translateY(2px); }
#zoom-all { background: var(--mint); }

.to-list {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 34px));
  z-index: 3;
  background: var(--cream);
  text-decoration: none;
}

.park-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 6px 12px max(6px, env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--sand);
  font-size: .95rem;
}
.park-foot a { color: var(--cream); }

/* ---- the caption: a paper tag ------------------------------------------ */

.cap {
  position: fixed;
  z-index: 4;
  max-width: 250px;
  padding: 8px 12px 10px;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-50%, calc(-100% - 22px)) rotate(-1.5deg);
  pointer-events: none;
  font-size: 1.05rem;
  line-height: 1.2;
}
.cap b {
  display: block;
  font-family: var(--sign);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--red);
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.cap[hidden] { display: none; }

@media (max-width: 560px) {
  .controls button, .to-list { font-size: .85rem; padding: 7px 12px 5px; }
  #zoom-in, #zoom-out { display: none; }
  .controls { top: auto; bottom: max(40px, calc(env(safe-area-inset-bottom) + 34px)); }
  .park-foot { font-size: .8rem; }
  .has-3d .ride b { font-size: .8rem; }
  .has-3d .ride { padding: 4px 8px 2px; }
}

/* ?card: the share image. The scene, the ribbon and the ride signs only. */
.card .controls, .card .to-list, .card .park-foot, .card .cap,
.card body > div[role="region"] { display: none !important; }
.card .ride b { font-size: .8rem; }
.card .ride { padding: 4px 9px 2px; }
.card .land-name { font-size: 1.2rem; }