* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;            /* exactly one screen: nothing to scroll */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* Artwork fills the screen except a thin strip of controls at the bottom.
   svh = the screen height with the phone browser's bars showing, so the bars can
   never cover Reset or View Project #2 (when they hide, a little black shows below). */
.page {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
}

.artwork {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  cursor: crosshair;
  touch-action: none;          /* the artwork takes every touch for drawing; the page doesn't scroll anyway */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Fallback: the photo, still, filling the same area (cover, like the artwork) */
.artwork-fallback {
  object-fit: cover;
  object-position: 50% 50%;
  cursor: default;
}

.artwork[hidden] {
  display: none;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* Reset: plain text link style */
.reset {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: #fff;
  font: inherit;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 4px 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.reset:hover {
  border-bottom-color: #fff;
}

.reset:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

/* View Project #2: simple outlined button, same as the Dream Lake page's button */
.project-link {
  display: inline-block;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 8px 20px;
}

.project-link:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}