/* ============================================================
   WIN ELNOVAR - game.css
   The solitaire board: scoreboard HUD, foundations, stock/waste,
   tableau columns, cards, booster dock.

   Card geometry is driven by two custom properties that game.js
   recomputes on every layout pass:
      --cw  card width
      --ch  card height
   Everything else is derived from them, so the board scales to any
   portrait phone without media queries.
   ============================================================ */

.board {
  --cw: 46px;
  --ch: 64px;
  --tw: 46px;          /* foundations / stock / waste use their own size */
  --th: 64px;
  --fan: 18px;          /* vertical offset between face-up tableau cards */
  --fan-down: 9px;      /* smaller offset between face-down cards */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(250,245,234,0) 0%, rgba(14,92,86,.05) 100%);
}

/* ------------------------------------------------------------
   Scoreboard HUD - stadium board styling
   ------------------------------------------------------------ */
.hud {
  flex: 0 0 auto;
  padding: calc(8px + var(--safe-t)) 10px 9px;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--cream);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 3;
}
.hud__top { display: flex; align-items: center; gap: 8px; }
.hud__btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(250, 245, 234, .12);
  color: var(--cream);
  flex: 0 0 auto;
  transition: transform 140ms var(--ease);
}
.hud__btn:active { transform: scale(.9); }
.hud__btn svg { width: 18px; height: 18px; }
.hud__btn[disabled] { opacity: .35; }

.hud__title { flex: 1 1 auto; min-width: 0; text-align: center; }
.hud__t { font-family: var(--font-num); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud__s {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(250,245,234,.55); margin-top: 1px;
  /* one line only - a wrapped subtitle pushes the whole board down */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hud__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
  padding: 7px 6px;
  border-radius: var(--r-md);
  background: rgba(6, 41, 38, .42);
  border: 1px solid rgba(250, 245, 234, .1);
}
.hud__st { text-align: center; min-width: 0; }
.hud__stK { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(250,245,234,.5); font-weight: 700; }
.hud__stV {
  font-family: var(--font-num);
  font-size: 15px; font-weight: 800;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hud__stV.warn { color: var(--gold-2); }
.hud__stV.crit { color: #FF9B84; animation: critBlink 1s steps(2, end) infinite; }
@keyframes critBlink { 50% { opacity: .45; } }

.hud__goal {
  margin-top: 7px;
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px;
  color: rgba(250,245,234,.7);
}
.hud__goal .meter { flex: 1 1 auto; height: 5px; background: rgba(250,245,234,.16); }
.hud__goal .meter > i { background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); }

/* ------------------------------------------------------------
   Play area
   ------------------------------------------------------------ */
.play {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 0;
  position: relative;
}

/* ---- top row: foundations + stock/waste ---- */
.zone-top {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}
.founds { display: flex; gap: 5px; }
.deck { margin-left: auto; display: flex; gap: 5px; }

.slot {
  position: relative;
  width: var(--tw);
  height: var(--th);
  border-radius: calc(var(--tw) * .13);
  border: 1.5px dashed rgba(14, 92, 86, .3);
  background: rgba(14, 92, 86, .05);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.slot__ic { color: rgba(14, 92, 86, .34); display: grid; place-items: center; }
.slot__ic svg { width: calc(var(--tw) * .52); height: calc(var(--tw) * .52); }
.slot--found.is-hot { border-color: var(--gold-2); background: rgba(232, 184, 75, .16); }
.slot--stock { border-style: solid; border-color: rgba(14, 92, 86, .22); }
.slot--stock.is-empty .slot__ic { opacity: .5; }

.stock-count {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--deep);
  color: var(--cream);
  font-family: var(--font-num);
  font-size: 9.5px;
  font-weight: 800;
  border: 1.5px solid var(--cream);
  z-index: 5;
}

/* the waste shows up to three cards fanned to the right */
.waste { position: relative; width: calc(var(--tw) + var(--tw) * .56); height: var(--th); flex: 0 0 auto; }

/* ---- tableau ---- */
.zone-tab {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  align-items: flex-start;
  overflow: visible;
}
.col {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--cw);
  height: 100%;
}
.col__base {
  position: absolute;
  top: 0; left: 0;
  width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * .13);
  border: 1.5px dashed rgba(14, 92, 86, .22);
  background: rgba(14, 92, 86, .035);
}
.col.is-hot .col__base { border-color: var(--gold-2); background: rgba(232, 184, 75, .16); }

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */
.card {
  position: absolute;
  width: var(--cw);
  height: var(--ch);
  border-radius: calc(var(--cw) * .13);
  box-shadow: 0 1px 2px rgba(8, 36, 33, .18), 0 3px 8px rgba(8, 36, 33, .12);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  overflow: hidden;
  backface-visibility: hidden;
}
.card svg { width: 100%; height: 100%; display: block; pointer-events: none; }

