:root {
  --cta-x: 40px;      /* "Toss Coin", "Nevermind" and "Toss back" sit this far from the side edges... */
  --cta-y: 40px;      /* ...and from the bottom edge */
  --corner-x: 2vw;    /* side margin of the top-left text */
  --corner-y: 1.75vh; /* top margin of the top-left text */
  --coin-d: 45vh; /* diameter of the large coin shown for entering / viewing a coin */
  overflow-x: hidden;
  /* Fountain "stage" box, set by applyStage() in index.html (full height >= 1024px wide, ramps
     down to 0.5x on narrow screens, top-anchored). Fallbacks = full viewport height. */
  --stage-h: 100vh;
  --stage-w: calc(100vh * 1.777);
  --stage-dx: 0px; /* slight horizontal nudge: the art isn't centered in the image files */
}


html, body {
  background: #fff;
}

body {
    margin: 0;
    padding: 0;
    font-size: 24pt;
    height: 200vh;  
    overscroll-behavior: none;
    -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

/* Hide every scrollbar (the page's and the About panel's); scrolling still works.
   The page's own scrollbar belongs to the root element, not the body. */
html, body, #about-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
/* Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#about-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}


* {
  font-family: 'Source Code Pro', monospace;
}

header {
  position: fixed;
  top: var(--corner-y);
  left: var(--corner-x);
  padding: 0 2.5vw 0 0;
  z-index: 9000;
}

p {
  margin: 0;
}

h1 {
  font-weight: 500;
  line-height: 0pt;
  z-index: 10000;
}

p, h1, h2 {
  user-select: none;
  font-size: 24pt;
}

li {
  font-size: 24pt; /* = 32px */
  line-height: 40px;
  margin-bottom: 20px; /* paragraph spacing between menu options */
  white-space: nowrap;
  cursor: pointer;
}

#typedtext {
  position: fixed;
  text-decoration: none;  
  z-index:1000;
  /* hoverable and clickable from the first typed letter (the dotted hover underline follows the typing) */
  pointer-events: auto;
}

/* Legibility over the fountain art: every text element with .halo gets
   (1) a solid 2px white outline (stacked hard shadows, no blur) and
   (2) a checkerboard-dithered white halo behind it (::before copy of the text, thick white
       stroke, masked to a pixel checker so it echoes the dither of the art).
   data-halo is kept in sync with the text by the helper at the top of sketch.js. */
.halo {
  position: relative; /* ids like #typedtext override this with position: fixed */
  isolation: isolate;
  text-shadow:
    -2px -2px 0 #fff, 0 -2px 0 #fff, 2px -2px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff,
    -2px 2px 0 #fff, 0 2px 0 #fff, 2px 2px 0 #fff;
}

.halo::before {
  content: attr(data-halo);
  position: absolute;
  inset: 2px 0 -2px 0; /* nudged 2px down so the halo sits slightly below the text */
  z-index: -1;
  pointer-events: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  white-space: pre-wrap;
  color: #fff;
  text-shadow: none;
  text-decoration: none;
  -webkit-text-stroke: 7px #fff;
  stroke-linejoin: round;
  -webkit-mask-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
  mask-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
  -webkit-mask-size: calc(var(--halo-cell, 2px) * 2) calc(var(--halo-cell, 2px) * 2);
  mask-size: calc(var(--halo-cell, 2px) * 2) calc(var(--halo-cell, 2px) * 2);
}

/* Hover state for clickable text (.dot-link): a square-dotted underline that skips the ink, like the
   dotted underline in the Figma landing frame but with square dots. Browsers draw round dots for
   dotted underlines, so the underline is a native (skip-ink) solid underline on a transparent copy
   of the text (::after, text from data-halo, see sketch.js), cut into square dots with a mask:
   dot = gap = 0.1em = the underline thickness. */
.dot-link { position: relative; }
.dot-link::after {
  content: attr(data-halo);
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  padding: inherit;
  box-sizing: inherit;
  white-space: pre-wrap;
  color: transparent;
  text-shadow: none;
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 0.1em;
  text-decoration-skip-ink: auto;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 0.1em, transparent 0.1em 0.2em);
  mask-image: repeating-linear-gradient(90deg, #000 0 0.1em, transparent 0.1em 0.2em);
}
.dot-link:hover::after { display: block; }
.introGif-container {
  padding: 0;
  margin: 0 auto;
  height: 100vh;
  width: 100vw;
  /* Landing: distant fountain gif */
  background-image: url('src/fountain-afar.gif');
  background-size: var(--stage-w) var(--stage-h);
  background-repeat: no-repeat;
  background-position: calc(50% + var(--stage-dx)) 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}
