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

/*
 * Deckboard default = station density.
 * Hairline gutters, flush modules, condensed high-contrast type.
 * Optional #board.spacing-legacy restores the old Vestaboard-style air gaps.
 */
:root {
  --cols: 28;
  --rows: 8;
  --gap: 1px;
  /* Equal black frame: JS sets pad-x / pad-y so leftover is symmetric */
  --pad-x: 0px;
  --pad-y: 0px;
  --pad: 0px; /* legacy alias; fixed mode uses pad-x/y */
  --inset: 1px;
  --split: 1px;
  --aspect: 0.72;
  /* Fixed module size (px) — JS always sets these for no-skew modes */
  --cell-w: 22px;
  --cell-h: 30.555px;
  --half-h: calc((var(--cell-h) - var(--inset) * 2 - var(--split)) / 2);
  --font: min(calc(var(--cell-w) * 0.95), calc(var(--half-h) * 1.12));
  --frame-black: #050508;
}

body {
  background: var(--frame-black);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell-w));
  grid-template-rows: repeat(var(--rows), var(--cell-h));
  gap: var(--gap);
  padding: var(--pad-y) var(--pad-x);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  /* Fixed mode: center the tile field inside equal black margins */
  align-content: center;
  justify-content: center;
  background: var(--frame-black);
}

/* Stretch mode: modules expand to fill (can skew slightly) */
#board.layout-stretch {
  align-content: stretch;
  justify-content: stretch;
  background: linear-gradient(180deg, #1a1a22 0%, #0c0c10 40%, #08080c 100%);
}

  --c-red: #b5342b;  --c-orange: #c96a1e;  --c-yellow: #c9b13a;  --c-green: #3f7d3c;
  --c-blue: #2f5d8c; --c-violet: #5b3b8c;  --c-white: #d9d9d4;   --c-black: #141414;
  --card-bg: #0c0c10;
  --card-grad: none;
  --top-bevel: transparent;
  --crease-ao: transparent;
  --side-ao: transparent;
  --split-core: #1a1a22;
  --split-lip: transparent;
  --split-shadow: transparent;
  --cap-bg: transparent;
  --cap-hi: transparent;
  --stack-base: transparent;
  --stack-line: transparent;
  --stack-seam: transparent;
  --stack-fan-hi: transparent;
  --stack-fan-lo: transparent;
  --char-color: #efece2;
  --char-shadow: none;
  --flap-shade: rgba(0,0,0,.55);
}

/* Legacy roomy cages (Vestaboard / Festaboard feel) — gutter only; size still from JS */
#board.spacing-legacy {
  --gap: 6px;
  --inset: 3px;
  --font: min(calc(var(--cell-w) * 0.72), calc(var(--half-h) * 0.95));
  --char-color: #9a9a9a;
  --char-shadow: 0 1px 0 rgba(0,0,0,.55);
  --card-bg: #0e0e0e;
  --split-core: #050505;
  --stack-base: #1c1c1c;
  --stack-line: rgba(255,255,255,.06);
  --stack-seam: rgba(0,0,0,.55);
  --stack-fan-hi: rgba(255,255,255,.06);
  --stack-fan-lo: rgba(0,0,0,.42);
}
#board.spacing-legacy .cell {
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.02) 5%, rgba(255,255,255,0) 13%),
    linear-gradient(180deg, #1c1c1c 0%, #0e0e0e 55%, #050505 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 0 9px 9px -8px rgba(0,0,0,.9),
    inset 0 -11px 12px -8px rgba(0,0,0,.95),
    inset 9px 0 10px -9px rgba(0,0,0,.6),
    inset -9px 0 10px -9px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.05),
    0 2px 5px rgba(0,0,0,.7);
}
#board.spacing-legacy .tile-bottom::after { opacity: 1; }
#board.spacing-legacy .char-display span {
  font-weight: 500;
  letter-spacing: 0;
}

#board::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.35) 100%);
  z-index: 8;
}

.cell {
  position: relative;
  width: var(--cell-w);
  height: var(--cell-h);
  border-radius: 1px;
  perspective: 460px;
  perspective-origin: 50% 44%;
  background: #08080c;
  box-shadow: inset 0 0 0 1px #1c1c24;
}

