:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #313740;
  background: #f6f7f9;
  --spinner-size: min(78vw, 33dvh, 288px);
}

* { box-sizing: border-box; }

html { min-width: 0; }

body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

.app {
  width: 100%;
  max-width: 950px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(15px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.intro { text-align: center; }

.intro h1 {
  margin: 0;
  font-size: clamp(16px, 4.4vw, 21px);
  font-weight: 750;
  letter-spacing: .02em;
  line-height: 1.4;
}

.intro p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #7b8592;
  line-height: 1.45;
}

.toys {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: start;
  gap: 12px;
}

.toy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.toy h2 {
  font-size: 12px;
  font-weight: 700;
  color: #6b7481;
  line-height: 1.5;
  margin: 0;
  letter-spacing: .08em;
}

.spinner {
  width: var(--spinner-size);
  height: var(--spinner-size);
  position: relative;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 56%, #f0f2f5 100%);
  border: 1px solid #e8ebf0;
  box-shadow: 0 6px 22px rgba(33, 42, 57, .045);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
  outline: none;
}

.spinner:active { cursor: grabbing; }
.spinner:focus-visible { outline: 2px solid #8897b5; outline-offset: 4px; }

.orbit {
  position: absolute;
  inset: 18%;
  border: 1px dashed #e1e5ea;
  border-radius: 50%;
  pointer-events: none;
}

.hand, .face {
  position: absolute;
  display: grid;
  place-items: center;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  line-height: 1;
  font-weight: normal;
  font-variant-emoji: emoji;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: center center;
}

.hand {
  z-index: 1;
  width: 1.28em;
  height: 1.28em;
  font-size: calc(var(--spinner-size) * .225);
  will-change: transform;
}

/* CSSの初期配置。JavaScriptが有効なら同じ位置から円運動を開始する。 */
.hand--top    { transform: translate(-50%, -50%) translateY(calc(var(--spinner-size) * -.32)); }
.hand--right  { transform: translate(-50%, -50%) translateX(calc(var(--spinner-size) * .32)); }
.hand--bottom { transform: translate(-50%, -50%) translateY(calc(var(--spinner-size) * .32)); }
.hand--left   { transform: translate(-50%, -50%) translateX(calc(var(--spinner-size) * -.32)); }

.face {
  z-index: 2;
  transform: translate(-50%, -50%); /* 顔の位置のみ固定。回転は一切加えない */
  width: 1.35em;
  height: 1.35em;
  font-size: calc(var(--spinner-size) * .255);
  background: rgba(255, 255, 255, .93);
  border-radius: 50%;
}

@media (min-width: 740px) {
  :root { --spinner-size: min(32vw, 55dvh, 316px); }
  .app { justify-content: center; gap: 32px; }
  .toys { grid-template-columns: 1fr 1fr; gap: 28px; }
  .toy { gap: 15px; }
  .toy h2 { font-size: 14px; }
  .intro h1 { font-size: 23px; }
  .intro p { font-size: 13px; }
}

@media (max-height: 520px) and (max-width: 739px) {
  .app { gap: 8px; padding-top: 7px; padding-bottom: 7px; }
  .toys { gap: 7px; }
  .toy { gap: 3px; }
  .intro p { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { scroll-behavior: auto; }
}