canvas {
  z-index: 10;
  position: fixed;
  left: 50%;
  top: 0;
  height: var(--stage-h);
  width: var(--stage-w);
  transform: translateX(calc(-50% + var(--stage-dx)));
  pointer-events: none;
  /* Hidden on landing so fountain-afar.gif shows through */
  display: none;
  opacity: 0;
}

.basin-container {
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* top-anchored, like the intro gif and canvas */
}

/* Inner wrapper: same full-height stage box as #fountainzoom so the last frame hands off to basin.gif without a jump */
.basin-wrapper {
  position: relative;
  flex: none;
  left: var(--stage-dx);
  height: var(--stage-h);
  width: var(--stage-w);
  background-image: url('src/basin.gif');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

form {
  text-align: center;
  position: fixed;
}
#coin-input{
  display: none;
  z-index: 300;
}

.entry-page img{
  height: var(--coin-d);
  position: fixed;
  bottom: 60px;
  left: calc(50vw - 22.5vh);
  
  animation: entry-page-img-fade-in 0.3s forwards;
}

@keyframes entry-page-img-fade-in{
  from{opacity:0}
  to{opacity:1}
}


textarea:focus, input:focus{
    outline: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: .6; /* Firefox */
}

#coin-show{
    display: none;
    z-index: 8000000;
    text-align: center;
    position: fixed;
}


#whitecircle {
  pointer-events: none;
  display: none;

    height: 51vh;
    width: 51vh;
    position: fixed;
    bottom: calc(60px - 4vh);
    left: calc(50vw - 25.5vh);
  
    overflow-x: none;
/*   background-color: #ffffff; */
/*   mix-blend-mode: screen; */
    z-index: 5000;
}



/* ---- Coin text: a circular text frame (entry and viewing) --------------------------------
   The frame is the coin's circle. Two half-width floats carry a circular shape-outside (radius =
   coin radius - 20px of padding), so lines get shorter toward the top and bottom and follow the
   curve. .coin-text-body holds the text; app JS (centerCoinText) sets its margin-top so the text
   block is vertically centered on the coin. Font size scales with the coin, so about the same amount
   of text fits at any screen height (24pt at a 900px-tall window). */
.coin-text {
  --pad: 20px;
  position: fixed;
  bottom: 60px;
  left: calc(50vw - var(--coin-d) / 2);
  width: var(--coin-d);
  height: var(--coin-d);
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 50%;
  font-size: max(14px, calc(var(--coin-d) * 0.079));
  line-height: 1.25;
  text-align: center;
}
/* The two half-width curve shapes. They are real elements placed before the text (a float only
   shapes text that comes after it in the page, so a ::after on the frame wouldn't work). */
.coin-text-float {
  width: 50%;
  height: 100%;
  pointer-events: none;
}
.coin-text-float.left {
  float: left;
  shape-outside: radial-gradient(circle calc(var(--coin-d) / 2 - var(--pad)) at 100% 50%, transparent 99.5%, #000 100%);
}
.coin-text-float.right {
  float: right;
  shape-outside: radial-gradient(circle calc(var(--coin-d) / 2 - var(--pad)) at 0% 50%, transparent 99.5%, #000 100%);
}
.coin-text-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #000;
  outline: none;
  caret-color: #000;
  cursor: text;
}
/* placeholder (same white as the old textarea placeholder) */
.coin-text-body[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #fff;
  opacity: 0.6;
  pointer-events: none;
}
/* coin text you can read but not edit */
#coin-show .coin-text { z-index: 1; }
#coin-show .coin-text-body { cursor: default; }
#coin-show a .coin-text-body { text-decoration: underline; color: #24249e; cursor: pointer; }

.retrieve-image{
    text-align: center;
    resize: none;
    font-size: 24pt;
    border-radius: 50%;
    border: 0px solid #609;
    background: none;
    height: var(--coin-d);
    width: var(--coin-d);
    position: fixed;
    bottom: 60px;
    left: calc(50vw - var(--coin-d) / 2);
    overflow: visible;
}




#save-button{
    font-size: 24pt;
    color: black;
    align-items: flex-start;
    cursor: pointer;
    background-color: white;
    box-sizing: border-box;
    margin: 0em;
    font-family: 'Source Code Pro', monospace;
    padding: 0;
    border: none;
    position: fixed;
    /* "Toss Coin" sits bottom-right and "Nevermind" bottom-left, on one shared line, --cta-x / --cta-y in */
    right: var(--cta-x);
    bottom: var(--cta-y);
    line-height: normal;
}

