// The host may also load a published stylesheet from before the two-theme entry.
.pisell-hdl-kiosk .hdl-entry-shell[data-entry-theme] {
  &,
  .hdl-entry-screen {
    --hdl-entry-background: #11100e;
    --hdl-entry-ink: #e8bd75;
    --hdl-entry-copy: #e3c68e;
    --hdl-entry-border: #d7a95570;
    --hdl-entry-indicator-background: #dba64d06;
    --hdl-entry-indicator-shadow: 0 0 32px #e1a3400d;
    --hdl-entry-focus: #ffe5b2;
    --hdl-entry-touch-border: #f2ce8e;
    --hdl-entry-touch-background: #ffd07a1a;
    --hdl-entry-control-background: rgba(17, 16, 14, 0.76);
    --hdl-entry-support-background: rgba(17, 16, 14, 0.4);
    --hdl-entry-notice-background: rgba(24, 19, 13, 0.94);
    --hdl-entry-loading-background: rgba(17, 16, 14, 0.72);
    color-scheme: dark;

    &[data-entry-theme='cream'] {
      --hdl-entry-background: #f4ecdc;
      --hdl-entry-ink: #bb3b25;
      --hdl-entry-copy: #96462f;
      --hdl-entry-border: #bb3b2545;
      --hdl-entry-indicator-background: transparent;
      --hdl-entry-indicator-shadow: none;
      --hdl-entry-focus: #7c2c1c;
      --hdl-entry-touch-border: #b7442a;
      --hdl-entry-touch-background: #ffdfb61a;
      --hdl-entry-control-background: rgba(255, 248, 236, 0.8);
      --hdl-entry-support-background: rgba(244, 236, 220, 0.6);
      --hdl-entry-notice-background: rgba(255, 248, 236, 0.96);
      --hdl-entry-loading-background: rgba(244, 236, 220, 0.72);
      color-scheme: light;
    }
  }

  & {
    position: relative;
    display: block;
    min-height: 720px;
    overflow: hidden;
    background: var(--hdl-entry-background);
    color: var(--hdl-entry-copy);
  }

  .hdl-entry-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background: var(--hdl-entry-background);
    color: var(--hdl-entry-ink);
    font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    isolation: isolate;
  }

  .hdl-entry-screen::after {
    content: none;
    background: none;
  }

  .hdl-entry-screen__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform-origin: 50% 70%;
    will-change: transform;
    animation: hdl-entry-food-drift 14s ease-in-out infinite alternate;
  }

  .hdl-entry-screen__hero {
    position: absolute;
    top: calc(50% - var(--hdl-entry-background-crop-height) / 2);
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 0;
    width: var(--hdl-entry-background-width);
    max-width: none;
    height: var(--hdl-entry-background-height);
    object-fit: cover;
    object-position: center;
    opacity: 1;
    filter: none;
    pointer-events: none;
    transform: translateX(-50%);
    will-change: auto;
    animation: none;

    &--cream {
      top: calc(
        50% - var(--hdl-entry-background-crop-height) / 2 -
          var(--hdl-entry-background-cream-offset)
      );
    }

    &[hidden] {
      display: none;
    }
  }

  .hdl-entry-screen__stage {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    z-index: 1;
    width: var(--hdl-entry-canvas-width);
    height: var(--hdl-entry-canvas-height);
    padding: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .hdl-entry-screen .hdl-entry-brand-mark {
    position: absolute;
    top: 23%;
    left: 50%;
    width: 57%;
    transform: translateX(-50%);
  }

  .hdl-entry-brand-mark img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2012 / 862;
    object-fit: contain;
  }

  .hdl-entry-invitation {
    --hdl-entry-tap-cycle: 3.6s;
    position: absolute;
    top: 39.8%;
    left: 50%;
    display: grid;
    width: max-content;
    max-width: 90%;
    justify-items: center;
    gap: var(--hdl-entry-invitation-gap);
    color: var(--hdl-entry-ink);
    pointer-events: none;
    transform: translateX(-50%);
    transition: transform 180ms ease, color 180ms ease;
  }

  .hdl-entry-tap-indicator {
    position: relative;
    display: grid;
    width: var(--hdl-entry-indicator-size);
    height: var(--hdl-entry-indicator-size);
    place-items: center;
    border: 1.5px solid var(--hdl-entry-border);
    border-radius: 50%;
    background: var(--hdl-entry-indicator-background);
    box-shadow: var(--hdl-entry-indicator-shadow);
  }

  .hdl-entry-tap-icon {
    display: block;
    width: var(--hdl-entry-icon-size);
    height: var(--hdl-entry-icon-size);
    overflow: visible;
  }

  .hdl-entry-tap-hand,
  .hdl-entry-tap-contact {
    transform-box: view-box;
    transform-origin: 116px 76px;
  }

  .hdl-entry-tap-hand {
    animation: hdl-entry-hand-tap var(--hdl-entry-tap-cycle) ease-in-out
      infinite;
  }

  .hdl-entry-tap-contact {
    animation: hdl-entry-contact-flash var(--hdl-entry-tap-cycle) ease-out
      infinite;
  }

  .hdl-entry-tap-indicator::before,
  .hdl-entry-tap-indicator::after {
    position: absolute;
    inset: -1px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    content: '';
    animation: hdl-entry-invitation-wave var(--hdl-entry-tap-cycle) ease-out
      infinite;
    animation-delay: 0.6s;
  }

  .hdl-entry-tap-indicator::after {
    animation-delay: 0.85s;
  }

  .hdl-entry-tap-copy {
    max-width: 100%;
    color: var(--hdl-entry-copy);
    font-size: var(--hdl-entry-copy-size);
    font-weight: 550;
    line-height: 1.25;
    letter-spacing: 0.025em;
    text-align: center;
    white-space: normal;
  }

  // A native button owns the whole homepage; controls are independent siblings above it.
  .hdl-entry-screen__start {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;

    &:focus,
    &:focus-visible {
      outline: none;
    }

    &:focus-visible ~ .hdl-entry-screen__stage .hdl-entry-invitation {
      outline: 3px solid var(--hdl-entry-focus);
      outline-offset: 16px;
      border-radius: 16px;
    }

    &:not(:disabled):active ~ .hdl-entry-screen__stage .hdl-entry-invitation {
      color: var(--hdl-entry-focus);
      transform: translateX(-50%) scale(0.97);
    }

    &:disabled ~ .hdl-entry-screen__stage .hdl-entry-invitation {
      opacity: 0.55;
    }
  }

  .hdl-entry-touch-feedback {
    position: absolute;
    top: var(--hdl-entry-touch-y, 47%);
    left: var(--hdl-entry-touch-x, 50%);
    width: var(--hdl-entry-touch-size);
    height: var(--hdl-entry-touch-size);
    border: 2px solid var(--hdl-entry-touch-border);
    border-radius: 50%;
    background: var(--hdl-entry-touch-background);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.15);
  }

  .hdl-entry-screen__start.is-touched .hdl-entry-touch-feedback {
    animation: hdl-entry-touch-response 600ms ease-out;
  }

  .hdl-entry-technical-support {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 6px 0;
    background: var(--hdl-entry-support-background);
    color: var(--hdl-entry-copy);
    font-size: 16px;
    line-height: normal;
    text-align: center;
    cursor: pointer;
  }

  .hdl-entry-screen__header {
    position: absolute;
    top: 45px;
    right: 5%;
    left: 5%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    pointer-events: none;
  }

  .hdl-entry-theme-toggle,
  .hdl-entry-language {
    border: 1px solid var(--hdl-entry-border);
    background: var(--hdl-entry-control-background);
    color: var(--hdl-entry-copy);
    box-shadow: none;
    backdrop-filter: blur(22px);
    pointer-events: auto;
  }

  .hdl-entry-theme-toggle {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    border-radius: 50%;
    padding: 0;
    font-size: 30px;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 180ms ease, color 180ms ease;

    &:active {
      transform: scale(0.94);
    }
  }

  .hdl-entry-language {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 86px;
    flex: 0 1 324px;
    grid-template-columns: 37px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 13px;
    border-radius: 999px;
    padding: 8px 24px;
  }

  .hdl-entry-language > svg,
  .hdl-entry-language__chevron svg {
    width: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .hdl-entry-language > svg {
    color: var(--hdl-entry-ink);
    pointer-events: none;
  }

  .hdl-entry-language select {
    // 原生 select 覆盖整块热区，包含两侧图标及留白。
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    appearance: none;
    border: 0;
    border-radius: inherit;
    outline: 0;
    padding: 8px 59px 8px 74px;
    background: transparent;
    color: inherit;
    font-size: 25px;
    font-weight: 700;
    cursor: pointer;
  }

  .hdl-entry-language select option {
    background: var(--hdl-entry-background);
    color: var(--hdl-entry-copy);
  }

  .hdl-entry-language__chevron {
    display: grid;
    grid-column: 3;
    place-items: center;
    pointer-events: none;
    transform: rotate(90deg);
  }

  .hdl-entry-language:focus-within,
  .hdl-entry-theme-toggle:focus-visible,
  .hdl-entry-technical-support:focus-visible,
  .hdl-entry-screen__notices button:focus-visible {
    outline: 3px solid var(--hdl-entry-focus);
    outline-offset: 5px;
  }

  .hdl-entry-screen[data-compact='true'] {
    .hdl-entry-screen__header {
      top: 40px;
      right: 20px;
      left: 20px;
      gap: 12px;
    }

    .hdl-entry-language {
      min-height: 72px;
      grid-template-columns: 28px minmax(0, 1fr) 16px;
      gap: 8px;
      padding: 8px 16px;
    }

    .hdl-entry-language select {
      padding: 8px 42px 8px 52px;
      font-size: 20px;
    }
  }

  .hdl-entry-screen__notices {
    position: absolute;
    top: var(--hdl-entry-notices-top);
    left: 50%;
    z-index: 4;
    width: var(--hdl-entry-notices-width);
    max-height: calc(100% - var(--hdl-entry-notices-top) - 24px);
    overflow: auto;
    border: 1px solid var(--hdl-entry-border);
    border-radius: 17px;
    padding: 16px 20px;
    background: var(--hdl-entry-notice-background);
    color: var(--hdl-entry-copy);
    transform: translateX(-50%);
  }

  .hdl-entry-screen__assistance,
  .hdl-entry-screen__device-status {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  .hdl-entry-screen__device-status + .hdl-entry-screen__assistance {
    margin-top: 12px;
  }

  .hdl-entry-screen__assistance.is-toggle {
    cursor: pointer;
  }

  .hdl-entry-screen__assistance code {
    display: block;
    margin-top: 6px;
    color: inherit;
    font-size: 15px;
  }

  .hdl-entry-screen__error {
    width: 100%;
    margin: 12px 0 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;

    &:first-child {
      margin-top: 0;
    }

    small {
      color: inherit;
      opacity: 0.8;
    }

    button {
      align-self: flex-start;
      margin-top: 6px;
      border: 1px solid var(--hdl-entry-border);
      border-radius: 999px;
      padding: 10px 20px;
      background: var(--hdl-entry-control-background);
      color: inherit;
      cursor: pointer;
    }
  }

  & > .hdl-operation-overlay {
    background: var(--hdl-entry-loading-background);
    color: var(--hdl-entry-copy);

    .hdl-operation-overlay__spinner {
      border-color: var(--hdl-entry-border);
      border-top-color: var(--hdl-entry-ink);
    }
  }

  .hdl-entry-screen[data-motion-paused='true'] {
    .hdl-entry-screen__background,
    .hdl-entry-tap-hand,
    .hdl-entry-tap-contact,
    .hdl-entry-tap-indicator::before,
    .hdl-entry-tap-indicator::after {
      animation-play-state: paused;
    }
  }
}

@keyframes hdl-entry-food-drift {
  from {
    transform: translate3d(-0.45%, 0.2%, 0) scale(1.03);
  }
  to {
    transform: translate3d(0.65%, -0.45%, 0) scale(1.105);
  }
}

@keyframes hdl-entry-hand-tap {
  0%,
  8%,
  38%,
  100% {
    transform: translateY(0) scale(1);
  }
  18%,
  22% {
    transform: translateY(-10px) scale(0.94);
  }
}

@keyframes hdl-entry-contact-flash {
  0%,
  10% {
    opacity: 0.45;
    transform: scale(0.97);
  }
  18%,
  22% {
    opacity: 1;
    transform: scale(1);
  }
  36% {
    opacity: 0;
    transform: scale(1.22);
  }
  45%,
  100% {
    opacity: 0.45;
    transform: scale(0.97);
  }
}

@keyframes hdl-entry-invitation-wave {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  12% {
    opacity: 0.3;
  }
  64%,
  100% {
    opacity: 0;
    transform: scale(1.38);
  }
}

@keyframes hdl-entry-touch-response {
  0% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pisell-hdl-kiosk .hdl-entry-shell[data-entry-theme] .hdl-entry-screen {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }

    .hdl-entry-screen__background {
      transform: none;
      will-change: auto;
    }

    .hdl-entry-tap-hand,
    .hdl-entry-tap-contact {
      opacity: 1;
      transform: none;
    }

    .hdl-entry-tap-indicator::before,
    .hdl-entry-tap-indicator::after {
      opacity: 0;
    }
  }
}