/* ===========================================================
   Bracket Racket — palette
   =========================================================== */
:root {
  --tomato-red:     #E9453A;
  --squash-orange:  #F3814D;
  --marigold-yellow:#EBDA61;
  --sky-teal:       #44B4C4;
  --olive-vine:     #BFA749;

  --blush-pink:     #E8C4DE;
  --ink-outline:    #2E292B;

  --blush-pink-deep: #DDA9CF;
  --paper:          #F7E4F2;

  --cell-size: min(11.5vw, 11.5vh, 68px);
  --board-gap: 6px;
  --board-pad: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overscroll-behavior: none;
  background: var(--blush-pink);
  color: var(--ink-outline);
  font-family: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  /* pan-y (not none): lets the page scroll on cramped screens instead of
     clipping content, while the board/gems below opt out with their own
     touch-action:none so dragging a gem never scrolls the page. */
  touch-action: pan-y;
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 12px 28px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* ---------- HUD ---------- */
.hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  width: 100%;
}

.title {
  width: 100%;
  text-align: center;
  margin: 0 0 4px;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  color: var(--ink-outline);
  text-shadow: 2px 2px 0 var(--paper);
}

.pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 6px 14px;
  background: var(--paper);
  border: 3px solid var(--ink-outline);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink-outline);
}

.pill__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-outline);
  opacity: 0.65;
}

.pill__value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink-outline);
  font-variant-numeric: tabular-nums;
}

.btn {
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--paper);
  background: var(--sky-teal);
  border: 3px solid var(--ink-outline);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink-outline);
  cursor: pointer;
}
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink-outline);
}

/* ---------- Board ---------- */
.board-wrap {
  position: relative;
}

.board {
  position: relative;
  display: block;
  overflow: hidden;
  touch-action: none;
  background: var(--blush-pink-deep);
  border: 5px solid var(--ink-outline);
  border-radius: 18px;
  padding: var(--board-pad);
  box-shadow: 0 6px 0 var(--ink-outline);
}

/* grid line cells drawn under the gems, gives the "ink outline on the grid" look */
.cell {
  position: absolute;
  border: 2px solid var(--ink-outline);
  border-radius: 8px;
  background: var(--blush-pink);
  opacity: 0.9;
}

.cell.is-selected {
  background: var(--paper);
  box-shadow: inset 0 0 0 3px var(--ink-outline);
}

.cell.is-hint {
  animation: hint-pulse 1s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(46,41,43,0); }
  50%      { box-shadow: inset 0 0 0 3px rgba(46,41,43,0.35); }
}

/* ---------- Gems ---------- */
.gem {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cell-size);
  height: var(--cell-size);
  transition: transform 220ms cubic-bezier(.35,1.6,.6,1), opacity 160ms ease, left 220ms cubic-bezier(.35,1.6,.6,1), top 220ms cubic-bezier(.35,1.6,.6,1);
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  will-change: left, top, transform, opacity;
}

.gem__art {
  width: 78%;
  height: 78%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 0 rgba(46,41,43,0.25));
  transition: transform 140ms ease;
}

.gem.is-selected .gem__art {
  transform: scale(1.12);
}

.gem.is-matched {
  transform: scale(0);
  opacity: 0;
  transition: transform 220ms ease-in, opacity 220ms ease-in;
}

.gem.is-spawning {
  opacity: 0;
}

.gem.is-invalid .gem__art {
  animation: shake 320ms ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6%); }
  75%      { transform: translateX(6%); }
}

/* ---------- Board message overlay ---------- */
.board-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 196, 222, 0.9);
  border: 5px solid var(--ink-outline);
  border-radius: 18px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink-outline);
  text-align: center;
  padding: 20px;
}

.foot {
  max-width: 480px;
  text-align: center;
  opacity: 0.7;
  font-size: 0.85rem;
}

/* ---------- small / short screens (phones, phone landscape) ---------- */
@media (max-width: 420px) {
  .title { font-size: 1.3rem; }
  .pill { min-width: 68px; padding: 5px 10px; }
  .btn { padding: 8px 14px; font-size: 0.82rem; }
}

@media (max-height: 480px) {
  #app { gap: 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .title { font-size: 1.05rem; margin-bottom: 0; }
  .foot { font-size: 0.7rem; }
  .foot p { margin: 2px 0; }
}

/* Very short viewports (phone landscape): the title and footer help text
   are nice-to-haves, not load-bearing — drop them first to keep the whole
   board on screen instead of clipped or scrolled. */
@media (max-height: 360px) {
  #app { gap: 4px; }
  .title { display: none; }
  .foot { display: none; }
  .pill { padding: 2px 8px; min-width: 0; }
  .pill__label { font-size: 0.55rem; }
  .pill__value { font-size: 0.95rem; }
  .btn { padding: 5px 10px; font-size: 0.72rem; }
}