#nevermind {
    position: fixed;
    display: none;
    left: var(--cta-x);
    bottom: var(--cta-y);
    pointer-events: all;
    cursor: pointer;
  z-index: 100;
}

#nevermind p {
    margin-bottom: 0;
    line-height: normal;
}

.hide{
  display: none !important;
}



#gallery {
  position: absolute;
  /* Position relative to basin-wrapper using percentages */
  /* Fills the basin wrapper; coins are confined to the pool by POOL_POLYGON in sketch.js */
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 115;
  /* The gallery fills the whole basin, so it must not swallow clicks meant for the menu and
     buttons underneath; only the coins themselves are clickable. */
  pointer-events: none;
  mix-blend-mode: multiply;
  /* Uncomment to debug positioning: */
  /* background-color: rgba(0, 0, 255, 0.2); */
}


#gallery > svg {
  padding: 0.8vw 0 0 0;
}

#gallery > img {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  /* Percentage of basin wrapper width. Phones (< 768px): 3.1%. Tablet and up: 25px tall in the
     1528x860 design (35.3px wide = 2.31% of 1528; the coin art is 151x107). */
  width: 3.1%;
  height: auto;
  transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  #gallery > img { width: 2.31%; }
}

/* Hover: an unblended, dithered copy of the hovered coin (positioned by sketch.js) shows it in full color.
   #gallery is multiplied into the pool as a group, so the copy lives above it (115) as a sibling. */
#coin-hover {
  position: absolute;
  display: none;
  z-index: 116;
  pointer-events: none; /* hover and clicks keep going to the real coin underneath */
  /* Dither only the outer rim (--coin-rim, ~2px): a solid elliptical core (layer 1, sized in px by
     sketch.js via --core-rx/--core-ry) is unioned
     with the same checkerboard as the text halo (layer 2), so the center of the coin keeps its
     full, unfiltered color and the edge is dithered. No stroke/halo. */
  -webkit-mask-image:
    radial-gradient(ellipse var(--core-rx, 0px) var(--core-ry, 0px) at 50% 50%, #000 98%, transparent 100%),
    conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
  mask-image:
    radial-gradient(ellipse var(--core-rx, 0px) var(--core-ry, 0px) at 50% 50%, #000 98%, transparent 100%),
    conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
  -webkit-mask-size: 100% 100%, calc(var(--halo-cell, 2px) * 2) calc(var(--halo-cell, 2px) * 2);
  mask-size: 100% 100%, calc(var(--halo-cell, 2px) * 2) calc(var(--halo-cell, 2px) * 2);
  -webkit-mask-repeat: no-repeat, repeat;
  mask-repeat: no-repeat, repeat;
}

#bottom-container {
    z-index: 1000;
    position: fixed;
    display: flex;
    flex-direction: row;
    width: 95%;
    height: 10vh;
    bottom: 0;
    margin: 2vh 2.5vw 2.5vh 2.5vw;
    pointer-events: none;
}

#plus, #minus {
    position: absolute;
    display: flex;
    left: 0;
    bottom: 0;
    pointer-events: all;
    cursor: pointer;
}


#plus p {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 54pt;
    -webkit-text-stroke: 1px black;
    line-height: 52pt;
}
#minus p {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 54pt;
    -webkit-text-stroke: 1px black;
    line-height: 52pt;
}

ul{
      padding-inline-start: 16px;
}

#menu-container {
  width: max-content; /* wide enough that no option wraps */
  position: fixed;
  bottom: 10vh;
  left: 1.6vw;
  display: none;

}

#about-container {
  width: clamp(260px, 28vw, 420px); /* wide enough that the copy doesn't wrap into short lines */
  max-height: 80vh;
  position: fixed;
  right: 2.5vw;
  display: none;
  z-index: 200; /* above the coins in #gallery (z-index 115) */
  overflow-x: none;
  overflow-y: scroll;
  bottom: 10vh;
  text-align: right;
}

#about-container p {
    font-size: 18pt;
    line-height: 1.4;
    margin-bottom: 20px; /* paragraph spacing */
}
#about-container p:last-child { margin-bottom: 0; }

#about {
    position: absolute;
    display: flex;
    right: 5px;
    bottom: 0;
    pointer-events: all;
    cursor: pointer;
}

#about-close {
    position: absolute;
    display: flex;
    right: 0;
    bottom: 0;
    pointer-events: all;
    cursor: pointer;
}

#about > p {
    margin-bottom: 0;
    line-height: 1.39;
    font-size: 36pt;
}

