/*
 * Perfils, edição 2026: board (board.js), direction "Original limpo" (SPEC-TABULEIRO.md section 9).
 *
 * Flat colour, no bevels, no textures, no ornaments: the numbers, the track and the pawns carry the board.
 * Every colour is a --p-* variable (theme.css) WITH a literal fallback (the palette sampled from the
 * original board, SPEC-TABULEIRO section 2), so the board also works without theme.css. The only animated
 * properties are transform and opacity.
 */

.pf-board {
  /* palette: --p-* with literal fallback */
  --pf-black: var(--p-black, #0F0F12);
  --pf-violet: var(--p-violet, #574566);
  --pf-teal-deep: var(--p-teal-deep, #0D968D);
  --pf-teal: var(--p-teal, #0AB2AB);
  --pf-teal-light: var(--p-teal-light, #2CC3BC);
  --pf-aqua-3: var(--p-aqua-3, #8FD0CE);
  --pf-pink: var(--p-pink, #CE76A7);
  --pf-pink-2: var(--p-pink-2, #C76D9A);
  --pf-pink-soft: var(--p-pink-soft, #CC8EB4);
  --pf-pink-soft-2: var(--p-pink-soft-2, #D0A9C9);
  --pf-red: var(--p-red, #D04D35);
  --pf-orange: var(--p-orange, #E8A33A);
  --pf-yellow: var(--p-yellow, #F2C230);
  --pf-cream: var(--p-cream, #F4EBAD);
  --pf-plum: var(--p-plum, #2B0F2A);
  --pf-open-face: var(--p-open-face, #0A4F4B);
  --pf-open-ring: var(--p-open-ring, #35ACA5);
  --pf-font-label: var(--font-label, 'Josefin Sans'), 'Futura', 'Avenir Next', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --pf-font-display: var(--font-display, 'Poiret One'), 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --pf-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));

  position: relative;
  width: 100%;
  color: var(--pf-black);
  font-family: var(--pf-font-label);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.pf-stage {
  position: relative;
  width: 100%;
  container-type: normal;
  isolation: isolate;
}

.pf-art {
  position: absolute;
  inset: 0;
  border-radius: 1.4%/2%;
  /* the board lies on the table: only its shadow, no thickness or sheen */
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}
.pf-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------- gradients */
.pf-stop-orange { stop-color: var(--pf-orange); }
.pf-stop-red { stop-color: var(--pf-red); }
.pf-stop-yellow { stop-color: var(--pf-yellow); }
.pf-stop-cream { stop-color: #FBF0B8; }

/* -------------------------------------------------------------------- frame */
.pf-frame { fill: var(--pf-black); }
.pf-frame-line { fill: none; stroke: var(--pf-violet); stroke-width: 2.5; }

/* -------------------------------------------------------------------- track */
.pf-cell { stroke: rgba(143, 208, 206, 0.5); stroke-width: 1.4; stroke-linejoin: round; }
.pf-cell.is-dark { fill: var(--pf-teal-deep); }
.pf-cell.is-light { fill: var(--pf-teal-light); }
.pf-cell.is-marker { fill: var(--pf-g-marker, var(--pf-orange)); stroke: rgba(15, 15, 18, 0.8); stroke-width: 2.2; }
.pf-cell.is-end { fill: var(--pf-black); stroke: var(--pf-orange); stroke-width: 5; }
.pf-ring-line { fill: none; stroke: var(--pf-black); stroke-width: 6; stroke-linejoin: miter; }
.pf-cell-n {
  fill: #FFF6D6;
  stroke: var(--pf-black);
  stroke-width: 5;
  paint-order: stroke;
  stroke-linejoin: round;
  font-family: var(--pf-font-label);
  font-weight: 600;
  text-anchor: middle;
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
}
.pf-nolabels .pf-cell-labels { display: none; }
.pf-trail { pointer-events: none; }
.pf-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pf-trail-halo, .pf-chev-halo { stroke: var(--pf-black); opacity: 0.32; }
.pf-trail-line { stroke: #FFF6D6; opacity: 0.55; }
.pf-chev { stroke: #FFF6D6; }

.pf-tray { fill: var(--pf-teal-deep); stroke: var(--pf-black); stroke-width: 3; }
.pf-slot { fill: rgba(5, 20, 20, 0.45); stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.2; }
.pf-label {
  fill: var(--pf-cream);
  stroke: var(--pf-black);
  stroke-width: 6;
  paint-order: stroke;
  stroke-linejoin: round;
  font-family: var(--pf-font-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  pointer-events: none;
}
.pf-end-plate { fill: var(--pf-orange); stroke: var(--pf-black); stroke-width: 4; }
.pf-end-label { fill: var(--pf-black); stroke-width: 0; letter-spacing: 0.1em; font-weight: 700; }

/* ------------------------------------------------------------------- centre */
.pf-panel { fill: var(--pf-black); }
.pf-panel-line { fill: none; stroke: var(--pf-violet); stroke-width: 2.5; }
.pf-octagon { fill: var(--pf-pink); stroke: var(--pf-black); stroke-width: 3; stroke-linejoin: round; }
.pf-plate { fill: var(--pf-teal); stroke: var(--pf-black); stroke-width: 3; }
.pf-logo-text {
  fill: var(--pf-g-gold, var(--pf-orange));
  stroke: var(--pf-red);
  stroke-width: 3;
  paint-order: stroke;
  stroke-linejoin: round;
  font-family: var(--pf-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pf-logo.has-image .pf-logo-text { display: none; }
.pf-seal-pill { fill: var(--pf-black); stroke: var(--pf-cream); stroke-width: 2.5; }
.pf-seal-text {
  fill: var(--pf-cream);
  font-family: var(--pf-font-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  pointer-events: none;
}
.pf-hint-text {
  fill: var(--pf-black);                    /* 7.26:1 on the teal plate */
  font-family: var(--pf-font-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  pointer-events: none;
}
.pf-front-text {
  fill: var(--pf-black);                    /* 7.26:1 on the teal plate */
  font-family: var(--pf-font-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* ------------------------------------------------------------------ preview */
.pf-preview-path { fill: none; stroke: var(--pf-cream); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 12; opacity: 0.95; }
.pf-preview-dot { fill: var(--pf-cream); opacity: 0.85; }
.pf-preview-dot.is-last { fill: none; stroke: var(--pf-cream); stroke-width: 4; }
.pf-preview-cell { fill: none; stroke: var(--pf-cream); stroke-width: 5; stroke-dasharray: 10 7; stroke-linejoin: round; }

/* ------------------------------------------------------ the 20 numbers (buttons) */
.pf-clues { position: absolute; inset: 0; pointer-events: none; }
.pf-clue {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
  pointer-events: none;           /* only the polygon (.pf-tri-hit) takes taps */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pf-clue svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pf-tri-hit { fill: transparent; stroke: none; pointer-events: all; }
.pf-tri-glow { fill: none; stroke: var(--pf-cream); stroke-width: 15; stroke-linejoin: round; opacity: 0; }
.pf-tri-rim { fill: var(--pf-pink-2); stroke: none; }
.pf-tri-face {
  fill: var(--pf-pink-soft-2);
  stroke: none;
  transform-box: view-box;
  transition: transform var(--dur-1) var(--pf-ease);
}
.pf-tri-n {
  fill: var(--pf-plum);
  font-family: var(--pf-font-label);
  font-weight: 600;
  text-anchor: middle;
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
}
.pf-tri-check, .pf-tri-strike, .pf-tri-by { display: none; }
.pf-tri-check { fill: none; stroke: var(--pf-aqua-3); stroke-opacity: 0.4; stroke-width: 6; stroke-linecap: square; stroke-linejoin: miter; }
.pf-tri-strike { stroke: var(--pf-aqua-3); stroke-width: 3; }
.pf-tri-by { fill: var(--pf-by, var(--pf-aqua-3)); stroke: var(--pf-black); stroke-width: 2.2; }
.pf-tri-focus-a, .pf-tri-focus-b { display: none; fill: none; stroke-linejoin: round; }
.pf-tri-focus-a { stroke: var(--pf-black); stroke-width: 11; }
.pf-tri-focus-b { stroke: var(--pf-cream); stroke-width: 6; }

.pf-clue:hover:not(.is-open):not(.is-idle) .pf-tri-face { fill: #ECC9DE; transform: scale(1.07); }
.pf-clue:active:not(.is-open):not(.is-idle) .pf-tri-face { transform: scale(0.96); }
.pf-clue:focus-visible .pf-tri-focus-a, .pf-clue:focus-visible .pf-tri-focus-b { display: inline; }
.pf-clue.is-idle { cursor: default; }

/* opened: dimmed deep teal, struck number, drawn check, the opener's colour dot (never colour alone) */
.pf-clue.is-open .pf-tri-rim { fill: var(--pf-open-ring); }
.pf-clue.is-open .pf-tri-face { fill: var(--pf-open-face); }
.pf-clue.is-open .pf-tri-n { fill: var(--pf-aqua-3); }
.pf-clue.is-open .pf-tri-check, .pf-clue.is-open .pf-tri-strike { display: inline; }
.pf-clue.is-open.has-by .pf-tri-by { display: inline; }
/* just opened: gold face and a pulsing halo */
.pf-clue.is-new .pf-tri-rim { fill: var(--pf-black); }
.pf-clue.is-new .pf-tri-face { fill: var(--pf-g-gold, var(--pf-orange)); }
.pf-clue.is-new .pf-tri-n { fill: var(--pf-black); }
.pf-clue.is-new .pf-tri-strike, .pf-clue.is-new .pf-tri-check { display: none; }
.pf-clue.is-new .pf-tri-glow { opacity: 1; animation: pf-glow var(--dur-glow) var(--ease-in-out) 3; }
/* the flip of a clue that has just opened is driven by app.js (motion.js): two faces turning over */

/* ---------------------------------------------------------------- keypad */
.pf-keypad {
  margin-top: 0.6rem;
  padding: 0.7rem 0.5rem 0.8rem;
  background: var(--pf-black);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--pf-violet);
}
.pf-keypad-inner { position: relative; width: 100%; }
.pf-keypad .pf-clue .pf-tri-rim { fill: var(--pf-pink); }

/* a fresh card: the numbers breathe, so the eye lands on what is clickable */
.pf-board.is-fresh .pf-clue:not(.is-open) .pf-tri-glow { animation: pf-nudge var(--dur-loop-slow) var(--ease-in-out) infinite; }

/* narrow board: the octagon numbers become decoration (no numerals: the keypad below is the only real set) */
.pf-compact .pf-stage .pf-tri-n { display: none; }
.pf-compact .pf-stage .pf-clue,
.pf-compact .pf-stage .pf-tri-hit { pointer-events: none; }

/* ------------------------------------------------------------------- pawns */
.pf-pawns { position: absolute; inset: 0; pointer-events: none; }
.pf-pawn {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  transition-property: transform;
  transition-duration: 0ms;
  transition-timing-function: var(--pf-ease);
}
.pf-pawn.is-moving { transition-timing-function: linear; }
.pf-hop { position: absolute; inset: 0; display: block; transform-origin: 50% 90%; }
.pf-hop .pf-piece { width: 100% !important; height: 100% !important; display: block; }
.pf-shadow {
  position: absolute;
  border-radius: 50%;
  /* contact shadow in two layers: a tight dark core under the base, a soft penumbra pushed away from the light (upper left) */
  background:
    radial-gradient(ellipse 29% 30% at 50% 50%, rgba(2, 10, 12, 0.82) 0%, rgba(2, 10, 12, 0.55) 58%, rgba(2, 10, 12, 0) 100%),
    radial-gradient(ellipse 42% 40% at 56% 54%, rgba(2, 14, 16, 0.40) 0%, rgba(2, 14, 16, 0.2) 55%, rgba(2, 14, 16, 0) 100%);
  transform-origin: 50% 50%;
}
.pf-pawn.is-active .pf-hop { animation: pf-sway var(--dur-loop) var(--ease-in-out) infinite; }
.pf-pawn.is-active .pf-shadow::after {
  content: '';
  position: absolute;
  inset: 24% 20%;
  border: 2px solid var(--pf-cream);
  border-radius: 50%;
  opacity: 0;
  animation: pf-pulse var(--dur-loop) var(--ease-out) infinite;
}
.pf-hop.hop { animation: pf-hop var(--dur-hop) var(--ease-out); }
.pf-shadow.hop { animation: pf-shadow-hop var(--dur-hop) var(--ease-out); }
.pf-ghost { opacity: 0.5; }
.pf-ghost .pf-shadow { background: none; }
.pf-ghost .pf-shadow::after { content: ''; position: absolute; inset: 27% 23%; border: 2px dashed var(--pf-cream); border-radius: 50%; }
.pf-land {
  position: absolute;
  border: 3px solid var(--pf-cream);
  border-radius: 50%;
  opacity: 0;
  animation: pf-land var(--dur-4) var(--ease-out) both;
  pointer-events: none;
}

.pf-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- keyframes */
@keyframes pf-hop {
  0% { transform: translateY(0) scale(1.1, 0.9); }
  25% { transform: translateY(calc(var(--pf-hop, 20px) * -0.7)) scale(0.95, 1.08); }
  52% { transform: translateY(calc(var(--pf-hop, 20px) * -1)) scale(0.97, 1.05); }
  82% { transform: translateY(0) scale(1.1, 0.9); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes pf-shadow-hop {
  0%, 100% { transform: scale(1); opacity: 1; }
  52% { transform: scale(0.55); opacity: 0.55; }
}
@keyframes pf-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) translateY(-2px); }
}
@keyframes pf-pulse {
  0% { transform: scale(0.7); opacity: 0.85; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes pf-land {
  0% { transform: scale(0.4); opacity: 0.95; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes pf-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes pf-nudge {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-pawn { transition-duration: 0ms !important; }
  .pf-hop, .pf-shadow, .pf-pawn.is-active .pf-hop, .pf-pawn.is-active .pf-shadow::after,
  .pf-land, .pf-clue.is-new .pf-tri-glow, .pf-clue.is-new .pf-tri-face,
  .pf-board.is-fresh .pf-clue:not(.is-open) .pf-tri-glow {
    animation: none !important;
  }
  .pf-clue.is-new .pf-tri-glow { opacity: 1; }
  .pf-board.is-fresh .pf-clue:not(.is-open) .pf-tri-glow { animation: none !important; opacity: 0.4; }
  .pf-pawn.is-active .pf-shadow::after { opacity: 0.8; transform: scale(1.1); }
  .pf-tri-face { transition: none; }
}

@media (forced-colors: active) {
  .pf-cell, .pf-tri-rim { stroke: CanvasText; }
  .pf-tri-n { fill: CanvasText; }
}