:root {
  --yellow: #feeeae;
  --mint: #89e6d8;
  --teal: #008c90;
  --navy: #032b39;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--teal); }

a:focus-visible { outline: none; }
a:focus-visible .drawing,
a:focus-visible.drawing {
  outline: 3px dashed var(--teal);
  outline-offset: 6px;
  border-radius: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Home: drawings placed as in Tomo's layouts ---------- */

.home {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.stage {
  position: relative;
  aspect-ratio: var(--dratio);
  width: min(100%, calc((100dvh - 2rem) * 2048 / 1880));
}

.piece {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  width: var(--dw);
  display: block;
}

/* Phones and other tall, narrow screens use the phone layout (may scroll a little). */
@media (max-aspect-ratio: 4/5) {
  .home { padding: 0; place-items: start center; }
  .stage {
    aspect-ratio: var(--pratio);
    width: min(100%, 640px);
  }
  .piece {
    left: var(--px);
    top: var(--py);
    width: var(--pw);
  }
}

/* Normal / hover drawings stacked in the same spot. */
.swap { display: block; }
.swap:not(.piece) { position: relative; }
.piece img, .piece.swap img { width: 100%; }
.swap .on-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.swap img { transition: opacity 0.15s ease; }

a:hover .swap .on-hover,
a:focus-visible .swap .on-hover,
a:active .swap .on-hover { opacity: 1; }
a:hover .swap .normal,
a:focus-visible .swap .normal,
a:active .swap .normal { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .button .drawing { transition: transform 0.2s ease; }
  .button:hover .drawing,
  .button:focus-visible .drawing { animation: wobble 0.5s ease; transform: scale(1.04); }
  .button:hover .label,
  .button:focus-visible .label { animation: bob 0.5s ease; }
}

@keyframes wobble {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.05) rotate(-3deg); }
  60%  { transform: scale(1.04) rotate(2deg); }
  100% { transform: scale(1.04) rotate(0); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-6%); }
}

/* ---------- Section pages ---------- */

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.page-home {
  width: clamp(96px, 18vw, 160px);
  border-radius: 8px;
}

.page main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding-bottom: 4rem;
}

.page .page-label { width: min(70vw, 340px); }
.page .page-drawing { width: min(55vw, 240px); }

.page h1 {
  margin: 0.5rem 0 0;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 400;
}

.page p {
  margin: 0;
  font-size: 1.35rem;
}

.back {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.35rem 1.1rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 1.25rem;
  text-decoration: none;
}
.back:hover { background: var(--mint); }
.back:focus-visible { outline: 3px dashed var(--teal); outline-offset: 4px; }