/* ============================================================
   LUCK RAVENTO - game.css
   The board: scoreboard HUD, target slots, the kick bar, the
   ball rack and the booster bench.

   The rack tiles are literal footballs - a cream circle with a
   navy pentagon centre - because the football theme has to be
   visible during play, not just on the menus.
   ============================================================ */

.board {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ------------------------------------------------------------------ *
 * Scoreboard HUD                                                       *
 * ------------------------------------------------------------------ */
.hud {
  flex: 0 0 auto;
  margin: 10px var(--pad) 0;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-850) 100%);
  border: 1px solid rgba(255, 122, 26, .3);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud__cell { flex: 1 1 0; text-align: center; min-width: 0; }
.hud__lab {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--on-navy-soft);
}
.hud__val {
  font-family: var(--font-num);
  font-size: 19px; font-weight: 800; line-height: 1.15;
  color: var(--cream-50);
  font-variant-numeric: tabular-nums;
}
.hud__val--score { color: var(--orange-400); }
.hud__val--combo { color: #FFD24D; }
.hud__val--low { color: var(--bad); animation: pulseRed 1s ease-in-out infinite; }
@keyframes pulseRed { 50% { opacity: .45 } }

.hud__sep { width: 1px; align-self: stretch; background: rgba(247, 240, 224, .14); }

.hud__lives { display: flex; gap: 3px; justify-content: center; color: var(--bad); }
.hud__lives .off { color: rgba(247, 240, 224, .18); }

/* Timer bar under the HUD */
.timerbar {
  flex: 0 0 auto;
  height: 6px;
  margin: 6px var(--pad) 0;
  border-radius: var(--r-pill);
  background: rgba(8, 12, 36, .5);
  overflow: hidden;
}
.timerbar__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--good), #8AE7B8);
  transition: width .95s linear, background .4s;
}
.timerbar__fill.warn { background: linear-gradient(90deg, var(--warn), #FFD86B); }
.timerbar__fill.crit { background: linear-gradient(90deg, var(--bad), #FF8A8D); }

/* ------------------------------------------------------------------ *
 * Play area                                                            *
 * ------------------------------------------------------------------ */
.play {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px var(--pad) 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.objective {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--on-navy-soft);
}
.objective b { color: var(--orange-400); }

/* ------------------------------------------------------------------ *
 * Target slots - one row per word to find                              *
 * ------------------------------------------------------------------ */
.targets { display: flex; flex-direction: column; gap: 8px; align-items: center; }

.target {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5px 8px;
  border-radius: var(--r-md);
  background: rgba(8, 12, 36, .3);
  border: 1px solid rgba(247, 240, 224, .09);
  max-width: 100%;
  transition: background .25s, border-color .25s, transform .2s;
}
.target.is-found {
  background: rgba(47, 191, 113, .14);
  border-color: rgba(47, 191, 113, .45);
}
.target.is-hinted { border-color: rgba(255, 154, 68, .5); }
@keyframes goalPop {
  0% { transform: scale(1) }
  45% { transform: scale(1.07) }
  100% { transform: scale(1) }
}
.target.just-found { animation: goalPop .4s ease-out; }

.slot {
  width: 27px; height: 34px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--font-num);
  font-size: 17px; font-weight: 800;
  color: transparent;
  background: rgba(247, 240, 224, .07);
  border-bottom: 3px solid rgba(247, 240, 224, .26);
  transition: background .2s, color .2s, border-color .2s;
}
.slot.filled {
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--cream-50), var(--cream-200));
  border-bottom-color: var(--cream-400);
}
.slot.revealed {
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--orange-300), var(--orange-400));
  border-bottom-color: var(--orange-600);
}
.slot.hint {
  color: #26150A;
  background: linear-gradient(180deg, #FFE0B8, var(--orange-300));
  border-bottom-color: var(--orange-500);
}
/* Slots shrink on very narrow phones so an 8-letter row still fits. */
@media (max-width: 359px) { .slot { width: 24px; height: 31px; font-size: 15px; } }

.target__len {
  align-self: center;
  font-family: var(--font-num);
  font-size: 11px; font-weight: 800;
  color: var(--ink-mute);
  padding: 0 3px;
}
.target.is-found .target__len { color: var(--good); }

/* ------------------------------------------------------------------ *
 * Kick bar - where the word being built lives                          *
 * The frame is drawn as a goal mouth with net lines.                   *
 * ------------------------------------------------------------------ */
.kickbar {
  position: relative;
  min-height: 58px;
  margin: 2px 0;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: rgba(8, 12, 36, .42);
  border: 2px solid rgba(247, 240, 224, .2);
  border-top-width: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  transition: border-color .2s, background .2s, transform .12s;
  overflow: hidden;
}
.kickbar::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(247, 240, 224, .07) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(247, 240, 224, .07) 0 1px, transparent 1px 13px);
  pointer-events: none;
}
.kickbar.is-good { border-color: var(--good); background: rgba(47, 191, 113, .16); }
.kickbar.is-bad { border-color: var(--bad); background: rgba(229, 72, 77, .16); animation: shake .32s; }
@keyframes shake {
  0%, 100% { transform: translateX(0) }
  20% { transform: translateX(-7px) }
  40% { transform: translateX(6px) }
  60% { transform: translateX(-4px) }
  80% { transform: translateX(3px) }
}

