/* ==========================================================================
   Jibberpop Components — storybook / hand-drawn mobile UI
   Aligned with actual game screenshots: torn paper, ink outlines, ribbon banners.
   ========================================================================== */

.jp { font-family: var(--font-body); color: var(--c-ink); }
.jp *, .jp *::before, .jp *::after { box-sizing: border-box; }

/* =============================================================
   LETTER TILE — flat sand square, thin ink stroke, NO 3D shadow
   ============================================================= */
.jp-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--c-tile);
  color: var(--c-letter-text);
  border: 2px solid var(--c-tile-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  user-select: none;
  position: relative;
  transition: transform 120ms var(--ease-pop);
}
.jp-tile--sm { width: 40px; height: 40px; font-size: 18px; border-radius: 6px; }
.jp-tile--lg { width: 76px; height: 76px; font-size: 36px; border-radius: 10px; }

/* Empty grid cell */
.jp-tile--empty {
  background: rgba(255,255,255,0.55);
  color: transparent;
  border-color: rgba(42,34,26,0.18);
}

.jp-tile--wild {
  background: linear-gradient(135deg,#ffd9a3 0%,#e89c4a 60%,#d65a5a 100%);
  color: #fff;
}
.jp-tile--block {
  background: #a39687;
  color: #2a221a;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.12) 0 4px, transparent 4px 8px);
}
.jp-tile--wall {
  background: #8e8479;
  color: transparent;
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.18) 0 4px, transparent 4px 8px);
}
.jp-tile--ghost { opacity: 0.45; }

/* Cluster highlights — solid fill, like game (orange/green/etc.) */
.jp-tile--h-single { background: var(--c-h-single); color: #fff; }
.jp-tile--h-pair   { background: var(--c-h-pair);   color: #fff; }
.jp-tile--h-triple { background: var(--c-h-triple); color: #fff; }
.jp-tile--h-quad   { background: var(--c-h-quad);   color: #fff; }
.jp-tile--h-chain  { background: var(--c-h-chain);  color: #2a221a; }

/* =============================================================
   PILL STATS — cream rounded rectangle with thin ink stroke
   Used for hearts/coin/score readouts at the top of the game
   ============================================================= */
.jp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.5px;
  border: 2px solid var(--c-tile-border);
  border-radius: 999px;
  box-shadow: var(--sh-pill);
}
.jp-pill__icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Torn-paper score card (the "SCORE 67528" / "TURNS LEFT 13" labels) */
.jp-paper-card {
  background: var(--c-paper);
  border: 2px solid var(--c-tile-border);
  border-radius: 6px;
  padding: 6px 14px;
  text-align: center;
  position: relative;
  /* slightly torn / tilted */
  transform: rotate(-1.5deg);
}
.jp-paper-card__h {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--c-label-subheader);
  line-height: 1;
  margin: 0;
}
.jp-paper-card__v {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--c-ink);
  line-height: 1;
  margin-top: 2px;
}

/* =============================================================
   BUTTONS — pill with thin ink stroke
   ============================================================= */
.jp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 28px;
  background: var(--c-btn-bg);
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  border: 2px solid var(--c-tile-border);
  border-radius: 999px;
  box-shadow: var(--sh-btn);
  cursor: pointer;
  user-select: none;
  transition: transform 80ms var(--ease-pop);
}
.jp-btn:hover  { transform: translateY(-1px); }
.jp-btn:active { transform: translateY(2px); box-shadow: 0 0 0 0 rgba(0,0,0,0.4); }
.jp-btn--secondary { background: var(--c-btn-bg-secondary); }
.jp-btn--ghost {
  background: var(--c-paper);
  color: var(--c-ink);
}
.jp-btn--lg { padding: 14px 36px; font-size: 22px; }
.jp-btn--sm { padding: 8px 16px; font-size: 14px; }

/* Round coral icon button (top corners — avatar / settings) */
.jp-iconcircle {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--c-btn-bg-secondary);
  color: #fff;
  border: 2px solid var(--c-tile-border);
  border-radius: 999px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(42,34,26,0.4);
}

/* Powerup circle button (bottom row, coral with coin price tag) */
.jp-powerup {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.jp-powerup__btn {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--c-btn-bg-secondary);
  color: #fff;
  border: 2px solid var(--c-tile-border);
  border-radius: 999px;
  font-size: 22px;
  box-shadow: 0 3px 0 rgba(42,34,26,0.4);
  cursor: pointer;
}
.jp-powerup__price {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--c-tile-border);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--c-tile-border);
}
.jp-powerup__price__coin {
  width: 12px; height: 12px;
  background: #f0c14a;
  border-radius: 999px;
  border: 1px solid #2a221a;
  display: inline-block;
}

