/* Klondike table. Card size on the play page comes from the stage, not these defaults. */
:root {
  --cl-accent: #8b2e16;
  --cl-felt: #1f5f3a;
  --cl-card-w: 4.5rem;
  --cl-card-h: 6.3rem;
}

body { margin: 0; background: #f6f3ee; color: #222; }

.cl {
  max-width: 48rem;
  margin: 2rem auto;
  font-family: system-ui, sans-serif;
}

.cl h1 { color: var(--cl-accent); }
.cl a { color: var(--cl-accent); }

.cl-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.cl-actions { display: flex; gap: 0.75rem; align-items: center; margin: 1rem 0; }
.cl-actions form { margin: 0; }
.cl-small { font-size: 0.85rem; color: #666; margin-left: 0.5rem; }
.cl-games li { margin: 0.4rem 0; }
.cl-new-game { display: flex; gap: 0.5rem; align-items: center; }
.cl-flash { padding: 0.5rem; border-radius: 4px; margin: 0.5rem 0; }
.cl-flash--alert { background: #fbe3e0; }
.cl-flash--notice { background: #e3f3e0; }
.cl-message { min-height: 1.5rem; }
.cl-message[data-kind="error"] { color: #b00020; }
.cl-message[data-kind="win"] { color: var(--cl-felt); font-weight: bold; font-size: 1.3rem; }

.cl-klondike {
  background: var(--cl-felt);
  border-radius: 8px;
  padding: 1rem;
  user-select: none;
}

.cl-row { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.cl-row--tableau { align-items: flex-start; min-height: 20rem; }

.cl-pile {
  position: relative;
  width: var(--cl-card-w);
  min-height: var(--cl-card-h);
  border-radius: 6px;
  outline: 1px dashed rgba(255, 255, 255, 0.3);
}

.cl-pile--stock,
.cl-pile--waste { cursor: pointer; }

.cl-pile--waste {
  width: auto;
  min-width: var(--cl-card-w);
}

.cl-pile .cd-card,
.cl-pile .cd-card-selected { z-index: 1; }
.cd-card-up { touch-action: none; }
.cl-pile--stock .cd-card { cursor: pointer; }
.cl-pile--fan.cl-pile--review .cd-card { transition: top 180ms ease-out; }
.cl-card--hint { outline: 3px solid #f5c518; }
.cl-card--lifted { visibility: hidden; pointer-events: none; }

.cl-pile--over,
.cl-pile--hint {
  outline: 2px solid #f5c518;
  outline-offset: 2px;
  background: rgba(245, 197, 24, 0.18);
}

.cl-drag {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: var(--cl-card-w);
  margin: 0;
  pointer-events: none;
}

.cl-drag * { pointer-events: none; }
.cl-drag .cd-card { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }

html:has(.cl--play),
body:has(.cl--play) { height: 100dvh; overflow: hidden; }

.cl.cl--play {
  max-width: none;
  width: 100%;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cl.cl--play .cl-header {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.8rem;
  box-sizing: border-box;
  overflow-x: auto;
}

.cl.cl--play .cl-header h1 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}

.cl.cl--play .cl-flash { margin: 0; white-space: nowrap; padding: 0.15rem 0.5rem; flex: 0 0 auto; }
.cl.cl--play .cl-actions {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.cl.cl--play .cl-actions form { display: flex; align-items: center; }

.cl.cl--play .cl-slot {
  position: relative;
  z-index: 1;
  width: var(--cl-card-w);
  height: var(--cl-card-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(var(--cl-card-w) * 0.045);
  padding: calc(var(--cl-card-w) * 0.05);
  background: color-mix(in srgb, #000 22%, var(--cl-felt));
  border-radius: calc(var(--cl-card-w) * 0.08);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.cl.cl--play .cl-controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--cl-card-w) * 0.04);
  width: 100%;
  min-width: 0;
}

.cl.cl--play .cl-controls .cl-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: calc(var(--cl-card-w) * 0.105);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  color: #f4f7f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl.cl--play .cl-controls form { margin: 0; display: flex; min-width: 0; }

.cl.cl--play .cl-controls .cl-button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.16em 0.12em;
  font-size: calc(var(--cl-card-w) * 0.072);
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
}

.cl.cl--play .cl-stats {
  flex: 0 0 auto;
  min-width: 0;
  font-size: calc(var(--cl-card-w) * 0.062);
  font-weight: 600;
  line-height: 1.15;
  color: #f4f7f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl.cl--play .cl-note {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  font-size: calc(var(--cl-card-w) * 0.068);
  font-weight: 500;
  line-height: 1.25;
  color: #f4f7f2;
  overflow: hidden;
  overflow-wrap: break-word;
}

.cl.cl--play .cl-note[data-kind="error"] { color: #ffd2d2; }
.cl.cl--play .cl-note[data-kind="lost"] { color: #ffc2b3; }
.cl.cl--play .cl-note[data-kind="win"] { color: #ffe08a; }
.cl.cl--play .cl-note[data-kind="hint"] { color: #fff; }

.cl.cl--play .cl-stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  container-type: size;
  background: var(--cl-felt);
  overflow: hidden;
  padding: 0.75rem 0.8rem;
  box-sizing: border-box;
}

.cl.cl--play .cl-klondike {
  box-sizing: border-box;
  width: 100%;
  min-height: 100cqh;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  --cl-card-w: min(calc(100cqw / 7.9), calc(100cqh / 3.35));
  --cl-card-h: calc(var(--cl-card-w) * 1.4);
  --cl-gap: calc(var(--cl-card-w) * 0.14);
}

.cl.cl--play .cl-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--cl-gap);
  justify-items: center;
  align-items: start;
  width: 100%;
  margin-bottom: var(--cl-gap);
}

.cl.cl--play .cl-row--tableau { align-items: start; align-content: start; min-height: 0; margin-bottom: 0; }

.cl.cl--play .cl-pile--waste {
  width: var(--cl-card-w);
  max-width: var(--cl-card-w);
  min-width: 0;
  overflow: visible;
}

.cl.cl--play .cl-draw-choice {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 8%;
  font-size: calc(var(--cl-card-w) * 0.16);
  line-height: 1.05;
  color: #f4f7f2;
  pointer-events: none;
}

.cl.cl--play .cl-draw-choice label {
  display: flex;
  align-items: center;
  gap: 0.15em;
  min-width: 0;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
}

.cl.cl--play .cl-draw-choice input {
  margin: 0;
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
  accent-color: #f4e2c4;
}

.cl.cl--play .cl-draw-choice:has(input:disabled) label { cursor: default; }
.cl.cl--play .cl-draw-choice input:disabled { opacity: 1; }

.cl.cl--play .cl-pile,
.cl.cl--play .cd-card { border-radius: calc(var(--cl-card-w) * 0.08); }

html.cl-dragging,
html.cl-dragging * { cursor: grabbing !important; }

.cl-button,
.cl-new-game input[type="submit"] {
  background: var(--cl-accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  font: inherit;
}

.cl-button:hover,
.cl-new-game input[type="submit"]:hover { filter: brightness(1.1); }

.cl-link-button {
  background: none;
  border: 0;
  color: #b00020;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.85rem;
}

.cl-inline { display: inline; margin-left: 0.5rem; }