/* ==========================================================================
   watch.css — the interactive F-B100W-1A (wx- / wxl-).
   Owned by the simulator builder. Colours come from tokens.css; the LCD
   palette is the signature --lcd set.
   ========================================================================== */

.wxs__mount {
  display: grid;
  place-items: center;
}

.wx {
  display: grid;
  gap: var(--s-6);
  inline-size: 100%;
  max-inline-size: 26rem;
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .wx {
    grid-template-columns: minmax(19rem, 26rem) minmax(16rem, 20rem);
    align-items: center;
    max-inline-size: 52rem;
    gap: var(--s-10, 3rem);
  }
}

/* --------------------------------------------------------------------------
   Stage: the watch and its four buttons
   -------------------------------------------------------------------------- */

.wx__stage {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 420 / 560;
  filter: drop-shadow(0 1.4rem 2.4rem rgb(0 0 0 / 0.5));
  transition: filter var(--dur-3) var(--ease-out);
}

.wx__stage.is-lit {
  filter:
    drop-shadow(0 1.4rem 2.4rem rgb(0 0 0 / 0.5))
    drop-shadow(0 0 2.2rem color-mix(in srgb, var(--backlight) 34%, transparent));
}

.wx__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.wx-strap-lines path {
  stroke: rgb(255 255 255 / 0.06);
  stroke-width: 3;
  fill: none;
}

/* dial print */
.wx-print {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  fill: #e8e9e2;
  letter-spacing: 0.04em;
}
.wx-print--brand { font-size: 15px; letter-spacing: 0.1em; }
.wx-print--gold { fill: #d5b169; font-size: 12px; }
.wx-print--side { font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; }
.wx-print--wr { fill: #c8332b; font-size: 12px; }
.wx-reg { font-size: 8px; }

/* --------------------------------------------------------------------------
   LCD
   -------------------------------------------------------------------------- */

.wx__lcd { display: block; }

#wx-lcd-field { transition: fill var(--dur-2) var(--ease-out); }

#wx-light {
  transition: opacity 480ms var(--ease-out);  /* afterglow */
  pointer-events: none;
}
.wx__stage.is-lit #wx-light { opacity: 1; transition-duration: 90ms; }

.wxl-seg { fill: none; }
.wxl-seg.is-on { fill: #171a12; }
.wxl-seg.is-off { fill: rgb(23 26 18 / 0.08); }
.wxl-seg.is-off.wxl-ghost-off { fill: rgb(23 26 18 / 0.04); }

.wxl-dot { fill: #1c1f16; }
.wxl-dot-rect { fill: #1c1f16; }

.wxl-ind {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: #23261c;
}

.wxl-print {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  fill: #3a3d30;
}

.wxl-divider {
  stroke: rgb(23 26 18 / 0.28);
  stroke-width: 1;
  fill: none;
}

.wxl-glyph { fill: #23261c; }
.wxl-ble {
  fill: none;
  stroke: #23261c;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-hidden { visibility: hidden; }
.is-off-all { opacity: 0; }
.wxl-flash-off { opacity: 0; }

/* the flashing tip of the graphic strip, and Casio's radiating ticks */
html[data-motion='full'] .wxl-blink {
  animation: wxl-blink 1s steps(1, end) infinite;
}
@keyframes wxl-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.15; }
}

/* --------------------------------------------------------------------------
   The four buttons — real <button>s overlaid on the case flanks
   -------------------------------------------------------------------------- */

.wx__btn {
  position: absolute;
  inline-size: max(3.25rem, 13%);
  block-size: max(3.25rem, 9.5%);
  padding: 0;
  border-radius: var(--r-sm);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.wx__btn--a { inset-inline-start: 8.5%; inset-block-start: 31%; }
.wx__btn--b { inset-inline-start: 78.5%; inset-block-start: 31%; }
.wx__btn--c { inset-inline-start: 8.5%; inset-block-start: 52.5%; }
.wx__btn--d { inset-inline-start: 78.5%; inset-block-start: 52.5%; }

/* the visible cap sits inside the hit area so the target stays 44px+ */
.wx__cap {
  position: absolute;
  inset: 22% 18%;
  border-radius: 30%;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(0 0 0 / 0.3));
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}

.wx__btn:hover .wx__cap,
.wx__btn:focus-visible .wx__cap { opacity: 1; }

.wx__btn.is-pressed .wx__cap,
.wx__btn:active .wx__cap {
  opacity: 1;
  transform: scale(0.92);
  background: linear-gradient(180deg, rgb(0 0 0 / 0.4), rgb(255 255 255 / 0.08));
}

/* --------------------------------------------------------------------------
   Side panel: current mode + the button map for this mode
   -------------------------------------------------------------------------- */

.wx__panel {
  border: var(--hairline) solid var(--rule-c);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: var(--s-5);
}

.wx__mode {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lcd);
}

.wx__mode-dot {
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

html[data-motion='full'] .wx__mode-dot {
  animation: fx-pulse 2.6s var(--ease-in-out) infinite;
}

.wx__guide {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--fg-2);
  display: grid;
  gap: var(--s-2);
}

.wx__guide li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: var(--s-3);
  align-items: baseline;
}

.wx__guide-k {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.wx__hint {
  margin-top: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: var(--hairline) solid var(--rule-c);
  font-size: var(--fs-small);
  color: var(--fg-3);
}

@media (prefers-reduced-motion: reduce) {
  .wx__stage,
  #wx-light,
  #wx-lcd-field,
  .wx__cap { transition: none !important; }
}