/* ==========================================================================
   SNACK WHEEL — style.css  (Figma-matched rebuild)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --bg:           #D5EBF8;
  --dot-color:    #B8D4EC;
  --pink-light:   #F2B0C0;
  --pink-dark:    #E07090;
  --pink-rim:     #C04870;
  --blue-btn:     #7AAECF;
  --blue-shadow:  #4878A0;
  --cream:        #F5EDD8;
  --border-dark:  #3A2010;
  --yellow-bg:    #FEFCE4;
  --detail-blue:  #84C0D8;
  --detail-blue-dark: #5A9AB8;
  --logo-pink:    #C05878;
  --logo-rose:    #DC8090;
  --ink:          #2A1A10;
  --ink-mid:      #5A4035;
  --white:        #FFFFFF;
  --moral-pill:   #B8D4E8;

  /* Wheel fits fully inside the 430px body — 20px breathing room each side */
  --wheel-size:   min(390px, calc(100vw - 40px));
  --wheel-r:      calc(var(--wheel-size) / 2);

  --font:   'Noto Sans TC', 'PingFang TC', sans-serif;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
}

/* --------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  /* Staggered hex dot pattern — two identical layers offset by (half-col, half-row).
     Layer 1 tile: 20×40px  →  dots at rows 0, 40, 80 …
     Layer 2 tile: 20×40px  →  dots at rows 20, 60, 100 …  shifted right 10px
     Result: classic honeycomb stagger, never a grid.                          */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, var(--dot-color) 1.8px, transparent 1.8px),
    radial-gradient(circle, var(--dot-color) 1.8px, transparent 1.8px);
  background-size: 20px 40px, 20px 40px;
  background-position: 0 0, 10px 20px;
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
}

img { display: block; max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   2. VIEW SYSTEM
   -------------------------------------------------------------------------- */
[data-view] {
  display: none;
  position: absolute;
  inset: 0;
  min-height: 100dvh;
}

[data-view].is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Result — full-screen overlay with blur backdrop, wheel still visible behind */
[data-view="result"] {
  position: fixed;
  min-height: unset;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  /* Frosted-glass effect: blurs the wheel behind without hiding it */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(213, 235, 248, 0.45);
  pointer-events: none;
  /* Center slip image + button vertically and horizontally */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px 20px max(24px, env(safe-area-inset-bottom, 24px));
}

[data-view="result"].is-active {
  display: flex;
  pointer-events: all;
}

body {
  position: relative;
  height: 100dvh;
}

/* --------------------------------------------------------------------------
   3. LOGO BADGE (shared across pages)
   -------------------------------------------------------------------------- */
.logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-badge svg {
  display: block;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   4. LANDING VIEW
   Figma frame: 402 × 874  |  bg: #E5F9FF  |  logo: 75 × 95
   -------------------------------------------------------------------------- */
[data-view="landing"] {
  /* Pure flat blue — no dots */
  background-color: #E5F9FF;
  background-image: none;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
}

/* ---- Landing group: the single vertical content block ---- */
/* margin-top controls the whole group's Y position.
   Figma: logo top at ~30% of 874px frame.
   30dvh ≈ 253px on 844px phone → matches Figma center-upper placement. */
.landing-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 36px;
  width: 100%;
  margin-top: 30dvh;
}

.landing-logo {
  margin-bottom: 32px;
  line-height: 0;
}

.landing-logo img {
  width: 75px;
  height: 95px;
  display: block;
  margin: 0 auto;
}

/* ---- Text group container: 316px wide per Figma spec ---- */
.landing-copy {
  width: min(316px, 100%);  /* Figma: 316px group width */
  margin: 0 auto 24px;
  text-align: center;
}

/* Chinese — Figma: Gen Jyuu Gothic 700 / 15px / 140% lh / #412E2C */
.landing-copy-zh {
  font-family: 'Gen Jyuu Gothic', 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;    /* 140% */
  letter-spacing: 0;
  color: #412E2C;
  margin-bottom: 10px;
}

/* English — Figma: Gen Jyuu Gothic 700 / 10px / 140% lh / #412E2C */
/* <br> in HTML controls the 3-line break; white-space:pre-line keeps them */
.landing-copy-en {
  font-family: 'Gen Jyuu Gothic', 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;    /* 140% */
  letter-spacing: 0;
  color: #412E2C;
  white-space: pre-line;  /* respects <br> without overriding word-wrap */
}

/* 3D Start button — black text, blue body, darker shadow */
.btn-start {
  background: var(--blue-btn);
  box-shadow: 0 6px 0 var(--blue-shadow);
  border-radius: 20px;
  padding: 11px 0;
  width: 148px;
  color: #111111;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.1em;
  transition: transform 0.1s, box-shadow 0.1s;
  display: block;
  margin: 0 auto;
}

.btn-start:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--blue-shadow);
}

/* --------------------------------------------------------------------------
   5. WHEEL VIEW — flex column that fits exactly 100dvh
   All three regions (top / wheel / desc) are in normal flow; nothing is
   absolute-positioned outside its own region.
   -------------------------------------------------------------------------- */
[data-view="wheel"] {
  /* base: nothing extra */
}

[data-view="wheel"].is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100dvh;         /* fill exactly one screen — no scroll needed */
  overflow: hidden;       /* guard against any sub-pixel overflow */
  padding: 0;
  gap: 0;
}

/* ---- TOP AREA: logo + pointer (fixed height) ---- */
/* All children are absolutely positioned within this 184px tall band,
   matching the original Figma coordinates exactly. */
.wheel-top {
  flex: 0 0 184px;        /* never shrink / never grow */
  width: 100%;
  position: relative;     /* anchor for absolutely-positioned logo & pointer */
}

