:root {
  color-scheme: light;
  --surface-page: var(--semantic-color-surface-page-light);
  --surface-raised: var(--semantic-color-surface-raised-light);
  --surface-soft: var(--semantic-color-surface-soft-light);
  --surface-recessed: var(--semantic-color-surface-recessed-light);
  --text-primary: var(--semantic-color-text-primary-light);
  --text-secondary: var(--semantic-color-text-secondary-light);
  --text-inverse: var(--semantic-color-text-inverse-light);
  --border-subtle: var(--semantic-color-border-subtle-light);
  --font-content: var(--font-family-content-english), sans-serif;
  --font-utility: var(--font-family-utility-default), monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--surface-page);
}

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: var(--spacing-large);
  place-items: center;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 1px 1px, rgb(112 99 82 / 0.1) 1px, transparent 0) 0 0 / 24px 24px,
    var(--surface-page);
  font-family: var(--font-content);
  font-size: var(--typography-body-base-font-size);
  font-weight: var(--typography-body-base-font-weight);
  line-height: var(--typography-body-base-line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[lang="ja"] {
  --font-content: var(--font-family-content-japanese), sans-serif;
}

main {
  --card-padding: clamp(var(--spacing-large), 7vw, var(--spacing-xx-large));
  width: 100%;
  max-width: 520px;
  min-width: 0;
  padding: var(--card-padding);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  border: var(--border-thin-width) solid var(--border-subtle);
  border-radius: var(--radius-large);
  box-shadow:
    0 1px var(--shadow-card-blur) var(--shadow-card-color-light),
    0 18px 48px rgb(33 26 18 / 0.12);
  text-align: center;
}

h1,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: var(--spacing-large);
  font-size: clamp(
    var(--typography-headline-h2-font-size),
    8vw,
    var(--typography-headline-h1-font-size)
  );
  font-weight: var(--typography-headline-h1-font-weight);
  letter-spacing: -0.035em;
  line-height: var(--typography-headline-h1-line-height);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

section {
  min-width: 0;
}

.invite-help {
  color: var(--text-secondary);
}

.invite-hero {
  aspect-ratio: 1200 / 630;
  margin: 0 0 var(--spacing-large);
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow:
    var(--shadow-modal-x)
    var(--shadow-modal-y)
    var(--shadow-modal-blur)
    var(--shadow-modal-color-light);
}

.invite-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-line {
  display: block;
}

.invite-code {
  display: block;
  width: 100%;
  margin: var(--spacing-large) auto;
  padding: var(--component-recessed-display-casing-inset);
  color: var(--text-inverse);
  background: var(--color-neutral-20);
  border: 0;
  border-radius: var(--radius-medium);
  box-shadow: inset 0 1px 2px rgb(33 26 18 / 0.16);
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.invite-code:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--semantic-color-action-focus) 72%, white);
  outline-offset: 5px;
}

.invite-code::before {
  display: block;
  height: var(--spacing-tiny);
  content: "";
  background: var(--color-brand-primary-orange);
  border-radius: calc(var(--radius-medium) - var(--component-recessed-display-casing-inset))
    calc(var(--radius-medium) - var(--component-recessed-display-casing-inset)) 0 0;
}

.invite-code > span,
.invite-code > strong {
  display: block;
  background: var(--surface-recessed);
}

.invite-code > span {
  padding: var(--spacing-base) var(--spacing-base) 0;
  color: var(--color-neutral-40);
  font-family: var(--font-utility);
  font-size: var(--typography-utility-label-font-size);
  font-weight: var(--typography-utility-label-font-weight);
  letter-spacing: 0.12em;
  line-height: var(--typography-utility-label-line-height);
  text-transform: uppercase;
}

.invite-code > strong {
  padding: var(--spacing-small) var(--spacing-base) var(--spacing-large);
  color: var(--color-brand-secondary-yellow);
  font-family: var(--font-utility);
  font-size: clamp(1.75rem, 9vw, var(--typography-utility-counter-font-size));
  font-weight: var(--typography-utility-counter-font-weight);
  letter-spacing: 0.12em;
  line-height: var(--typography-utility-counter-line-height);
}

.invite-action {
  margin-bottom: var(--spacing-base);
}

.platform-ios .install-android,
.platform-android .install-ios {
  display: none;
}

.gadget-button {
  --button-face: var(--semantic-color-action-face);
  --button-side: var(--semantic-color-action-secondary-side);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 320px);
  min-height: 56px;
  padding: var(--spacing-base) var(--spacing-large);
  color: var(--semantic-color-action-foreground);
  background: var(--button-face);
  border: var(--component-gadget-button-bevel-top-width) solid rgb(255 255 255 / 0.94);
  border-radius: var(--radius-medium);
  box-shadow:
    inset 0 calc(-1 * var(--component-gadget-button-bevel-bottom-width)) 0
      color-mix(in srgb, var(--color-neutral-40) 35%, transparent),
    0 var(--component-gadget-button-variant-key-resting-side-depth) 0 var(--button-side),
    0 var(--component-gadget-button-variant-key-resting-shadow-offset)
      var(--component-gadget-button-variant-key-resting-shadow-radius)
      rgb(33 26 18 / var(--component-gadget-button-variant-key-resting-shadow-opacity));
  font-size: var(--typography-label-button-font-size);
  font-weight: var(--typography-label-button-font-weight);
  line-height: var(--typography-label-button-line-height);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    translate var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
  cursor: pointer;
  user-select: none;
}