/* =============================================================
   TILTED RIBBON BANNER — torn paper with Luckiest Guy text
   Used at the bottom of every screenshot ("ADVENTURE MODE",
   "COOL POWER-UPS", "DON'T REACH THE TOP", etc.)
   ============================================================= */
.jp-ribbon {
  position: relative;
  display: inline-block;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 1.5px;
  padding: 14px 36px;
  text-transform: uppercase;
  transform: rotate(-4deg);
  /* Torn paper edges via clip-path */
  clip-path: polygon(
    0% 18%, 4% 6%, 12% 14%, 22% 4%, 34% 12%, 44% 2%, 56% 10%, 68% 0%,
    78% 12%, 88% 4%, 96% 14%, 100% 8%,
    100% 82%, 96% 92%, 88% 86%, 78% 96%, 68% 88%, 56% 98%, 44% 90%,
    34% 100%, 22% 92%, 12% 96%, 4% 88%, 0% 94%
  );
  box-shadow: 0 6px 14px -6px rgba(42,34,26,0.35);
}
.jp-ribbon--coral { color: var(--c-label-subheader); }
.jp-ribbon--lg { font-size: 38px; padding: 20px 50px; }

/* =============================================================
   PANELS / CARDS
   ============================================================= */
.jp-panel {
  background: var(--c-paper);
  border: 2px solid var(--c-tile-border);
  border-radius: 14px;
  padding: var(--sp-5);
  box-shadow: var(--sh-card);
}

.jp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
}
.jp-stat__label {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-label-subheader);
}
.jp-stat__value {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--c-ink);
  line-height: 1;
}

/* =============================================================
   GRID / BOARD — torn paper sheet with ink-outline tiles
   ============================================================= */
.jp-board {
  --cols: 7;
  --rows: 11;
  --cell: 36px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  gap: 4px;
  padding: 14px 12px;
  background: var(--c-grid-panel);
  border: 2px solid var(--c-tile-border);
  border-radius: 8px;
  /* slight skew + soft shadow to suggest paper */
  box-shadow: var(--sh-card);
}
.jp-board .jp-tile {
  width: var(--cell);
  height: var(--cell);
  font-size: calc(var(--cell) * 0.55);
  border-radius: 6px;
  border-width: 1.5px;
}
.jp-board__cell--empty {
  width: var(--cell);
  height: var(--cell);
  background: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(42,34,26,0.18);
  border-radius: 6px;
}

/* =============================================================
   THREAT / PROGRESS BARS — vertical red bar on the side
   ============================================================= */
.jp-progress {
  height: 12px;
  background: var(--c-progress-bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid var(--c-tile-border);
}
.jp-progress__fill {
  height: 100%;
  background: var(--c-progress-fill);
  transition: width 350ms var(--ease-out);
}
.jp-progress--pink .jp-progress__fill { background: var(--c-progress-pink); }

.jp-vbar {
  width: 12px;
  background: var(--c-progress-bg);
  border-radius: 999px;
  border: 1.5px solid var(--c-tile-border);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.jp-vbar__fill {
  width: 100%;
  background: var(--c-progress-fill);
}

/* =============================================================
   BADGES
   ============================================================= */
.jp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 13px;
  border-radius: 999px;
  border: 1.5px solid var(--c-tile-border);
  letter-spacing: 0.5px;
}
.jp-badge--coral { background: var(--c-btn-bg-secondary); color: #fff; }
.jp-badge--peri  { background: var(--c-btn-bg); color: #fff; }
.jp-badge--gold  { background: linear-gradient(180deg,#ffd277,#f0c14a); color: #2a221a; }

/* Word-pop label */
.jp-wordpop {
  display: inline-block;
  font-family: var(--font-display);
  color: #fff;
  font-size: 36px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  -webkit-text-stroke: 4px #2a221a;
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 rgba(42,34,26,0.18);
  transform: rotate(-4deg);
}

/* =============================================================
   BOTTOM TAB BAR (cart / home / campfire from screenshots)
   ============================================================= */
.jp-tabbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #c9a87a;          /* warm wood-board look */
  border-top: 2px solid var(--c-tile-border);
  padding: 12px 4px 14px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 33%, rgba(42,34,26,0.18) 33% 33.4%, transparent 33.4%);
}
.jp-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 0;
  color: #fff;
}
.jp-tab__icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.jp-tab--active .jp-tab__icon { transform: scale(1.15); }