/* Stage 2F.9 -- Continuous MiPai Reveal Surface (开奖咪牌).
   Replaces the Stage 2F.8 Fix#2 three-independent-card flip (explicitly
   ruled out by manual acceptance: "三张独立卡片不是老板需要的交互"). The
   new mechanism is ONE continuous scratch mask (static/js/draw-mipai-
   canvas.js, <canvas> + destination-out compositing) sitting directly on
   top of the real #data-dw-result-bar content -- there is no longer a
   separate empty reveal area: the mask covers the exact same DOM node
   static/js/draw-workspace.js already writes the real result into (see
   that file's no-future-leakage discipline, unchanged by this rewrite --
   the mask is a purely visual/interactive layer on top of already-correct
   data, never a second source of truth).

   Smart MiPai (css/mipai.css) is a completely separate feature (algorithm
   prediction consumption, not draw results) and keeps its own simpler
   swap-reveal styling -- do not merge the two files, see that file's own
   header comment for why. */

/* Stage 2F.13 spec 十八/十九: once a real reveal completes the mask hides
   and [data-dw-result-bar]'s real content (below) shows through directly --
   boss's manual acceptance found that content hugging the surface's left
   edge (flex-direction:row's default single-item alignment) instead of
   reading as its own centered "reveal moment". flex-direction:column +
   justify-content:center centers it on BOTH axes; .mipai-surface__rescratch-
   btn (a normal-flow sibling now, see its own rule below) naturally stacks
   as a centered third line under it once unhidden. */
.mipai-surface {
  position: relative;
  border-radius: var(--radius-md);
  /* Stage 2F.14 Manual Acceptance Fix #1 proactive audit finding (spec
     十七 "顺带做一次小范围产品经理审计...移动端"): confirmed via real
     Playwright measurement that this value was already too short on the
     CURRENTLY LIVE Staging build (pre-fix, unrelated to the idle-overlay
     change above) -- getBoundingClientRect showed the real content stack
     (brand + status/timer/hint/caption/button) needing ~248px at 360-899px
     widths against only a 170-210px mask, clipped by .mipai-mask's own
     overflow:hidden. Net effect: "Telegram @Gx181" (and, depending on
     scroll, the countdown digits) rendered completely INVISIBLE on every
     real phone width tested (320/359/390/430/639/900px) -- confirmed
     identically reproducible on live Staging before this fix, so this is
     a genuine pre-existing bug this stage's audit caught, not a
     regression from the idle-overlay restructuring. Bumped to fit with a
     safety margin, same climbing-by-breakpoint shape as before.
     min-height: 285px; */
  min-height: 285px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.mipai-surface > [data-dw-result-bar] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Hero-scoped only (not the shared draw_result_bar.html macro's base
   styling, which /live, /history and 最近5期 also use unmodified) -- centers
   each wrapped line of the equation/tags row as its own unit, and gives the
   equation the "第一行最大" weight spec 十九 asks for in this one reveal
   context specifically. */
.mipai-surface [data-draw-result-bar] { justify-content: center; }
.mipai-surface [data-draw-result-bar] .draw-result-bar__equation { font-size: clamp(1.8rem, 4vw, 2.75rem); }

/* spec 十七: on desktop the Hero must read as the dominant element of the
   first viewport, not a small utility widget -- these breakpoints climb
   into the spec's suggested 220-340px band as the viewport grows. Kept in
   this one file (not split across draw-workspace.css too) after an early
   draft discovered a real cross-file cascade-order bug: two files each
   media-querying the same selector, loaded in the wrong order, silently
   let the smaller value win at desktop widths. */
/* Stage 2F.14 Fix #1 audit: the old 640px breakpoint bumped this to 210px
   here -- still clipped (measured content needs ~248px in this band, same
   content, clamp()'d font sizes haven't grown yet at 640px) -- folded into
   the 285px base above instead of a separate tier, since both bands need
   the same room. */
@media (min-width: 900px) {
  .mipai-surface { min-height: 260px; }
}
@media (min-width: 1200px) {
  .mipai-surface { min-height: 300px; }
}

/* The mask sits ABOVE [data-dw-result-bar]'s real content (draw_result_bar
   macro output), not beside an empty placeholder -- spec 十二: "遮罩下方
   直接是完整开奖结果". Manual Acceptance Fix #1: PERMANENT by default (no
   longer `hidden` in markup) -- see home.html's comment. Only fully
   `hidden` again once a real reveal has actually completed (JS still sets
   `mask.hidden = true` at that moment so the revealed result shows
   through with nothing on top of it). Stage 2F.13 Fix #3 (spec 十一):
   cursor:grab is now unconditional, not state-gated -- every mask state
   covers the latest COMPLETED draw and is always scratchable. */
.mipai-mask {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  box-sizing: border-box;
  touch-action: none; /* the mask owns pointer/touch drag -- no page-scroll fighting */
  cursor: grab;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.mipai-mask:active { cursor: grabbing; }

/* Stage 2F.13 spec 八/九/十一: the single real content group -- brand,
   caption, countdown, hint -- centered together as one unit (real
   getBoundingClientRect geometry, not just text-align:center) with
   deliberate breathing room between lines, replacing the old split
   between a canvas-painted top-anchored brand string and an
   independently-centered status/hint stack. */
.mipai-mask__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  pointer-events: none;
  max-width: 100%;
}

/* Stage 2F.14 Manual Acceptance Fix #1: nested flex column, same gap/
   centering as its parent so status/timer/hint/caption/button stack
   identically to before the brand/idle split -- purely a visibility unit,
   not a new layout. Fades out the instant a real scratch trail starts
   (draw-mipai-canvas.js adds .is-scratching to the mask only after a
   genuine pointermove-driven erase, never on pointerdown alone -- see
   that file's _stampSegment()), so "等待阶段的所有操作提示" retreat as one
   group instead of the individual ad-hoc toggles this replaces. Short
   opacity transition (spec: ~120-200ms, no elaborate animation) then a
   delayed visibility:hidden so the hidden direct-reveal button also
   leaves the keyboard tab order during an active gesture -- visibility
   flips back instantly (0s delay) the moment .is-scratching is removed,
   so the overlay reappears immediately on 重新咪牌/a fresh IDLE arm. */
.mipai-idle-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms var(--ease-standard, ease), visibility 0s linear 0s;
}
.mipai-mask.is-scratching .mipai-idle-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--ease-standard, ease), visibility 0s linear 160ms;
}
@media (prefers-reduced-motion: reduce) {
  .mipai-idle-overlay,
  .mipai-mask.is-scratching .mipai-idle-overlay {
    transition: none;
  }
}
.mipai-mask[hidden] { display: none; }