/* Cards living in the foundations, waste and stock follow the top row size. */
.card--top {
  width: var(--tw);
  height: var(--th);
  border-radius: calc(var(--tw) * .13);
}

.card.is-sel {
  transform: translateY(-7px) scale(1.03);
  box-shadow: 0 0 0 2.5px var(--gold-2), 0 8px 18px rgba(8, 36, 33, .28);
  z-index: 40 !important;
}
.card.is-hint {
  animation: hintGlow 1.1s var(--ease) 2;
  z-index: 38;
}
@keyframes hintGlow {
  0%, 100% { box-shadow: 0 1px 2px rgba(8,36,33,.18), 0 3px 8px rgba(8,36,33,.12); }
  50%      { box-shadow: 0 0 0 3px rgba(232, 184, 75, .85), 0 6px 16px rgba(232, 184, 75, .45); }
}
.card.is-bad { animation: shakeX 320ms var(--ease); }
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.card.is-drop { animation: dropIn 260ms var(--ease) both; }
@keyframes dropIn {
  from { transform: scale(1.1); }
  to   { transform: none; }
}
.card.is-deal { animation: dealIn 300ms var(--ease) both; }
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-22px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.card.is-flip { animation: flipUp 280ms var(--ease) both; }
@keyframes flipUp {
  0%   { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

/* face styling handled inside the SVG, but text needs sizing here */
.cd-rank { font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", Roboto, sans-serif; font-weight: 800; }

/* ------------------------------------------------------------
   Booster dock
   ------------------------------------------------------------ */
.dock {
  flex: 0 0 auto;
  padding: 8px 8px calc(8px + var(--safe-b));
  display: flex;
  gap: 6px;
  background: linear-gradient(180deg, rgba(250,245,234,0), rgba(243,236,220,.9) 45%);
  position: relative;
  z-index: 3;
}
.boost {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 140ms var(--ease);
}
.boost:active { transform: scale(.94); }
.boost__ic { width: 24px; height: 24px; display: grid; place-items: center; color: var(--deep); }
.boost__ic svg { width: 22px; height: 22px; }
.boost__t { font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.boost__n {
  position: absolute;
  top: -5px; right: -3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #33260A;
  font-family: var(--font-num);
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  border: 1.5px solid var(--paper);
}
.boost__n--zero { background: var(--cream-3); color: var(--ink-3); }
.boost.is-off { opacity: .42; pointer-events: none; }
.boost.is-fire { animation: boostFire 420ms var(--ease); }
@keyframes boostFire {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(232,184,75,.3); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------
   Win sweep - cards cascade to the foundations
   ------------------------------------------------------------ */
.sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 45;
}

/* ------------------------------------------------------------
   Pause overlay is a real screen; this is the board dim behind it
   ------------------------------------------------------------ */
.board.is-paused .play { filter: blur(2px) saturate(.6); opacity: .5; }

/* ------------------------------------------------------------
   Compact heights - short phones
   ------------------------------------------------------------ */
@media (max-height: 640px) {
  .hud__stats { margin-top: 6px; padding: 5px 6px; }
  .hud__stV { font-size: 13.5px; }
  .hud__goal { margin-top: 5px; }
  .dock { padding-top: 6px; }
  .boost { padding: 5px 2px 5px; }
  .boost__ic { width: 20px; height: 20px; }
  .boost__ic svg { width: 19px; height: 19px; }
}

/* ------------------------------------------------------------
   Left handed dock - mirrors the booster row and the deck so the
   stock sits under the thumb of a left handed player.
   ------------------------------------------------------------ */
#device.is-left .dock { flex-direction: row-reverse; }
#device.is-left .zone-top { flex-direction: row-reverse; }
#device.is-left .deck { margin-left: 0; margin-right: auto; flex-direction: row-reverse; }
#device.is-left .founds { flex-direction: row-reverse; }