/* The hand check (10 Nov 2026; templates/handcheck.html, static/handcheck.js). The site's own paper and felt: the rack
   is a strip of felt, the tiles to choose from sit on paper beside the Coach. Every size here is the page's own, so
   nothing borrowed from another screen can change it. */
.hc { --hc-w: 46px; --hc-h: 64px; --hc-felt: #35693f; --hc-felt-2: #244a2d; --hc-line: #d9cfb8; --hc-card: #fffdf8;
  --tile-face: #fdfbf5; --tile-edge: #d9d2c2; --tile-ink: #232019; --tile-muted-ink: #6f6656; --tile-shadow: rgba(60, 45, 25, 0.28);
  --pip-bam: #1a7a44; --pip-bam-alt: #15603a; --pip-crak: #b02a2f; --pip-dot: #1e5391; --pip-wind: #6b5636;
  --pip-flower: #2f8a52; --pip-flower-heart: #c8892a; --pip-joker: #7a3d8f;
  max-width: 72rem; margin: 0 auto; padding: 0 16px 3rem; }
.hc *, .hc *::before, .hc *::after { box-sizing: border-box; }
.hc-head h1 { margin: .6rem 0 .3rem; }
.hc-head .lead { margin: 0 0 .9rem; max-width: 60ch; color: var(--ink-soft, #5c5445); }
/* small headings in the reading face: the display face is for the page's one large heading */
.hc h2, .hc h3 { font-family: var(--font, inherit); font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: 0; }
.hc-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.hc-rackbox { padding: .8rem .9rem .9rem; border-radius: 18px; color: #fff;
  background: linear-gradient(160deg, var(--hc-felt), var(--hc-felt-2)); }
.hc-rackhead { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.hc-rackhead h2 { color: #fff; }
.hc-count { margin: 0; font-weight: 700; font-size: 1.05rem; color: #fff; }
.hc-card { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #fff; }
.hc-card select { min-height: 44px; max-width: min(24rem, 70vw); font: inherit; font-weight: 400; padding: .3rem .5rem; border-radius: 8px;
  border: 1px solid #1b3a23; background: #fffdf8; color: #232019; }
.hc-rack { display: flex; flex-wrap: wrap; gap: 5px; padding: .5rem; border-radius: 12px; min-height: calc(var(--hc-h) + 1rem);
  background: rgba(0, 0, 0, .18); outline: 3px solid transparent; }
.hc-rack.over { outline-color: #ffe3a8; }
.hc-slot { width: var(--hc-w); height: var(--hc-h); border-radius: 6px; padding: 0; border: 0; background: none; flex: none; }
.hc-slot.empty { border: 2px dashed rgba(255, 255, 255, .38); }
.hc-slot.filled { cursor: pointer; }
.hc-slot.filled:hover .hc-tile { transform: translateY(-3px); }
.hc-slot.unsure .hc-tile { box-shadow: 0 0 0 3px #ffe3a8, 0 3px 6px rgba(30, 24, 12, .25); }
.hc-racktools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.hc .button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.hc-racktools .button.secondary { background: #fffdf8; color: #232019; border-color: #fffdf8; }
.hc-racktools .button[disabled] { opacity: .55; }

.hc-tile { width: var(--hc-w); height: var(--hc-h); border-radius: 6px; position: relative; overflow: hidden; display: block; flex: none;
  user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 16%),
    linear-gradient(0deg, rgba(88,66,36,.30), rgba(88,66,36,0) 11%),
    radial-gradient(130% 95% at 50% 18%, #fffdf7 0%, var(--tile-face) 55%, var(--tile-edge) 135%);
  box-shadow: 0 2px 0 var(--tile-shadow), 0 3px 6px rgba(30,24,12,.25); }
.hc-tile .face { width: 100%; height: 100%; display: block; pointer-events: none; }
.hc-tile.need { opacity: .38; box-shadow: none; outline: 2px dashed #7b6f58; outline-offset: -2px; }

.hc-work { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 1rem; }
.hc-tray, .hc-coach { background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 14px; padding: .8rem .9rem .9rem; }
.hc-hint { margin: .2rem 0 .6rem; color: var(--ink-soft, #5c5445); max-width: 34rem; }
.hc-tiles { display: grid; gap: 6px; }
.hc-row { display: grid; grid-template-columns: repeat(9, var(--hc-w)); gap: 5px; }
.hc-pick { position: relative; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; width: var(--hc-w); height: var(--hc-h); }
.hc-pick:hover:not([disabled]) .hc-tile { transform: translateY(-3px); }
.hc-pick[disabled] { cursor: default; }
.hc-pick.gone .hc-tile { opacity: .3; }
.hc-left { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: #2b2418; color: #fff;
  font-size: 13px; line-height: 20px; text-align: center; font-weight: 700; }
.hc-pick.gone .hc-left { background: #7b6f58; }
.hc-pick:focus-visible, .hc-slot:focus-visible, .hc-card select:focus-visible { outline: 3px solid #9c6418; outline-offset: 2px; }
.hc-rackbox .hc-slot:focus-visible { outline-color: #ffe3a8; }
.hc-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) scale(1.1); opacity: .92;
  width: 46px; height: 64px; --pip-bam: #1a7a44; --pip-crak: #b02a2f; --pip-dot: #1e5391; --pip-wind: #6b5636; --pip-flower: #2f8a52;
  --pip-flower-heart: #c8892a; --pip-joker: #7a3d8f; --tile-ink: #232019; --tile-face: #fdfbf5; --tile-edge: #e8dcc0; --tile-shadow: #c9b58e; }
body.hc-dragging, body.hc-dragging * { cursor: grabbing !important; user-select: none; }

.hc-ask { display: flex; align-items: center; gap: .9rem; }
.hc-ask img { width: 72px; height: auto; flex: none; }
.hc-go { font-size: 1.1rem; padding: .6rem 1.4rem; }
.hc-go[disabled] { opacity: .5; }
.hc-answer { margin-top: .8rem; padding: .8rem .9rem; border-radius: 12px; border: 2px solid var(--hc-line); background: #fff; min-height: 5rem; }
.hc-answer.yes { border-color: var(--hc-felt); background: #eef6ee; }
.hc-answer.no { border-color: #9c6418; }
.hc-wait { margin: 0; color: var(--ink-soft, #5c5445); }
.hc-said { margin: 0 0 .7rem; font-size: 1.15rem; line-height: 1.55; color: #232019; }
.hc-key { margin: .4rem 0 0; color: var(--ink-soft, #5c5445); font-size: 1rem; }
.hc-answer h3 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.hc-hand { display: flex; flex-wrap: wrap; gap: 6px 12px; --hc-w: 34px; --hc-h: 47px; }
.hc-hand.small { --hc-w: 26px; --hc-h: 36px; gap: 4px 9px; }
.hc-group { display: inline-flex; gap: 3px; }
.hc-other { margin-top: .6rem; }
.hc-other p { margin: 0 0 .25rem; }

.hc-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .8rem; margin: 1.6rem 0; }
.hc-way { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: 14px; background: var(--hc-card);
  border: 1px solid var(--hc-line); color: #232019; text-decoration: none; box-shadow: 0 1px 2px rgba(40, 30, 15, .08); }
.hc-way strong { color: var(--hc-felt-2); font-size: 1.1rem; }
.hc-way span { color: var(--ink-soft, #5c5445); }
.hc-way:hover { border-color: var(--hc-felt); }
.hc-way:focus-visible { outline: 3px solid #9c6418; outline-offset: 2px; }

@media (max-width: 900px) {
  .hc-work { grid-template-columns: minmax(0, 1fr); }      /* in the order she works: her tiles, the tiles, then the Coach */
}
@media (max-width: 700px) {
  .hc { --hc-w: calc((100vw - 32px - 1.8rem - 40px - 2px) / 9); --hc-h: calc(var(--hc-w) * 1.39); }
  .hc-card { margin-left: 0; width: 100%; }
  .hc-card select { flex: 1; min-width: 0; }
  .hc-rack { gap: 4px; }
  .hc-rack .hc-slot { width: calc((100% - 24px) / 7); height: auto; aspect-ratio: 46 / 64; }
  .hc-rack .hc-tile { width: 100%; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hc-slot.filled:hover .hc-tile, .hc-pick:hover:not([disabled]) .hc-tile { transform: none; } }