:root {
  --felt: #0e6b35;
  --felt-dark: #063d1f;
  --gold: #f7931a;
  --gold-light: #f0d878;
  /* Pyramid cards – 10% up from 78×110, aspect locked 65:92 */
  --card-w: 86px;
  --card-h: 121px;
  /* Each lower row covers the one above by 45px */
  --cover: 45px;
  --row-step: calc(var(--card-h) - var(--cover));
  /* Hand cards – larger */
  --hand-w: 96px;
  --hand-h: 134px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
  background: #0a0a0a;
  color: #fff;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#top-bar {
  height: 44px;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
  font-size: 0.85rem;
  gap: 8px;
}
#top-bar .stat { color: var(--gold-light); font-weight: 600; }
#top-bar .stat span { color: #fff; }
.btn-bar {
  background: transparent;
  border: 1px solid #555;
  color: #ccc;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-left: 4px;
}
.btn-bar:hover { border-color: var(--gold); color: var(--gold); }

/* Board: left pyramid | right hand + instructions */
#board {
  flex: 1;
  min-height: 0;
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 75%);
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
}

.board-left {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden; /* clip only outside table; rows pinned 10px in */
}

.board-right {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 10px;
}

/* Pyramid fills left table; top row 10px from top, bottom row 10px from bottom */
#pyramid {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  bottom: 10px;
  /* height is auto from top/bottom inset */
}

.pyr-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 4px;
  transition: top 0.28s ease;
}

/* top of each row = rowIndex * step; bottom row sits above bottom edge via step math
   With 7 rows: last row top = 6 * step
   Total span from top of row0 to bottom of row6 = 6*step + card-h
   We also scale step if needed via JS-free CSS: use % of available height when possible */

.pyr-row[data-row="0"] { top: 0; z-index: 1; }
.pyr-row[data-row="1"] { top: calc(1 * var(--row-step)); z-index: 2; }
.pyr-row[data-row="2"] { top: calc(2 * var(--row-step)); z-index: 3; }
.pyr-row[data-row="3"] { top: calc(3 * var(--row-step)); z-index: 4; }
.pyr-row[data-row="4"] { top: calc(4 * var(--row-step)); z-index: 5; }
.pyr-row[data-row="5"] { top: calc(5 * var(--row-step)); z-index: 6; }
.pyr-row[data-row="6"] { top: calc(6 * var(--row-step)); z-index: 7; }

.pyr-slot {
  width: var(--card-w);
  height: var(--card-h);
  flex-shrink: 0;
  transition: width 0.28s ease, height 0.28s ease;
}

.pyr-slot .card {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45);
  display: block;
  cursor: default;
  user-select: none;
  background: #fff;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.pyr-slot.free .card { cursor: pointer; }
.pyr-slot.blocked .card {
  filter: brightness(0.72);
  cursor: default;
}
.pyr-slot.selected .card {
  box-shadow: 0 0 0 3px var(--gold), 0 3px 10px rgba(247,147,26,0.5);
}
.pyr-slot.removed {
  visibility: hidden;
  pointer-events: none;
}

/* Hand area – larger cards */
.hand-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hand-label {
  font-size: 0.8rem;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hand-cards {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.hand-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#stock, #waste {
  width: var(--hand-w);
  height: var(--hand-h);
}

#stock .card,
#waste .card {
  width: var(--hand-w);
  height: var(--hand-h);
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  cursor: pointer;
  background: #fff;
  display: block;
}

#waste .selected,
#waste .card.selected {
  box-shadow: 0 0 0 3px var(--gold), 0 4px 14px rgba(247,147,26,0.55);
}

.card-slot {
  width: var(--hand-w);
  height: var(--hand-h);
  border: 2px dashed rgba(255,255,255,0.28);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.15);
  font-size: 1.4rem;
}

.empty-stock {
  cursor: pointer;
  border-color: var(--gold);
  color: var(--gold-light);
  font-size: 1.8rem;
}

.stock-meta {
  font-size: 0.75rem;
  color: #bbb;
}

.instructions {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(247,147,26,0.35);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  max-width: 260px;
}

.instructions h3 {
  color: var(--gold-light);
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-align: center;
}

.instructions ul {
  list-style: none;
  font-size: 0.72rem;
  color: #ccc;
  line-height: 1.45;
}

.instructions li {
  margin-bottom: 5px;
  padding-left: 0.9em;
  position: relative;
}

.instructions li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

.instructions strong { color: #fff; }

.pair-ref {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.68rem;
  color: var(--gold-light);
  text-align: center;
  line-height: 1.4;
}

.modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal.hidden { display: none; }
.modal-content {
  background: #1a1a1a;
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 400px;
  width: 90%;
}
.modal-content h2 {
  color: var(--gold-light);
  font-size: 1.75rem;
  margin-bottom: 0.8rem;
}
.modal-content p {
  color: #ccc;
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}
.modal-content .btn-primary {
  margin-top: 1.2rem;
  background: var(--gold);
  color: #111;
  border: none;
  padding: 0.7rem 1.6rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.modal-content .btn-primary:hover { background: #ffa940; }

.lb-empty {
  color: #666;
  text-align: center;
  padding: 1rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.lb-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: #1a1a1a;
  border-radius: 6px;
  font-size: 0.85rem;
}
.lb-rank { color: #888; width: 22px; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-time { color: var(--gold); font-weight: 700; }

@media (max-width: 900px) {
  :root {
    --card-w: 64px;
    --card-h: 90px;
    --cover: 45px;
    --hand-w: 72px;
    --hand-h: 100px;
  }
  .board-right { width: 200px; }
  .instructions ul { font-size: 0.65rem; }
}

@media (max-width: 700px) {
  #board {
    flex-direction: column;
    overflow: auto;
  }
  .board-left {
    min-height: 360px;
  }
  .board-right {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}