/* Clean Punch 21 — the card-reader table */

.reader {
  background: var(--card); border: 2px solid var(--ink);
  position: relative; z-index: 3;
}
.reader__bar {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-bottom: 2px solid var(--ink); background: var(--paper);
}
.meter { padding: 12px 18px; border-right: 1px dashed var(--perf); min-width: 118px; }
.meter span { display: block; font: 500 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.meter b { font: 700 1.5rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.meter--bet b { color: var(--signal); }
.reader__title {
  margin-left: auto; align-self: center; padding: 10px 18px;
  font: 700 .8rem/1.3 var(--mono); letter-spacing: .18em; text-align: right;
}
.reader__title small { display: block; font-weight: 500; letter-spacing: .1em; color: var(--ink-3); font-size: .66rem; }

.reader__table {
  background: repeating-linear-gradient(180deg, var(--bar) 0 36px, var(--card) 36px 72px);
  padding: 20px clamp(14px, 2.4vw, 28px);
}
.lane { min-height: 150px; }
.lane__label {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
  font: 700 .8rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.lane__label em { font-style: normal; font-weight: 500; color: var(--ink-3); letter-spacing: .06em; text-transform: none; }
.lane__label b {
  margin-left: auto; font-size: 1.25rem; letter-spacing: 0; min-width: 3.4ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
.lane__cards { display: flex; gap: 10px; min-height: 112px; perspective: 900px; }

/* the reader slot the cards feed out of */
.slot {
  height: 18px; margin: 14px 0; position: relative;
  border-top: 2px solid var(--ink); border-bottom: 1px dashed var(--perf);
}
.slot::after {
  content: "READ HEAD"; position: absolute; right: 0; top: 3px;
  font: 500 .6rem/1 var(--mono); letter-spacing: .24em; color: var(--ink-3);
}

/* ---------- punch-card playing card ---------- */
.pc {
  width: 80px; height: 112px; flex: none; position: relative;
  animation: pc-feed .36s cubic-bezier(.3,.8,.35,1) both;
  animation-delay: var(--d, 0ms);
}
.pc__in {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .46s cubic-bezier(.45,.1,.3,1);
}
.pc.is-down .pc__in { transform: rotateY(180deg); }
.pc__face, .pc__back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%, 0 13px);
}
.pc__face {
  background: #FFFEF8; border: 1.5px solid var(--ink);
  font-family: var(--mono); color: var(--ink);
}
.pc.is-red .pc__face { color: var(--signal-ink); }
.pc__idx { position: absolute; left: 9px; top: 20px; font: 700 1.02rem/1 var(--mono); text-align: center; }
.pc__idx i { display: block; font-style: normal; font-size: .9rem; margin-top: 2px; }
.pc__idx--b { left: auto; top: auto; right: 9px; bottom: 8px; transform: rotate(180deg); }
.pc__pip { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); font-size: 2.2rem; line-height: 1; }
/* thirteen punch positions along the top edge; exactly one is punched */
.pc__row {
  position: absolute; left: 16px; right: 6px; top: 6px; height: 7px;
  display: grid; grid-template-columns: repeat(13, 1fr); gap: 1px;
}
.pc__row s { display: block; height: 7px; border-left: 1px solid #D6DDD3; text-decoration: none; }
.pc__row s.on { background: var(--hole); border-radius: 1px; border-left: 0; }
.pc__back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle, var(--bar) 0 2.2px, transparent 2.7px) 0 0 / 10px 12px,
    var(--ink);
  border: 1.5px solid var(--ink);
}
.pc__back::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--signal);
}
@keyframes pc-feed {
  from { opacity: 0; transform: translateY(-34px) scaleY(.6); }
  to   { opacity: 1; transform: none; }
}

/* ---------- readout / callout ---------- */
.readout {
  margin: 0; padding: 14px clamp(14px, 2.4vw, 28px);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  font: 700 1rem/1.4 var(--mono); background: var(--paper);
  display: flex; gap: 12px; align-items: center; min-height: 58px;
}
.readout::before { content: ">"; color: var(--ink-3); }
.readout[data-tone="win"] { background: var(--ink); color: var(--paper); }
.readout[data-tone="win"]::before, .readout[data-tone="bj"]::before { color: var(--signal); }
.readout[data-tone="bj"] { background: var(--signal); color: var(--ink); }
.readout[data-tone="bj"]::before { color: var(--ink); }
.readout[data-tone="lose"] { background: var(--bar); }
.readout[data-tone="push"] { background: var(--paper); }
.readout.flash { animation: readout-in .5s ease-out; }
@keyframes readout-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- controls ---------- */
.reader__controls {
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center;
  padding: 18px clamp(14px, 2.4vw, 28px);
}
.chips, .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips__label { font: 500 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.chip {
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 700 .82rem/1 var(--mono); cursor: pointer; position: relative;
}
.chip::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--perf); }
.chip:hover:not(:disabled) { background: var(--bar); }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.chip.chip--clear { width: auto; border-radius: 0; padding: 0 12px; height: 44px; font-size: .74rem; letter-spacing: .08em; }
.chip--clear::after { display: none; }

.reader__foot {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  padding: 14px clamp(14px, 2.4vw, 28px) 18px; border-top: 1px dashed var(--perf);
  font: 500 .76rem/1.5 var(--mono); color: var(--ink-3);
}
.reader__foot .free { margin-right: auto; }
.warn {
  flex-basis: 100%; margin: 0; padding: 10px 12px; border-left: 4px solid var(--signal);
  background: #FFF1EA; color: var(--ink); font: 500 .84rem/1.45 var(--mono);
}
.warn[hidden] { display: none; }
.linkbtn {
  background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ink);
  font: 700 .76rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--signal-ink); }

.tape { list-style: none; margin: 0; padding: 0 clamp(14px, 2.4vw, 28px) 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.tape:empty { display: none; }
.tape li {
  font: 500 .7rem/1 var(--mono); padding: 6px 8px; border: 1px solid var(--perf); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.tape li.up { border-color: var(--ink); color: var(--ink); }
.tape li.bj { background: var(--signal); border-color: var(--signal); color: var(--ink); }

@media (max-width: 620px) {
  .meter { min-width: 0; flex: 1; padding: 10px 12px; }
  .meter b { font-size: 1.2rem; }
  .reader__title { order: -1; flex-basis: 100%; text-align: left; border-bottom: 1px dashed var(--perf); margin: 0; }
  .pc { width: 62px; height: 88px; }
  .pc + .pc { margin-left: -16px; }
  .lane__cards { gap: 0; min-height: 88px; }
  .lane { min-height: 122px; }
  .pc__pip { font-size: 1.7rem; }
  .pc__idx { font-size: .86rem; left: 7px; top: 18px; }
  .pc__idx--b { display: none; }
  .chip { width: 46px; height: 46px; }
  .acts { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .acts .key { padding-left: 4px; padding-right: 4px; font-size: .76rem; }
  .readout { font-size: .9rem; }
  .slot::after { display: none; }
}