/* doupaw.site — one engraved plate, no product story.
   Native surface handling: system type, system semantic colours, two
   appearances, safe areas, one material for the caption. */

:root {
  color-scheme: light dark;

  --bg: #f2f2f7;
  --label: #1c1c1e;
  --secondary: #6c6c70;
  --tertiary: #8e8e93;
  --hairline: rgba(60, 60, 67, 0.16);
  --material: rgba(255, 255, 255, 0.78);
  --material-edge: rgba(255, 255, 255, 0.9);
  --plate-a: #ff375f;

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --inset: max(20px, env(safe-area-inset-left));
  --inset-right: max(20px, env(safe-area-inset-right));
  --inset-bottom: max(18px, env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --label: #f2f2f7;
    --secondary: #aeaeb2;
    --tertiary: #8e8e93;
    --hairline: rgba(84, 84, 88, 0.4);
    --material: rgba(28, 28, 30, 0.6);
    --material-edge: rgba(255, 255, 255, 0.08);
    --plate-a: #ff375f;
  }
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--label);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

::selection { background: var(--plate-a); color: #fff; }

#plate {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
#plate.is-ready { opacity: 1; }

.hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--inset-bottom) + 74px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tertiary);
  white-space: nowrap;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
}
.hint.is-gone { opacity: 0; }

.caption {
  position: fixed;
  left: var(--inset);
  right: var(--inset-right);
  bottom: var(--inset-bottom);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 16px 18px;
  overflow: hidden;
  border-radius: 16px;
  border: 0.5px solid var(--hairline);
  background: var(--material);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0.5px 0 var(--material-edge);
}

.caption-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 590;
  letter-spacing: -0.01em;
  color: var(--label);
}

.caption-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--tertiary);
  white-space: nowrap;
}

.caption-meta .sep {
  width: 1px;
  height: 9px;
  background: var(--tertiary);
  opacity: 0.5;
  transform: translateY(0.5px);
}

.noscript {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 13px;
  color: var(--secondary);
}

@media (max-width: 420px) {
  .caption { padding: 14px 16px; }
  .caption-name { font-size: 14px; }
  .caption-meta { font-size: 10.5px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #plate { transition: none; }
  .hint { transition: none; }
}