#about-close > p {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 55pt;
    -webkit-text-stroke: 1px black;
    line-height: 50pt;
    transform: rotate(45deg);
}

#tossback {
    position: fixed; /* positioned against the page, not #bottom-container, so it shares the CTA margins */
    display: none;
    right: var(--cta-x);
    bottom: var(--cta-y);
    pointer-events: all;
    cursor: pointer;
}

#tossback p {
    margin-bottom: 0;
    line-height: normal; /* same box height as "Nevermind" / "Toss Coin" so all three share one line */
}


/* ---------------------------------------------------------------------------
   Mobile (< 768px) — "New mobile flow" from Figma (402px-wide artboards).
   The fountain stage is pinned to the top (--stage-h); the text and menu use the
   empty space below it. Sizes are px values from the artboards.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --corner-x: 32px; --corner-y: 31px; } /* same as the intro text at the bottom-left */
  /* "Nevermind" + "Toss Coin" are 18 characters (0.6em each) side by side: shrink them just enough to
     leave a 24px gap between them inside the side margins, on any phone width */
  #nevermind p, #save-button, #tossback p {
    font-size: min(24pt, calc((100vw - 2 * var(--cta-x) - 24px) / 10.8));
  }
  /* Intro text: bottom of the screen. Basin text: just under the stage. */
  #typedtext {
    top: auto;
    bottom: 31px;
    left: 32px;
    width: calc(100vw - 55px);
  }
  #secondtyped {
    position: fixed;
    top: calc(var(--stage-h) + 34px);
    left: 32px;
    width: calc(100vw - 55px);
    font-size: 32px;
  }

  /* Menu starts open; "-" / "+" and "?" sit in the bottom corners */
  #menu-container {
    display: block;
    max-width: none;
    left: 32px;
    bottom: 63px;
  }
  #menu-container ul { margin: 0; padding: 0; }
  #menu-container li {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 20px;
  }
  #bottom-container {
    left: 32px;
    right: 32px;
    width: auto;
    margin: 0;
    bottom: 23px;
    height: 70px;
  }
  #plus p, #minus p {
    font-size: 68.8px;
    line-height: 70px;
    margin-bottom: -16px;
  }
  #plus p { margin-bottom: -4px; }
  #about { right: 0; }
  #about > p {
    font-size: 56px;
    line-height: 70px;
  }
  body.mobile-menu-open #about { display: none !important; }

  /* Menu open: the "You look in your pocket..." text stacks directly above the menu list (20px gap).
     --menu-h = 3 items x (40px line + 20px spacing); the menu sits 63px above the bottom edge. */
  :root { --menu-h: 180px; }
  body.mobile-menu-open #secondtyped {
    top: auto;
    bottom: calc(63px + var(--menu-h) + 20px);
  }

  /* The text steps aside while a coin is being viewed or a new coin is being written */
  body.coin-open #secondtyped,
  body.adding-coin #secondtyped { display: none !important; }

  /* Info open: about copy replaces the basin text; "?" becomes "x" */
  body.mobile-info-open #secondtyped,
  body.mobile-info-open #plus { display: none !important; }
  #about-container {
    /* anchored 40px above the "x" glyph so a longer copy grows upward (may overlap the basin) */
    top: auto;
    left: 32px;
    right: auto;
    bottom: 99px;
    width: 70vw;
    max-height: none;
    text-align: left;
    overflow: visible;
  }
  #about-container p {
    font-size: 24px;
    line-height: normal;
    margin-bottom: 20px;
  }
  #about-container p:last-child { margin-bottom: 0; }

  /* Fade the basin text and "?" in when they return (after the menu / about copy has faded out) */
  #secondtyped, #about { animation: mobile-fade-in 0.3s ease-out; }
  @keyframes mobile-fade-in { from { opacity: 0; } to { opacity: 1; } }
  #about-close { right: 0; }
  #about-close > p {
    font-size: 0;
    -webkit-text-stroke: 0;
    transform: none;
    line-height: 70px;
    margin: 0 0 -23px;
  }
  #about-close > p::before {
    content: "x";
    font-size: 56px;
    font-weight: 400;
  }
  #about-close > p::after {
    content: "x";
    font-size: 56px;
    font-weight: 400;
  }
}

/* After the exhibition closes (see SUBMISSIONS_CLOSE in sketch.js) nobody can add a coin: hide the
   coin menu and its +/- buttons. Looking at coins and the About panel keep working. */
body.submissions-closed #menu-container,
body.submissions-closed #plus,
body.submissions-closed #minus {
  display: none !important;
}