/* ==========================================================================
   Paramapadam - single-page theme
   Palette from the traditional printed cloth board:
   cream ground, black ink linework, green ladders,
   terracotta snakes.
   ========================================================================== */

:root {
  --cream:      #fdf6e6;
  --paper:      #fffdf6;
  --cell-bg:    #fffefb;
  --ink:        #181512;
  --ink-soft:   #5b5147;
  --ink-line:   rgba(24, 21, 18, .85);
  --green:      #2f7d3b;
  --green-dark: #14521f;

  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body:    "Spectral", Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(0deg,  rgba(24,21,18,.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(24,21,18,.022) 0 1px, transparent 1px 5px);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1520px, 94vw); margin-inline: auto; }

/* ============================== buttons ================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border: 1.6px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s, color .2s;
}
.btn-solid { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-solid:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 -3px rgba(24,21,18,.28);
}
.btn-ghost:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
.btn-sm { padding: 11px 20px; font-size: .7rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .42; cursor: not-allowed; }

/* The way back out to the other game (Indian Rummy). It sits under New Game in
   the control column, where it is on screen without scrolling. The label says
   what it does, so it keeps the quiet ghost treatment rather than the solid
   one the in-game actions use -- it should read as leaving, not as a move. */
.back-home { margin-top: 10px; }
.back-home svg { width: 15px; height: 15px; transition: transform .18s ease; }
.back-home:hover svg { transform: translateX(-3px); }

/* ======================================================================
   The play area: board on the left, players + dice on the right
   ====================================================================== */

.hero { padding: clamp(16px, 2vw, 28px) 0 clamp(24px, 3vw, 44px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 348px);
  gap: clamp(24px, 2.6vw, 46px);
  align-items: center;
}

/* ------------------------------- board --------------------------------- */

.hero-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.board-frame {
  position: relative;
  width: 100%;
  /* height-driven so it fits the viewport, capped so it never gets silly */
  max-width: clamp(440px, calc((100vh - 70px) * 0.9167), 950px);
  padding: 16px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 10px 12px 0 -3px rgba(24, 21, 18, .85);
}

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 12;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 7px;
  overflow: hidden;
}

.board-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.cell {
  display: flex;
  align-items: flex-end;
  background: var(--cell-bg);
  justify-content: flex-start;
  padding: 0 0 .2em .3em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--cell-fs, 10px);
  line-height: 1;
  color: var(--ink);
  border-right: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  /* halo keeps the number readable where a snake or ladder crosses it */
  text-shadow:
    0 0 2px var(--cell-bg), 0 0 2px var(--cell-bg),
    0 0 4px var(--cell-bg), 0 0 4px var(--cell-bg);
  user-select: none;
}
.cell:nth-child(11n)     { border-right: 0; }
.cell:nth-child(n + 122) { border-bottom: 0; }

.board-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .95;
}



/* ------------------------- players + dice column ------------------------ */

.hero-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* brand, moved out of the old header bar */
.panel-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
}
.brand-mark { width: 34px; height: 34px; flex: none; }

/* wordmark stacked over its subtitle, to the right of the mark.  The two lines
   together come to roughly the height of the mark, so the row still reads as
   one centred lockup. */
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-name em { font-style: normal; color: var(--green); }

/* same treatment as the scoreboard's "vs" label, so the panel has one
   small-caps voice rather than two */
.brand-tag {
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* ============================== footer ================================== */

.site-footer {
  margin-top: clamp(24px, 3.4vw, 46px);
  padding: 26px 0 36px;
  border-top: 1.5px solid var(--ink);
}
/* One line now that the "Site designed by" credit is gone, so the wrap and
   space-between that used to split two lines are no-ops -- kept so the row
   still behaves if a second line is ever added back. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 30px;
  font-size: .84rem;
  color: var(--ink-soft);
}
.footer-inner p { margin: 0; }

/* ============================ responsive ================================ */

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
}

@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: stretch;
  }
  .hero-board { order: 1; }
  .hero-side  { order: 2; }
  .board-frame { max-width: min(100%, 620px); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .btn { padding: 13px 24px; }
  .brand-name { font-size: .98rem; }
}