.tile-wrap {
  position: absolute;
  top: var(--inset); left: var(--inset); right: var(--inset); bottom: var(--inset);
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.tile-top {
  flex: 1;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: var(--card-bg);
}
.tile-bottom {
  flex: 1;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: var(--card-bg);
}

/* Stack striations off by default (station density); legacy re-enables */
.tile-bottom::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 17%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(140% 190% at 50% 100%, var(--stack-fan-hi), var(--stack-fan-lo) 70%),
    repeating-linear-gradient(180deg,
      var(--stack-seam) 0 1px,
      var(--stack-line) 1px 1.5px,
      var(--stack-base) 1.5px 2.6px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 42%);
          mask: linear-gradient(180deg, transparent, #000 42%);
}

.tile-split {
  height: var(--split);
  flex-shrink: 0;
  position: relative;
  z-index: 6;
  background: var(--split-core);
}

.char-display {
  position: absolute;
  left: 0; right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.tile-top    .char-display { top: 0; }
.tile-bottom .char-display { bottom: 0; }

.char-display span {
  font-family: 'Barlow Condensed', 'Barlow Semi Condensed', 'Roboto Condensed', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--font);
  color: var(--char-color);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
  white-space: nowrap;
  text-shadow: var(--char-shadow);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.flap-falling, .flap-rising {
  position: absolute;
  left: var(--inset); right: var(--inset);
  height: var(--half-h);
  overflow: hidden;
  z-index: 5;
  backface-visibility: hidden;
}
.flap-falling {
  top: var(--inset);
  transform-origin: center bottom;
  border-radius: 0;
  background: var(--card-bg);
}
.flap-rising {
  bottom: var(--inset);
  transform-origin: center top;
  border-radius: 0;
  background: var(--card-bg);
}
.flap-falling .char-display { top: 0; height: 200%; }
.flap-rising  .char-display { bottom: 0; height: 200%; }

.flap-falling::after, .flap-rising::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.flap-falling::after { background: linear-gradient(180deg, transparent, var(--flap-shade)); opacity: 0; }
.flap-rising::after  { background: linear-gradient(180deg, var(--flap-shade), transparent); opacity: 1; }

@keyframes flapFall { 0% { transform: rotateX(0); } 100% { transform: rotateX(-90deg); } }
@keyframes flapRise { 0% { transform: rotateX(90deg); } 82% { transform: rotateX(-5deg); } 100% { transform: rotateX(0); } }
@keyframes shadeIn  { to { opacity: 1; } }
@keyframes shadeOut { to { opacity: 0; } }

.flap-falling.go { animation: flapFall var(--frame) cubic-bezier(.4,.05,.6,1) forwards; }
.flap-rising.go  { animation: flapRise var(--frame) cubic-bezier(.34,1.4,.64,1) forwards; }
.flap-falling.go::after { animation: shadeIn  var(--frame) ease-in  forwards; }
.flap-rising.go::after  { animation: shadeOut var(--frame) ease-out forwards; }

#board.palette-pastel {
  --c-red: #f5a7a0;  --c-orange: #f7c9a0;  --c-yellow: #f7e8a0;  --c-green: #aee5c3;
  --c-blue: #acd5f0; --c-violet: #d4b8e0;  --c-white: #f7f9f9;   --c-black: #5a5a5a;
}
#board.palette-fluor {
  --c-red: #ff1744;  --c-orange: #ff9100;  --c-yellow: #ffea00;  --c-green: #00e676;
  --c-blue: #00b0ff; --c-violet: #d500f9;  --c-white: #ffffff;   --c-black: #1a1a1a;
}

.color-red    { --card-bg: var(--c-red); }
.color-orange { --card-bg: var(--c-orange); }
.color-yellow { --card-bg: var(--c-yellow); }
.color-green  { --card-bg: var(--c-green); }
.color-blue   { --card-bg: var(--c-blue); }
.color-violet { --card-bg: var(--c-violet); }
.color-white  { --card-bg: var(--c-white); }
.color-black  { --card-bg: var(--c-black); }

.cell[class*="color-"] .tile-top,
.cell[class*="color-"] .tile-bottom,
.flap-falling[class*="color-"],
.flap-rising[class*="color-"] {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18)), var(--card-bg);
}

#board.muted .cell[class*="color-"] .tile-top,
#board.muted .cell[class*="color-"] .tile-bottom,
#board.muted .flap-falling[class*="color-"],
#board.muted .flap-rising[class*="color-"] {
  filter: saturate(0.2);
}

.cell.card-tile .tile-top,
.cell.card-tile .tile-bottom,
.flap-falling.card-tile,
.flap-rising.card-tile {
  background: linear-gradient(165deg, #fffef9, #ebe6da);
}
.cell.card-tile .char-display span,
.flap-falling.card-tile .char-display span,
.flap-rising.card-tile .char-display span {
  font-family: 'Barlow Condensed', 'Share Tech Mono', 'Segoe UI Symbol', sans-serif;
  font-size: min(calc(var(--cell-w) * 0.55), calc(var(--half-h) * 1.0));
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow: none;
}
.cell.card-red   .char-display span,
.flap-falling.card-red   .char-display span,
.flap-rising.card-red    .char-display span { color: #c0151f; }
.cell.card-black .char-display span,
.flap-falling.card-black .char-display span,
.flap-rising.card-black  .char-display span { color: #16161c; }
.cell.card-joker .char-display span,
.flap-falling.card-joker .char-display span,
.flap-rising.card-joker  .char-display span {
  color: #b5179e;
  font-size: min(calc(var(--cell-w) * 0.7), calc(var(--half-h) * 1.05));
}

#board.theme-light .cell:not([class*="color-"]):not(.card-tile) {
  --card-bg: #f1eadc;
  --split-core: #c7bca6;
  --char-color: #1e1b15;
  --char-shadow: none;
  --flap-shade: rgba(40,30,15,.34);
}
#board.theme-light .cell:not([class*="color-"]):not(.card-tile) {
  background: #e4dcc8;
  box-shadow: inset 0 0 0 1px #c8bca8;
}