/* styles.css */
:root {
  --bg1: #ff6bd6;
  --bg2: #7a2cff;
  --bg3: #14002b;

  --frame1: #ffef7a;
  --frame2: #ff9df0;
  --frame3: #7cf5ff;

  --cellBg: rgba(255, 255, 255, .06);
  --gap: 6px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  touch-action: none;
  font-family: "Baloo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .25), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, .18), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, .12), transparent 45%),
    radial-gradient(circle, var(--bg1), var(--bg2) 55%, var(--bg3));
}

/* ✅ สำคัญ: ทำให้ทั้งแอปเป็น flex column จริง */
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ===== Candy-like Header ===== */
.hudCandy {
  padding: calc(10px + env(safe-area-inset-top)) 12px 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.hudCandy__left {
  justify-self: start;
}

.hudCandy__center {
  justify-self: center;
}

.hudCandy__right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* Stars + bar */
.starMeter {
  width: clamp(150px, 40vw, 220px);
}

.starRow {
  display: flex;
  gap: 6px;
  padding-left: 6px;
  margin-bottom: 6px;
}

.star {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, .35);
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25));
}

.star.on {
  background: linear-gradient(#fff, #ffe86a);
}

.scoreBar {
  position: relative;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 10px 18px rgba(0, 0, 0, .18);
}

.scoreBar__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #66e6ff, #8b5cff, #ff6bd6);
  transition: width 220ms ease;
}

.scoreBar__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

/* ticks */
.scoreBar__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tick {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25));
  transform: translateX(-1px);
}

.tick.t1 {
  left: 34%;
}

.tick.t2 {
  left: 67%;
}

/* Moves bubble */
.movesBubble {
  width: 66px;
  height: 66px;
  border-radius: 999px;
  background: linear-gradient(#fff, #ffd6f3);
  border: 4px solid rgba(255, 255, 255, .85);
  box-shadow: 0 12px 20px rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.movesBubble__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  color: #7a2cff;
  margin-bottom: -4px;
}

.movesBubble__value {
  font-size: 22px;
  font-weight: 1000;
  color: #ff3dbd;
  line-height: 1;
}

/* Right pills */
.pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .18);
  min-width: 140px;
}

.pill--pink {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(0, 0, 0, .18));
}

.pill__label {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  letter-spacing: .4px;
  white-space: nowrap;
}

.pill__value {
  font-size: 16px;
  font-weight: 900;
  color: #ffe86a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  white-space: nowrap;
}

/* ---------- Stage ---------- */
.stage {
  flex: 1;
  /* ✅ ให้กินพื้นที่ที่เหลือ */
  display: flex;
  justify-content: center;
  align-items: center;
  /* ✅ ให้บอร์ดอยู่กลาง */
  padding: 10px 10px 0;
  min-height: 0;
  /* ✅ กัน flex overflow */
}

/* ---------- Board ---------- */
.board-wrap {
  width: min(94vw, 520px);
}

.board-frame {
  padding: 14px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 40%),
    linear-gradient(135deg, var(--frame1), var(--frame2) 55%, var(--frame3));
  border: 6px solid rgba(10, 10, 18, .85);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, .35),
    inset 0 0 0 3px rgba(255, 255, 255, .25);
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
}

.candy-slot {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  position: relative;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .10), rgba(0, 0, 0, .10)),
    var(--cellBg);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .10),
    inset 0 -2px 0 rgba(0, 0, 0, .25);
}

.candy-slot.empty {
  background: transparent;
  box-shadow: none;
}

/* ✅ highlight ช่องที่จะสลับ */
.candy-slot.target {
  outline: 3px solid rgba(255, 255, 255, .85);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, .25),
    0 0 18px rgba(255, 255, 255, .35),
    inset 0 2px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 0 rgba(0, 0, 0, .25);
}

.candy {
  position: absolute;
  inset: 1%;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: grab;
  border: 2px solid rgba(255, 255, 255, .22);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, .25),
    0 16px 26px rgba(0, 0, 0, .20),
    inset 0 2px 0 rgba(255, 255, 255, .22);
  transform: translate3d(0, 0, 0);
  transition: transform 140ms cubic-bezier(.2, .9, .2, 1), filter 140ms;
}

/* ✅ ตอนลาก ให้เด่นขึ้น */
.candy.dragging {
  z-index: 10;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35));
}

.candy.hidden {
  opacity: 0;
}

.candy.popping {
  animation: pop 260ms forwards;
}

@keyframes pop {
  to {
    transform: scale(0) rotate(80deg);
    opacity: 0;
  }
}

.tile-icon {
  width: 98%;
  height: 98%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ✅ marker พลัง (striped / wrapped) */
.sp-mark {
  position: absolute;
  inset: 6%;
  border-radius: 14px;
  pointer-events: none;
  opacity: .9;
  mix-blend-mode: screen;
}

/* STRIPED_H */
.sp-1 {
  background: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .9) 0 6px,
      rgba(255, 255, 255, 0) 6px 14px);
}

/* STRIPED_V */
.sp-2 {
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .9) 0 6px,
      rgba(255, 255, 255, 0) 6px 14px);
}

/* WRAPPED */
.sp-4 {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 0 18px rgba(255, 255, 255, .35);
}