.kickbar__hint {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: .4px;
  position: relative;
}

.kick-tile {
  width: 31px; height: 38px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-num);
  font-size: 19px; font-weight: 800;
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--cream-50), var(--cream-200));
  border-bottom: 3px solid var(--cream-400);
  box-shadow: var(--shadow-sm);
  position: relative;
  animation: popIn .14s ease-out both;
  cursor: pointer;
}
@keyframes popIn { from { transform: scale(.55); opacity: 0 } to { transform: none; opacity: 1 } }

/* ------------------------------------------------------------------ *
 * The ball rack                                                        *
 * ------------------------------------------------------------------ */
.rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  padding: 4px 0 2px;
}

.tile {
  --sz: 54px;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: 23px;
  font-weight: 800;
  color: var(--navy-900);
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, var(--cream-50) 38%, var(--cream-200) 100%);
  border: 2px solid var(--cream-400);
  box-shadow: 0 4px 0 rgba(140, 122, 92, .55), var(--shadow-md);
  transition: transform .1s ease, opacity .15s, box-shadow .1s;
  cursor: pointer;
  z-index: 1;
}
body.big-tiles .tile { --sz: 62px; font-size: 26px; }

/* the pentagon panels that make it read as a football */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 88%, rgba(26, 35, 96, .16) 0 12%, transparent 13%),
    radial-gradient(circle at 12% 40%, rgba(26, 35, 96, .13) 0 10%, transparent 11%),
    radial-gradient(circle at 88% 40%, rgba(26, 35, 96, .13) 0 10%, transparent 11%);
  pointer-events: none;
}
.tile > span { position: relative; z-index: 2; }

.tile:active { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 rgba(140, 122, 92, .55); }

.tile.is-used {
  opacity: .22;
  pointer-events: none;
  transform: scale(.9);
  box-shadow: none;
}
.tile.is-decoy-out {
  animation: tileOut .3s ease-in both;
  pointer-events: none;
}
@keyframes tileOut { to { opacity: 0; transform: scale(.3) rotate(28deg) } }

.tile.is-hot {
  border-color: var(--orange-500);
  box-shadow: 0 4px 0 var(--orange-700), 0 0 16px rgba(255, 122, 26, .55);
}

/* ------------------------------------------------------------------ *
 * Controls + booster bench                                             *
 * ------------------------------------------------------------------ */
.game-foot {
  flex: 0 0 auto;
  padding: 8px var(--pad) calc(10px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(14, 20, 54, 0), rgba(8, 12, 36, .92) 38%, var(--navy-950));
}

.ctrl-row { display: flex; gap: 8px; margin-bottom: 9px; }
.ctrl {
  flex: 1 1 0;
  min-height: 42px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13.5px; font-weight: 800;
  background: rgba(247, 240, 224, .1);
  border: 1px solid rgba(247, 240, 224, .16);
  color: var(--cream-100);
  transition: transform .1s, background .15s;
}
.ctrl:active { transform: scale(.96); background: rgba(247, 240, 224, .2); }
.ctrl--go {
  flex: 1.5 1 0;
  background: linear-gradient(180deg, var(--orange-400), var(--orange-600));
  border-color: var(--orange-700);
  color: #26150A;
  box-shadow: 0 4px 0 var(--orange-700);
}
.ctrl--go:active { box-shadow: 0 1px 0 var(--orange-700); transform: translateY(3px); }
.ctrl[disabled] { opacity: .4; pointer-events: none; }

.bench { display: flex; gap: 7px; justify-content: space-between; }

