/* sampler.felt.css — the evening-in-the-sewing-room theme: felt, cream
   ink, brass, fabric bolts, buttons. Shared by the daily (sampler.html) and
   the author tool so the two can never look different. Link it AFTER
   sampler.css. */
:root {
  /* Felt + lamplight */
  --felt-page:   #221c15;
  --felt:        #2e2720;
  --felt-deep:   #1b1611;
  --felt-edge:   #3d3428;

  /* Cream ink on dark */
  --cream:       #f3ead6;
  --cream-soft:  #c9bca1;
  --cream-faint: #8e8168;

  /* Paper tags */
  --tag:         #f5eeda;
  --tag-ink:     #2b241c;

  /* Accents */
  --brass:       #c9a441;
  --brass-deep:  #97782a;
  --thread:      #c8503c;
  --thread-deep: #9c3226;
  /* "Finished" is brass here, not green. A web-convention green was the
     one off-key hue against madder, marigold, cream and felt. */
  --ok:          #d8b862;

  /* Foundation paper (the board) */
  --paper-block: #efe7d2;
  --paper-patch: #f4eedd;

  /* Remap shared-sheet tokens used by leftover rules */
  --ink: var(--cream);
  --ink-soft: var(--cream-soft);
  --ink-faint: var(--cream-faint);
  --line: #4d4335;
  --accent: var(--thread);
  --green: var(--ok);
  --gold: var(--brass);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(220,176,105,0.13), transparent 65%),
    var(--felt-page);
  color: var(--cream);
  font-family: 'Spectral', Georgia, serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
body {
  padding: 1.4rem 1rem 2.5rem;
  background-image:
    radial-gradient(1100px 520px at 50% -80px, rgba(220,176,105,0.13), transparent 65%),
    repeating-linear-gradient(  0deg, transparent 0 2px, rgba(0,0,0,0.05) 2px 3px),
    repeating-linear-gradient( 90deg, transparent 0 2px, rgba(255,244,214,0.016) 2px 3px);
  background-color: var(--felt-page);
}

::selection { background: var(--brass); color: var(--felt-deep); }

.bolts {
  display: flex; gap: 0.55rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.25rem;
  min-height: 54px;
}
.bolt {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  font-family: inherit;
  border: 2px solid transparent;
  border-radius: 7px;
  padding: 3px 3px 0;
  background: transparent;
  transition: transform 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.38));
}
.bolt:nth-child(odd)  { transform: rotate(-1.1deg); }
.bolt:nth-child(even) { transform: rotate(0.9deg); }
.bolt:hover { transform: rotate(0) translateY(-2px); }
.bolt:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.bolt.sel {
  border-color: var(--thread);
  background: rgba(200,80,60,0.10);
  transform: rotate(0) translateY(-4px);
  filter: drop-shadow(0 7px 9px rgba(0,0,0,0.55));
}
/* Pulled off the shelf: a brass pin through the top corner. */
.bolt.sel::after {
  content: '';
  position: absolute; right: -4px; top: -4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ecd489, #c9a441 55%, #97782a);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.bolt.spent { cursor: default; filter: none; opacity: 0.72; }
.bolt.spent:hover { transform: rotate(0); }
/* The SVG carries only a viewBox, so its rendered width sets the size of
   everything inside it — including the count on the band. Phones are
   width-bound; desktop has room, and at 54px the numbers were far smaller
   than the tally chips they have to be read against. */
.bolt svg { display: block; width: 54px; height: auto; }
@media (min-width: 641px) { .bolt svg { width: 80px; } }
.bolt .fname {
  margin-top: 3px;
  font-size: 0.66rem; color: var(--cream-faint); white-space: nowrap;
  letter-spacing: 0.04em;
}
@media (min-width: 641px) { .bolt .fname { font-size: 0.74rem; } }
.bolt.sel .fname { color: var(--cream); }

.btn {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.38rem 0.9rem;
  background: var(--felt);
  border: 1.5px solid var(--felt-edge);
  border-radius: 7px;
  color: var(--cream);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.btn:hover { border-color: var(--cream-faint); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn.primary { background: var(--tag); color: var(--tag-ink); border-color: var(--tag); font-weight: 600; }
.btn.sm { font-size: 0.76rem; padding: 0.26rem 0.6rem; }

.gl { width: 15px; height: 15px; flex: none; vertical-align: -2px; margin-right: 0.34em; }
.gl path, .gl ellipse, .gl circle { fill: currentColor; }
.gl .ln { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gl .o  { fill: none; stroke: currentColor; stroke-width: 1.4; }