.open-btn {
  --button-side: var(--semantic-color-action-primary-side);
}

.gadget-button:active {
  translate: 0 var(--component-gadget-button-variant-key-pressed-travel);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--color-neutral-40) 30%, transparent),
    0 var(--component-gadget-button-variant-key-pressed-side-depth) 0 var(--button-side),
    0 var(--component-gadget-button-variant-key-pressed-shadow-offset)
      var(--component-gadget-button-variant-key-pressed-shadow-radius)
      rgb(33 26 18 / var(--component-gadget-button-variant-key-pressed-shadow-opacity));
}

.gadget-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--semantic-color-action-focus) 72%, white);
  outline-offset: 5px;
}

.invite-help {
  margin: var(--spacing-x-large) auto var(--spacing-base);
  font-size: var(--typography-body-small-font-size);
  line-height: var(--typography-body-small-line-height);
}

.requested-path {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--text-secondary) 62%, transparent);
  font-family: var(--font-utility);
  font-size: var(--typography-utility-tiny-font-size);
  line-height: var(--typography-utility-tiny-line-height);
  overflow-wrap: anywhere;
}

#content-ja,
#content-en {
  display: none;
}

.lang-ja #content-ja,
.lang-en #content-en {
  display: block;
}

.consent-ja,
.consent-en {
  display: none;
}

.lang-ja .consent-ja,
.lang-en .consent-en {
  display: revert;
}

.analytics-consent {
  position: fixed;
  z-index: 100;
  right: max(var(--spacing-large), env(safe-area-inset-right));
  bottom: max(var(--spacing-large), env(safe-area-inset-bottom));
  left: max(var(--spacing-large), env(safe-area-inset-left));
  display: grid;
  width: min(840px, calc(100% - (var(--spacing-large) * 2)));
  margin: 0 auto;
  padding: var(--spacing-x-large);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-x-large);
  background: var(--surface-raised);
  border: var(--border-thin-width) solid var(--border-strong);
  border-radius: var(--radius-large);
  box-shadow:
    0 10px 0 var(--color-neutral-20),
    0 24px 64px rgb(33 26 18 / 0.24);
  text-align: left;
}

.analytics-consent[hidden],
.analytics-settings[hidden] {
  display: none;
}

.analytics-consent-copy h2 {
  margin: 0 0 var(--spacing-small);
  font-size: var(--typography-headline-h3-font-size);
}

.analytics-consent-copy p {
  max-width: 560px;
  margin-bottom: var(--spacing-small);
  color: var(--text-secondary);
  font-size: var(--typography-body-small-font-size);
}

.analytics-consent-copy a {
  color: var(--color-brand-secondary-blue);
  font-size: var(--typography-body-small-font-size);
}

.analytics-consent-actions {
  display: grid;
  min-width: 320px;
  align-self: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-base);
}

.analytics-consent-choice {
  width: 100%;
  min-height: 52px;
  padding: var(--spacing-medium) var(--spacing-large);
  --button-side: var(--semantic-color-action-secondary-side);
}

.analytics-consent-accept {
  --button-side: var(--semantic-color-action-primary-side);
}

.analytics-consent-close {
  grid-column: 1 / -1;
  justify-self: center;
  padding: var(--spacing-tiny) var(--spacing-medium);
  color: var(--text-secondary);
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--typography-body-small-font-size);
  text-decoration: underline;
}

.analytics-settings {
  position: fixed;
  right: max(var(--spacing-base), env(safe-area-inset-right));
  bottom: max(var(--spacing-base), env(safe-area-inset-bottom));
  padding: var(--spacing-small) var(--spacing-base);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  border: var(--border-thin-width) solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  font: inherit;
  font-size: var(--typography-utility-tiny-font-size);
}

::selection {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--color-brand-secondary-yellow) 68%, white);
}

@media (max-width: 520px) {
  body {
    align-items: start;
    padding: var(--spacing-small);
  }

  main {
    --card-padding: var(--spacing-large);
    border-radius: var(--radius-medium);
  }

  .analytics-consent {
    right: max(var(--spacing-small), env(safe-area-inset-right));
    bottom: max(var(--spacing-small), env(safe-area-inset-bottom));
    left: max(var(--spacing-small), env(safe-area-inset-left));
    width: auto;
    padding: var(--spacing-large);
    grid-template-columns: 1fr;
    gap: var(--spacing-large);
  }

  .analytics-consent-actions {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .analytics-consent-close {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gadget-button {
    transition: none;
  }
}

@media print {
  .analytics-consent,
  .analytics-settings {
    display: none;
  }
}