*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-normal);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--color-text);
  color: var(--color-bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Layout */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-height: 100vh;
  min-height: 100svh;
  padding: max(var(--space-4), env(safe-area-inset-top)) 0
    max(var(--space-6), env(safe-area-inset-bottom));
}

@media (min-width: 48rem) {
  .page {
    padding-top: max(var(--space-6), env(safe-area-inset-top));
  }
}

/* Stage: the video is the page. Its height is capped so the name and contract still
   fit on the first screen, but never below 56% of the viewport; width follows at 16:9,
   so the frame is never cropped or stretched. */

.stage {
  width: min(100%, var(--video-width), max((100vh - var(--below-stage)) * 16 / 9, 56vh * 16 / 9));
  width: min(100%, var(--video-width), max((100svh - var(--below-stage)) * 16 / 9, 56svh * 16 / 9));
}

.stage__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg);
}

.stage__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-bg);
}

/* Lower part of the frame: the poster's "ACI" wordmark sits in the middle. */
.stage__play {
  position: absolute;
  bottom: 10%;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-control-hover);
  border-radius: var(--radius);
  background: var(--color-scrim);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

/* The row keeps its height from the first paint, so revealing the buttons (once the
   script is ready) moves nothing; without JavaScript, or if the video fails, it stays
   empty. The side gutter applies only while the video is full-bleed; with margin beside
   the video, the buttons line up with its right edge. */
.stage__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  min-height: calc(var(--control-height) + var(--space-2));
  padding-top: var(--space-2);
  padding-inline: max(0px, var(--space-4) - (100vw - 100%) / 2);
}

.stage__controls:not(.is-ready) {
  visibility: hidden;
}

/* Fits the longer label of each pair (Pause/Play, Unmute/Mute): no width change. */
.stage__controls .control {
  min-width: 6.5em;
}

/* Controls */

.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-control);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

/* The one filled control on the page: the call to action. */
.control--primary {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
}

@media (hover: hover) {
  .control:hover:not(:disabled, .is-copied),
  .stage__play:hover {
    border-color: var(--color-text);
    color: var(--color-text);
  }

  .control--primary:hover:not(:disabled) {
    border-color: var(--color-focus);
    background-color: var(--color-focus);
    color: var(--color-bg);
  }
}

.control:active:not(:disabled),
.stage__play:active {
  background-color: var(--color-press);
}

.control--primary:active:not(:disabled) {
  background-color: var(--color-primary-press);
}

.control:focus-visible,
.stage__play:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Over the video the ring may cross white pixels; a black halo keeps it visible. */
.stage__play:focus-visible {
  box-shadow: 0 0 0 6px var(--color-bg);
}

.control:disabled {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* Token identity */

/* One column exactly as wide as .token: an "auto" column would grow to the unbreakable
   width of a long contract address and widen the page. */
.token {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-5);
  width: min(100% - 2 * var(--space-4), var(--content-width));
}

.token__identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 100%;
}

.token__logo {
  flex: none;
  width: var(--logo-size);
  height: var(--logo-size);
  border: var(--border);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--color-logo-bg);
}

.token__text {
  min-width: 0;
}

.token__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-name);
  text-transform: uppercase;
  text-wrap: balance;
}

.token__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-5);
  margin-top: var(--space-1);
}

.token__ticker {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  letter-spacing: 0.06em;
}

.token__prompt {
  color: var(--color-accent);
}

/* Narrow phones: the name would wrap beside the logo and pull the block off-centre, so
   the identity stacks on one centre line instead. */
@media (max-width: 25rem) {
  .token__identity {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .token__meta {
    justify-content: center;
  }
}

/* X account link, on the ticker row: same label + value rhythm as the contract row.
   24px tall keeps it a comfortable touch target without pushing the row apart. */

.x-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 24px;
  padding-block: 2px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.x-link__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

.x-link__handle {
  text-decoration: underline;
  text-decoration-color: var(--color-control);
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .x-link:hover {
    color: var(--color-text);
  }

  .x-link:hover .x-link__handle {
    text-decoration-color: currentColor;
  }
}

.x-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Actions: the contract box and Buy share a row when they fit and stack when they do
   not. Items may shrink below their content (min-width: 0), so a long address ends in
   an ellipsis instead of widening the page. */

.token__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-2) var(--space-3);
  width: 100%;
}

.contract {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.contract__label {
  flex: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

.contract__address,
.contract__soon {
  min-width: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.contract__address {
  overflow: hidden;
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contract__soon {
  color: var(--color-text-muted);
}

/* One click selects the whole address; the short form on phones cannot be selected,
   so a manual copy never mixes the two. */
.contract__full {
  -webkit-user-select: all;
  user-select: all;
}

.contract__short {
  display: none;
  -webkit-user-select: none;
  user-select: none;
}

.contract__copy {
  flex: none;
  /* Wide enough for "Copied!" so the button never changes size. */
  min-width: 7.5em;
}

.contract__copy.is-copied {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.buy {
  min-height: calc(var(--control-height) + 2 * var(--space-1) + 2px);
  padding-inline: var(--space-5);
}

.contract__error {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
  text-align: center;
  text-wrap: balance;
}

/* Phones: show a shortened address; the copy button still copies the full one. After a
   failed copy the script adds .is-expanded, which shows the full address in two even
   lines, selected for manual copying. */
@media (max-width: 37.4375rem) {
  .contract__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .contract__short {
    display: inline;
  }

  .contract.is-expanded {
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-3);
  }

  .contract.is-expanded .contract__address {
    flex-basis: 100%;
    max-inline-size: 22ch;
    margin-inline: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .contract.is-expanded .contract__full {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .contract.is-expanded .contract__short {
    display: none;
  }
}