/* Callclub — a felt table with one cut-paper club marker on it. Mid ground (felt), side rail for the CA, the object first. */
:root {
  --felt: #3D6150; --felt-lo: #33523F; --navy: #1C2A44; --navy-hi: #263856; --slate: #8A929E; --paper: #F3EDE0;
  --kraft: #D9C9A6; --ember: #FF4436; --ember-lo: #C92E22; --ink: #F3EDE0; --ink-dim: #C4D1C8; --dark: #14202F;
  --disp: 'Rammetto One', 'Arial Black', sans-serif; --body: 'Manrope', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--felt) radial-gradient(120% 80% at 30% 0%, #46705C 0%, var(--felt) 55%, var(--felt-lo) 100%) fixed; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 500 15px/1.5 var(--body);
  background: var(--felt);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
.cc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------- the rail: full CA, copy, gmgn (a ribbon on the right edge of a phone, a column on desktop) */
.cc-rail {
  position: fixed; z-index: 30; right: 6px; top: 50%; transform: translateY(-50%);
  width: 42px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--kraft); color: var(--dark); border-radius: 3px 0 0 3px;
  box-shadow: -2px 3px 0 rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08);
  clip-path: polygon(0 1%, 100% 0, 96% 25%, 100% 50%, 97% 75%, 100% 100%, 0 99%, 4% 70%, 0 40%, 3% 15%);
}
.cc-rail-k { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.cc-rail-ca {
  writing-mode: vertical-rl; font: 700 11px/1.15 var(--mono); letter-spacing: .02em; user-select: all; -webkit-user-select: all;
  word-break: break-all; color: var(--dark);
}
.cc-rail-ca.is-pending { font-family: var(--body); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.cc-rail-copy {
  writing-mode: vertical-rl; border: 0; background: var(--ember); color: #fff; padding: 9px 6px; border-radius: 2px;
  font: 800 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
}
.cc-rail-copy:disabled { background: rgba(20,32,47,.25); color: rgba(20,32,47,.7); }
.cc-rail-copy.is-done { background: var(--dark); }
.cc-rail-gm { writing-mode: vertical-rl; font: 700 9px/1 var(--mono); opacity: .7; text-decoration: underline; }

/* ---------------- the felt */
.cc-felt { padding: 14px 60px 36px 14px; display: grid; gap: 18px; }
.cc-table { display: grid; gap: 14px; min-width: 0; }

/* ---------------- the club marker: the one object */
.cc-marker { position: relative; padding-bottom: 4px; min-width: 0; }
.cc-marker::before {
  content: ""; position: absolute; inset: 0 0 22px 0; background: var(--navy); filter: url(#ccTorn);
  box-shadow: 0 10px 0 -4px rgba(0,0,0,.18); transform: rotate(-.6deg); border-radius: 2px;
}
.cc-ladder { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 600 / 225; max-height: 230px; margin: 0; }
.cc-ladder .cc-strip { fill: var(--slate); filter: url(#ccTorn); }
.cc-ladder .cc-strip.is-dark { fill: #59616C; }
.cc-ladder .cc-strip.is-top { fill: var(--ember); }
.cc-ladder .cc-strip.is-ghost { fill: none; stroke: var(--ember); stroke-width: 2.5; stroke-dasharray: 7 6; filter: none; animation: cc-blink 1.4s ease-in-out infinite; }
.cc-ladder .cc-strip.is-new { animation: cc-rise .7s cubic-bezier(.2,1.4,.4,1); transform-box: fill-box; transform-origin: bottom; }
.cc-ladder text { font: 700 24px var(--mono); fill: var(--paper); }
.cc-ladder text.is-dim { fill: rgba(243,237,224,.6); font-size: 21px; }
.cc-ladder text.is-hot { fill: #FF8A7F; }
.cc-ladder text.is-in { fill: #fff; font-size: 20px; }
.cc-ladder .cc-glow { fill: var(--ember); opacity: .32; filter: blur(14px); }
@keyframes cc-rise { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes cc-blink { 50% { opacity: .35; } }

.cc-plaque { position: relative; padding: 4px 16px 16px; }
.cc-plaque-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cc-brand { display: inline-flex; align-items: center; gap: 7px; font: 400 15px/1 var(--disp); letter-spacing: .01em; }
.cc-brand img { border-radius: 4px; }
.cc-clubno { font: 700 11px/1 var(--mono); color: var(--ink-dim); text-transform: uppercase; letter-spacing: .1em; }
.cc-seat {
  margin-left: auto; border: 1.5px solid rgba(243,237,224,.5); background: transparent; color: var(--ink);
  padding: 6px 11px; border-radius: 999px; font: 700 12px/1 var(--body);
}
.cc-seat.is-on { border-color: var(--ember); color: var(--paper); background: rgba(255,68,54,.14); }
.cc-call-k { margin: 6px 0 0; font: 700 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-dim); }
.cc-call { margin: 2px 0 0; font: 400 clamp(48px, 15vw, 92px)/1 var(--disp); color: var(--paper); display: flex; align-items: baseline; gap: 8px; }
.cc-call small { font: 700 15px/1 var(--mono); color: var(--ink-dim); }
.cc-marker[data-state="empty"] .cc-call span { color: var(--ember); text-shadow: 0 0 22px rgba(255,68,54,.55); }
.cc-call.is-bump span { animation: cc-bump .6s ease-out; }
@keyframes cc-bump { 0% { color: var(--ember); transform: translateY(-6px); } 100% { transform: none; } }
.cc-holder { margin: 8px 0 12px; font-weight: 700; font-size: 14px; color: var(--paper); overflow-wrap: anywhere; }
.cc-holder code { font: 700 13px var(--mono); }
.cc-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-chip { background: var(--navy-hi); border: 1px solid rgba(243,237,224,.12); padding: 8px 9px; border-radius: 3px; min-width: 0; }
.cc-chip span { display: block; font: 700 9.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
.cc-chip b { display: block; margin-top: 3px; font: 700 16px/1.1 var(--mono); color: var(--paper); overflow-wrap: anywhere; }
.cc-chip.is-beat { background: var(--ember); border-color: var(--ember); }
.cc-chip.is-beat span { color: rgba(255,255,255,.85); }
.cc-chip.is-late b { color: var(--ember); }

.cc-ticket {
  position: relative; margin: -6px 3% 0 12%; padding: 9px 13px 10px; background: var(--paper); color: var(--dark);
  transform: rotate(1.4deg); box-shadow: 0 4px 0 rgba(0,0,0,.2);
  clip-path: polygon(0 4%, 3% 0, 97% 2%, 100% 0, 99% 50%, 100% 96%, 96% 100%, 3% 98%, 0 100%, 1% 50%);
}
.cc-ticket-k { font: 700 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ember-lo); }
.cc-ticket p { margin: 3px 0 0; font-size: 13px; line-height: 1.35; font-weight: 600; }
.cc-ticket p em { font-style: normal; font-weight: 800; color: var(--ember-lo); }
.cc-ticket.is-new { animation: cc-slap .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes cc-slap { from { transform: rotate(8deg) translateY(-20px); opacity: 0; } to { transform: rotate(1.4deg); opacity: 1; } }

/* ---------------- the live sentence */
.cc-say { margin: 4px 2px 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--paper); }
.cc-say b { font-family: var(--mono); }
.cc-say em { font-style: normal; font-weight: 800; color: #FFD2CC; background: rgba(255,68,54,.28); padding: 0 4px; border-radius: 2px; }

/* ---------------- the call slip */
.cc-slip { background: var(--paper); color: var(--dark); padding: 14px 14px 16px; border-radius: 3px; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.cc-slip-k { display: block; font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #4F5B55; margin-bottom: 8px; }
.cc-dial { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 46px; align-items: center; gap: 8px; }
.cc-nudge { height: 46px; border: 0; border-radius: 3px; background: var(--navy); color: var(--paper); font: 700 22px/1 var(--body); }
.cc-dial input { width: 100%; min-width: 0; height: 46px; border: 2px solid var(--navy); border-radius: 3px; background: #fff; text-align: center; font: 700 20px var(--mono); color: var(--dark); }
.cc-dial-u { font: 700 12px var(--mono); }
.cc-bill { margin: 12px 0; display: grid; gap: 3px; }
.cc-bill div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px dotted rgba(20,32,47,.25); padding: 3px 0; }
.cc-bill dt { color: #4F5B55; }
.cc-bill dd { margin: 0; font: 700 13px var(--mono); text-align: right; overflow-wrap: anywhere; }
.cc-bill .is-sum { border-bottom: 0; font-weight: 800; }
.cc-bill .is-sum dd { font-size: 15px; }
.cc-go { width: 100%; min-height: 52px; border: 0; border-radius: 3px; background: var(--ember); color: #fff; font: 400 17px/1 var(--disp); letter-spacing: .01em; }
.cc-go:disabled { background: #B8B2A5; color: #F8F4EA; }
.cc-owed { margin: 10px 0 0; font-size: 13px; }
.cc-owed button { margin-left: 6px; border: 0; background: var(--navy); color: var(--paper); padding: 5px 10px; border-radius: 3px; font-weight: 700; }

/* ---------------- the tape: plays print as they land */
.cc-tape { background: #EDE5D2; color: var(--dark); border-radius: 2px; padding: 12px 14px 8px; min-width: 0; box-shadow: 0 6px 0 rgba(0,0,0,.16);
  background-image: repeating-linear-gradient(0deg, transparent 0 25px, rgba(20,32,47,.06) 25px 26px); }
.cc-tape-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px dashed rgba(20,32,47,.3); padding-bottom: 6px; }
.cc-tape-top b { font: 400 15px/1 var(--disp); }
.cc-tape-top span { font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #5C665F; }
.cc-tape-roll { list-style: none; margin: 0; padding: 0; font: 400 12.5px/1.45 var(--mono); }
.cc-tape-roll li { padding: 7px 0; border-bottom: 1px solid rgba(20,32,47,.1); overflow-wrap: anywhere; }
.cc-tape-roll li time { color: #6B746E; margin-right: 6px; }
.cc-tape-roll li b { font-weight: 700; }
.cc-tape-roll li.is-back { color: var(--ember-lo); }
.cc-tape-roll li.is-kept { background: rgba(255,68,54,.12); padding-left: 6px; }
.cc-tape-roll li.is-ghost { opacity: .55; border-style: dashed; }
.cc-tape-roll li.is-first { color: var(--ember-lo); font-weight: 700; }
.cc-tape-roll li.is-new { animation: cc-print .55s steps(6); }
.cc-tape-roll a { color: inherit; opacity: .6; }
@keyframes cc-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------------- rules */
.cc-rules { background: rgba(20,32,47,.32); border: 1px solid rgba(243,237,224,.14); border-radius: 3px; padding: 16px; }
.cc-rules h2 { margin: 0 0 10px; font: 400 20px/1.15 var(--disp); }
.cc-rules h3 { margin: 0 0 6px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #FFB4AB; }
.cc-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.cc-steps b { color: var(--paper); }
.cc-worked { margin: 14px 0 0; background: var(--navy); padding: 12px 14px; border-left: 4px solid var(--ember); }
.cc-worked p { margin: 4px 0; }
.cc-worked b { font-family: var(--mono); }
.cc-fine { margin: 12px 0 0; font-size: 13px; color: var(--ink-dim); }

/* ---------------- other routes */
.cc-alt { background: var(--paper); color: var(--dark); padding: 16px; border-radius: 3px; }
.cc-alt h2 { margin: 0 0 10px; font: 400 22px var(--disp); }
.cc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 13px/1.4 var(--mono); }
.cc-rows li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 0; border-bottom: 1px dotted rgba(20,32,47,.3); }
body.is-alt .cc-marker, body.is-alt .cc-say, body.is-alt .cc-slip { display: none; }
body.is-rules .cc-marker, body.is-rules .cc-say, body.is-rules .cc-slip { display: none; }

/* ---------------- footer */
.cc-foot { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-dim); padding-top: 8px; border-top: 1px solid rgba(243,237,224,.18); }
.cc-foot code { font: 400 11.5px var(--mono); color: var(--paper); overflow-wrap: anywhere; user-select: all; }
.cc-foot-links { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------------- sheets */
.cc-pick { position: fixed; inset: 0; z-index: 50; background: rgba(10,16,24,.6); display: grid; place-items: center; padding: 20px; }
.cc-pick-box { background: var(--paper); color: var(--dark); padding: 18px; border-radius: 4px; width: min(340px, 100%); display: grid; gap: 8px; }
.cc-pick-box p { margin: 0 0 4px; font: 400 17px var(--disp); }
.cc-pick-box button { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(20,32,47,.2); background: #fff; padding: 10px; border-radius: 3px; text-align: left; }
.cc-pick-box img { width: 22px; height: 22px; }
.cc-toast { position: fixed; z-index: 60; left: 14px; right: 60px; bottom: 16px; background: var(--dark); color: var(--paper); padding: 11px 14px; border-radius: 3px; font-weight: 700; font-size: 14px; border-left: 4px solid var(--ember); }

/* ---------------- 720+: wider measure, bigger object */
@media (min-width: 720px) {
  .cc-felt { padding: 26px 72px 40px 28px; gap: 22px; max-width: 900px; }
  .cc-plaque { padding: 6px 26px 22px; }
  .cc-call { font-size: 104px; }
  .cc-chip b { font-size: 20px; }
  .cc-chip span { font-size: 10.5px; }
  .cc-say { font-size: 19px; }
  .cc-ticket { margin-left: 34%; }
  .cc-ticket p { font-size: 14px; }
  .cc-rail { width: 48px; }
  .cc-rail-ca { font-size: 12.5px; }
}

/* ---------------- 1000+: the page recomposes — CA rail left, the club centre, the tape beside it */
@media (min-width: 1000px) {
  body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 28px 24px; }
  .cc-rail {
    position: sticky; top: 28px; right: auto; transform: none; align-self: start; width: auto;
    padding: 18px 16px; gap: 12px; align-items: stretch; border-radius: 3px;
    clip-path: polygon(0 1%, 4% 0, 100% 1%, 99% 40%, 100% 99%, 95% 100%, 0 99%, 1% 60%);
  }
  .cc-rail-k, .cc-rail-ca, .cc-rail-copy, .cc-rail-gm { writing-mode: horizontal-tb; transform: none; }
  .cc-rail-k { font-size: 10.5px; }
  .cc-rail-ca { font-size: 13.5px; line-height: 1.4; }
  .cc-rail-copy { padding: 12px; font-size: 13px; }
  .cc-rail-gm { font-size: 11px; }
  .cc-felt { padding: 0; max-width: none; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px 28px; align-items: start; }
  .cc-table { grid-column: 1; }
  .cc-tape { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow: auto; }
  .cc-rules { grid-column: 1; }
  .cc-foot { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-call { font-size: 128px; }
  body { background: transparent; }
  .cc-ladder { max-height: 190px; }
  .cc-slip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; align-items: start; }
  .cc-slip-k, .cc-dial { grid-column: 1; }
  .cc-bill { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .cc-go { grid-column: 1; margin-top: 10px; }
  .cc-owed { grid-column: 1 / -1; }
  .cc-toast { left: auto; right: 24px; width: 360px; }
}