/* Passive states (waiting for the draw itself) read as slightly quieter
   than the "ready to scratch" state -- spec 十: "轻微反馈", not a second
   visual system. Deliberately `filter`, NOT `opacity`: an early draft used
   opacity here and real-browser testing caught it visibly bleeding the
   covered previous-period ball digits through the mask (opacity reduces
   the whole layer's alpha, so whatever [data-dw-result-bar] renders
   underneath shows through) -- filter:saturate/brightness changes the
   canvas's own painted pixels without touching its alpha compositing. */
.mipai-mask[data-mipai-state="countdown"] .mipai-canvas,
.mipai-mask[data-mipai-state="drawing"] .mipai-canvas,
.mipai-mask[data-mipai-state="syncing"] .mipai-canvas,
.mipai-mask[data-mipai-state="delayed"] .mipai-canvas {
  filter: saturate(0.82) brightness(0.94);
}

.mipai-mask.is-clearing { pointer-events: none; }
.mipai-mask.is-clearing .mipai-canvas { transition: opacity 320ms var(--ease-decel); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .mipai-mask.is-clearing .mipai-canvas { transition: none; }
}

.mipai-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Stage 2F.13 spec 九/十三: "Telegram @Gx181" -- the mask's own brand line,
   a distinct role from the Hero header's Sponsor slot (spec 十三: never the
   same link). Formerly painted onto the canvas texture itself, top-anchored
   (see draw-mipai-canvas.js's removed brand-text block) specifically to
   avoid colliding with this DOM stack -- now a real member of that same
   stack instead, second-largest layer per spec's visual hierarchy. Present
   across every passive/ready mask state (not gated to countdown), matching
   spec 十七/二十一: RESULT-arrived and NEXT_PERIOD both still show it. */
.mipai-mask__brand {
  color: #fff;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: var(--weight-semibold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  opacity: 0.92;
}

.mipai-mask__status {
  color: #fff;
  font-size: 0.95rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.mipai-mask__hint {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
}

/* Stage 2F.13 Fix #3 (spec 二十七/二十八): explicitly names the period the
   mask actually covers -- kept visually smallest/quietest of the content
   group since it's a clarifying label, not the focal point, but must
   still read clearly so "当前第N期" is never confused with the Hero
   header's own "下一期 N+1" number right above it. */
.mipai-mask__caption {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
}

/* Stage 2F.12 P1-3 (spec 七), enlarged Stage 2F.13 spec 十: the countdown
   digits are the Canvas's own dominant visual layer -- boss's manual
   acceptance found the original 1.9rem read as "content on a canvas", not
   a deliberate focal point. clamp() lets it read as genuinely large at the
   Hero's real desktop width (spec's suggested 38-60px band) while still
   shrinking safely on narrow viewports. Only shown while actually counting
   down: hidden in every other mask state so it never duplicates
   __status's own WAIT_LABELS text (开奖中.../正在同步.../数据稍有延迟...). */
.mipai-mask__timer {
  color: #fff;
  font-size: clamp(2.375rem, 4vw, 3.75rem);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  display: none;
}
.mipai-mask[data-mipai-state="countdown"] .mipai-mask__timer {
  display: block;
}

/* Real <button>, real keyboard focus -- spec 十三: accessibility/impatient
   users must never be forced through pointer-only scratching. Stage 2F.14
   Manual Acceptance Fix #1: now a descendant of .mipai-mask__content
   (pointer-events:none, inherited by .mipai-idle-overlay too) -- explicit
   auto override so it stays clickable, same posture as when it was a
   pointer-events-unaffected sibling before the idle-overlay wrap. */
.mipai-mask__reveal-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  margin-top: var(--space-1);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(11, 14, 20, 0.35);
  color: #fff;
  font-size: 0.78rem;
  cursor: pointer;
}
.mipai-mask__reveal-btn:hover,
.mipai-mask__reveal-btn:focus-visible {
  background: rgba(11, 14, 20, 0.55);
  border-color: #fff;
}
.mipai-mask__reveal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Stage 2F.13 Fix #3 (spec 十七/十八): brief "轻提示" shown when a
   genuinely new result arrives and re-covers the mask out from under a
   user who was still looking at (or mid-scratch on) the previous target --
   static/js/draw-workspace.js toggles [hidden] and auto-hides it again a
   few seconds later. Sits above the mask (z-index 6 > mask's 5) so it's
   never occluded by the fresh cover it's announcing. */
.mipai-toast {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(11, 14, 20, 0.72);
  color: #fff;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.mipai-toast[hidden] { display: none; }

@media (max-width: 359px) {
  /* Stage 2F.14 Fix #1 audit: this used to SHRINK min-height to 160px here
     -- exactly backwards, since narrower screens wrap text onto more
     lines, needing MORE vertical room, not less (measured content height
     here was 195px against this 160px mask, still clipped, just less
     severely than the 360-899px range's 78px overflow). The 230px base
     above already comfortably covers the smaller-font content measured at
     this width (195px) with margin to spare -- no override needed. */
  .mipai-mask { gap: var(--space-2); padding: var(--space-3); }
  .mipai-mask__content { gap: var(--space-2); }
  .mipai-idle-overlay { gap: var(--space-2); }
  .mipai-mask__brand { font-size: 1rem; }
  .mipai-mask__status { font-size: 0.8rem; }
  .mipai-mask__hint { font-size: 0.7rem; }
  .mipai-mask__caption { font-size: 0.7rem; }
  .mipai-toast { font-size: 0.7rem; padding: 0.3rem 0.7rem; white-space: normal; max-width: 90%; text-align: center; }
}