.boost {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 2px 5px;
  border-radius: var(--r-md);
  background: rgba(247, 240, 224, .08);
  border: 1px solid rgba(247, 240, 224, .13);
  color: var(--cream-100);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  position: relative;
  transition: transform .1s, background .15s;
}
.boost:active { transform: scale(.94); background: rgba(247, 240, 224, .16); }
.boost__n {
  font-family: var(--font-num);
  font-size: 11px; font-weight: 800;
  color: var(--orange-300);
}
.boost__lab {
  font-size: 8.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--on-navy-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.boost.is-empty { opacity: .42; }
.boost.is-empty .boost__n { color: var(--bad); }

/* ------------------------------------------------------------------ *
 * Floating score pop when a word lands                                 *
 * ------------------------------------------------------------------ */
.pop-host { position: relative; height: 0; overflow: visible; }
.pop {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  font-family: var(--font-num);
  font-size: 21px;
  font-weight: 800;
  color: var(--good);
  text-shadow: 0 2px 8px rgba(8, 12, 36, .8);
  pointer-events: none;
  animation: popUp 1s ease-out both;
  white-space: nowrap;
}
.pop--combo { color: #FFD24D; }
@keyframes popUp {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7) }
  22% { opacity: 1; transform: translate(-50%, -4px) scale(1.08) }
  70% { opacity: 1; transform: translate(-50%, -22px) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(.95) }
}

/* ------------------------------------------------------------------ *
 * Result screens - goal / whistle framing                              *
 * ------------------------------------------------------------------ */
.result-hero {
  text-align: center;
  padding: 22px 0 10px;
  position: relative;
}
.result-hero__ring {
  width: 108px; height: 108px; margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, #FFFFFF, var(--cream-100) 42%, var(--cream-300));
  border: 4px solid var(--orange-500);
  box-shadow: 0 0 0 8px rgba(255, 122, 26, .16), var(--shadow-lg);
  color: var(--navy-800);
  animation: ringIn .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.result-hero__ring--lose {
  border-color: var(--indigo-400);
  box-shadow: 0 0 0 8px rgba(64, 83, 180, .2), var(--shadow-lg);
  background: radial-gradient(circle at 36% 30%, var(--cream-100), var(--cream-300) 55%, var(--cream-400));
}
@keyframes ringIn { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }

.result-hero__title { font-size: 28px; font-weight: 800; color: var(--cream-50); letter-spacing: -.5px; }
.result-hero__sub { font-size: 13.5px; color: var(--on-navy-soft); margin-top: 4px; }

.result-stars { display: flex; justify-content: center; gap: 10px; margin: 14px 0 4px; }
.result-stars svg { color: rgba(247, 240, 224, .2); }
.result-stars .on { color: #FFD24D; filter: drop-shadow(0 3px 8px rgba(255, 178, 26, .55)); }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); opacity: 0 } to { transform: none; opacity: 1 } }
.result-stars .on { animation: starIn .4s cubic-bezier(.2, 1.5, .4, 1) both; }
.result-stars .on:nth-child(2) { animation-delay: .12s }
.result-stars .on:nth-child(3) { animation-delay: .24s }

.reward-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(247, 240, 224, .07);
  font-size: 13.5px; font-weight: 700;
  color: var(--cream-100);
}
.reward-line + .reward-line { margin-top: 6px; }
.reward-line__val { font-family: var(--font-num); font-weight: 800; color: var(--orange-300); }

.word-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.word-chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(47, 191, 113, .14);
  border: 1px solid rgba(47, 191, 113, .4);
  font-family: var(--font-num);
  font-size: 12.5px; font-weight: 800;
  color: #A8EDC7;
  letter-spacing: .6px;
}
.word-chip--miss {
  background: rgba(229, 72, 77, .12);
  border-color: rgba(229, 72, 77, .35);
  color: #FFB4B6;
}
.word-chip--fb { background: rgba(255, 154, 68, .16); border-color: rgba(255, 154, 68, .45); color: var(--orange-300); }

/* ------------------------------------------------------------------ *
 * Ball panels                                                          *
 * The rack tiles have to read as footballs at a glance, so the panels   *
 * are drawn properly: a bottom-centre pentagon, two shoulder pentagons  *
 * and the seams between them. Inline SVG data URI - still no network.   *
 * ------------------------------------------------------------------ */
.tile::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%231A2360' opacity='.15'><polygon points='50,58 63,67 58,82 42,82 37,67'/><polygon points='16,27 29,18 41,27 36,42 21,42'/><polygon points='84,27 71,18 59,27 64,42 79,42'/></g><g stroke='%231A2360' stroke-width='3.2' opacity='.13' fill='none' stroke-linecap='round'><path d='M50 58V43'/><path d='M37 67 21 59'/><path d='M63 67 79 59'/><path d='M42 82 38 96'/><path d='M58 82 62 96'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ *
 * Vertical rhythm                                                      *
 * Targets stay at the top of the play area; the kick bar and the rack   *
 * sink to the bottom so the thumb always finds them in the same place,  *
 * whatever the rack size.                                              *
 * ------------------------------------------------------------------ */
.play > .objective { margin-top: auto; }
.play > .pop-host { margin-top: auto; }
.play > .rack { padding-bottom: 2px; }
.play > .targets { padding-top: 2px; }