/* Logo — same Figma coordinates, now relative to .wheel-top */
.wheel-logo {
  position: absolute;
  top: 26px;
  left: calc(50% - 51px);
  width: 102px;
  height: 129px;
  margin: 0;
}

.wheel-logo img {
  width: 102px;
  height: 129px;
  display: block;
}

/* Pointer — same Figma coordinates, now relative to .wheel-top */
.wheel-pointer {
  position: absolute;
  top: 158px;               /* 3px below logo bottom (26+129=155) */
  left: calc(50% - 14px);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 24px solid #5580B0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

/* ---- WHEEL STAGE: flex item, absorbs all remaining height ---- */
/* container-type:size lets .wheel-shell use cqh/cqw to constrain both
   width AND height simultaneously without JS. */
.wheel-stage {
  flex: 1 1 0;             /* grow to fill leftover height */
  min-height: 0;           /* allow flex to shrink this below its content size */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;    /* enables cqh / cqw on children */
}

/* ---- WHEEL SHELL: the correctly-sized square ---- */
/* Three-way min:
     390px          — absolute max size
     100cqw - 32px  — fits within stage width with 16px margin each side
     100cqh         — never taller than the stage (short-screen safety)
   aspect-ratio:1/1 keeps it perfectly square at any size.
   NO filter here: drop-shadow on a shell that contains will-change:transform
   children gets applied to the rectangular GPU layer boundary, not the
   circular image alpha — producing the unwanted square outline.           */
.wheel-shell {
  width: min(390px, calc(100cqw - 32px), 100cqh);
  aspect-ratio: 1 / 1;
  position: relative;
}

/* ---- THE ROTATING WHEEL ---- */
/* NO border-radius — the HD image (2325×2325 RGBA) already has transparent
   corners and a circular silhouette.
   NO overflow:hidden — would clip the outer dark-red ring that is part of
   the artwork.
   NO box-shadow ring — ring is baked into the image, not faked in CSS.   */
#wheel {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform-origin: center center;
}

/* Wheel image — fills the shell 1:1; object-fit:contain on a square image
   in a square container is equivalent to cover but never upscales.       */
#wheel > .wheel-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Segment labels (rotate with wheel) */
.seg-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  transform: rotate(var(--a));
  pointer-events: none;
  overflow: visible;
}

.seg-content {
  position: absolute;
  top: calc(var(--wheel-r) * -0.82);
  left: -26px;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.seg-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.seg-img-placeholder {
  width: 44px;
  height: 36px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  flex-shrink: 0;
}

.seg-zh {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.seg-en {
  font-size: 7.5px;
  color: var(--ink-mid);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---- SPIN / STOP button (inside .wheel-shell, outside #wheel → doesn't rotate) ---- */
.btn-spin-stop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: var(--blue-btn);
  box-shadow: 0 5px 0 var(--blue-shadow);
  border-radius: 10px;
  width: 108px;
  height: 46px;
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: transform 0.1s, box-shadow 0.1s;
  border: none;
}

.btn-spin-stop:active {
  transform: translate(-50%, calc(-50% + 3px));
  box-shadow: 0 2px 0 var(--blue-shadow);
}

/* Dim while stopping */
[data-app-state="stopping"] .btn-spin-stop {
  pointer-events: none;
  opacity: 0.7;
}

/* ---- BOTTOM DESCRIPTION: fixed-height flex item, always fully visible ---- */
.wheel-desc {
  flex: 0 0 auto;
  width: min(316px, calc(100% - 40px));
  text-align: center;
  padding-top: 10px;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 18px));
}

.wheel-desc-zh {
  font-family: 'Gen Jyuu Gothic', 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.0;
  color: #412E2C;
}

.wheel-desc-en {
  font-family: 'Gen Jyuu Gothic', 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.0;
  color: #412E2C;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   6. RESULT OVERLAY
   -------------------------------------------------------------------------- */

/* Slip image — the full 詩籤 card as-is, preserving aspect ratio */
.result-slip-img {
  display: block;
  width: min(340px, 88vw);
  height: auto;
  max-height: 72dvh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}

/* View-origin button — width matches slip image */
.btn-view-origin {
  background: var(--blue-btn);
  box-shadow: 0 5px 0 var(--blue-shadow);
  border-radius: 10px;
  padding: 14px 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  width: min(340px, 88vw);
  text-align: center;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-view-origin:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--blue-shadow);
}

/* --------------------------------------------------------------------------
   7. DETAIL VIEW
   -------------------------------------------------------------------------- */
[data-view="detail"] {
  background: #000;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: stretch;
}

[data-view="detail"].is-active {
  display: block;
}

.detail-img-wrap {
  position: relative;
  width: 100%;
}

.detail-long-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hit area over the back button drawn inside the detail long image.
   top/left/width/height are set by positionDetailBackBtn() in views.js.
   DEBUG: visible red so we can verify alignment. Remove background after confirmed. */
.btn-back-detail {
  position: absolute;
  z-index: 20;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   8. UTILITY
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Desktop frame */
@media (min-width: 431px) {
  body {
    background-color: #B8CEDF;
    background-image: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 8px 48px rgba(0,0,0,0.15);
  }
  /* Landing stays pure #E5F9FF — only Wheel gets dots on desktop (same stagger as body) */
  [data-view="wheel"] {
    background-color: var(--bg);
    background-image:
      radial-gradient(circle, var(--dot-color) 1.8px, transparent 1.8px),
      radial-gradient(circle, var(--dot-color) 1.8px, transparent 1.8px);
    background-size: 20px 40px, 20px 40px;
    background-position: 0 0, 10px 20px;
  }
}