/* ---------- Footer ---------- */
.footer {
  padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}

.btn {
  border: 0;
  padding: 14px 22px;
  min-width: 200px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .6px;
  color: #fff;
  background: linear-gradient(to bottom, #ff4fd4, #c013a6);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, .28),
    0 18px 30px rgba(0, 0, 0, .25),
    inset 0 2px 0 rgba(255, 255, 255, .20);
}

.btn:active {
  transform: translateY(4px);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, .28),
    0 12px 22px rgba(0, 0, 0, .20),
    inset 0 2px 0 rgba(255, 255, 255, .16);
}

/* ===== Level Intro ===== */
.levelIntro {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 14px 14px;
  z-index: 999;
  pointer-events: none;
}

.levelIntro.hidden {
  display: none;
}

.levelIntro__card {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .25);
  border: 2px solid rgba(255, 255, 255, .25);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  animation: introIn 180ms ease;
}

@keyframes introIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.levelIntro__title {
  color: #fff;
  font-weight: 1000;
  letter-spacing: .6px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.levelIntro__meta {
  margin-top: 6px;
  color: rgba(255, 255, 255, .9);
}

/* ===== Power guide modal ===== */
.powerGuide {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .35);
  z-index: 999;
}

.powerGuide.hidden {
  display: none;
}

.powerGuide__card {
  width: min(92vw, 360px);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .25));
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
}

.powerGuide__title {
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.powerGuide__row {
  display: grid;
  grid-template-columns: 1fr 24px 92px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.powerGuide__row:first-of-type {
  border-top: none;
}

.eq {
  font-weight: 1000;
  font-size: 22px;
  color: #ff3dbd;
  text-align: center;
}

.dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, #6ad7ff 45%, #2b5cff);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}

.dots-tl {
  width: 78px;
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.demo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .22);
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .25);
}

.demo-striped {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 6px, rgba(255, 255, 255, 0) 6px 14px),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
}

.demo-wrapped {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%);
}

.demo-bomb {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 50% 50%, rgba(255, 232, 106, .8), rgba(255, 255, 255, 0) 75%);
}

.small {
  font-size: 12px;
  color: rgba(255, 255, 255, .9);
}

.powerGuide__btn {
  width: 100%;
  margin-top: 12px;
  border: 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(to bottom, #ff4fd4, #c013a6);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .22);
}

.powerGuide__btn:active {
  transform: translateY(3px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .22);
}

/* ===== HUD Mobile Layout (Android/iPhone) ===== */
@media (max-width: 420px) {
  .hudCandy {
    padding: calc(8px + env(safe-area-inset-top)) 8px 6px;
    gap: 8px;

    /* 2 แถว */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left center"
      "right right";
    align-items: center;
  }

  .hudCandy__left {
    grid-area: left;
    justify-self: start;
  }

  .hudCandy__center {
    grid-area: center;
    justify-self: end;
  }

  .hudCandy__right {
    grid-area: right;
    justify-self: stretch;

    /* ให้ pill เรียงแถว + wrap */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
    width: 100%;
  }

  /* ย่อของใน HUD ลง */
  .starMeter {
    width: min(55vw, 170px);
  }

  .movesBubble {
    width: 56px;
    height: 56px;
    border-width: 3px;
  }

  .movesBubble__label {
    font-size: 9px;
  }

  .movesBubble__value {
    font-size: 18px;
  }

  /* pill ไม่ดันหลุดจอ */
  .pill {
    min-width: 0;
    padding: 6px 8px;
    border-radius: 16px;
    flex: 1 1 105px;
    /* ✅ แคบลง + ขึ้นบรรทัดได้ */
  }

  .pill__label {
    font-size: 10px;
  }

  .pill__value {
    font-size: 12px;
  }
}

/* จอเล็กมาก (เช่น 360px) */
@media (max-width: 360px) {
  .pill {
    flex-basis: 95px;
  }

  .starMeter {
    width: min(58vw, 160px);
  }
}

/* ===== WIN POPUP ===== */
.winPopup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .35);
  z-index: 2000;
}

.winPopup.hidden {
  display: none;
}

.winPopup__card {
  width: min(92vw, 360px);
  border-radius: 22px;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .18));
  border: 3px solid rgba(255, 255, 255, .35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  position: relative;
  text-align: center;
}

.winPopup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .25);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.winPopup__title {
  font-weight: 1000;
  letter-spacing: .8px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  margin-top: 2px;
}

.winPopup__stars {
  margin: 12px 0 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.wstar {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .25);
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25));
}

.wstar.on {
  background: linear-gradient(#fff, #7cf5ff);
}

.winPopup__scoreLabel {
  color: rgba(255, 255, 255, .9);
  font-weight: 900;
  margin-top: 4px;
}

.winPopup__scoreValue {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 1000;
  color: #ffe86a;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.winPopup__next {
  width: 100%;
  margin-top: 14px;
  border: 0;
  padding: 14px 14px;
  border-radius: 16px;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(to bottom, #ff4fd4, #c013a6);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .22), 0 18px 30px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.winPopup__next:active {
  transform: translateY(4px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .22), 0 14px 22px rgba(0, 0, 0, .22);
}