/* Matchpit — a referee's rulebook page over a wireframe pit on green felt. Ground: slate-green. One accent: ice. */
:root{
  --felt:#336B57; --felt-d:#285E45; --felt-dd:#21503A; --wire:#A9D9C2; --wire-f:rgba(169,217,194,.30);
  --ink:#EAF4EE; --mute:#B9D5C6; --ice:#7FD6FF; --fold:#FFB08C;
  --disp:'Syncopate', 'Manrope', system-ui, sans-serif; --body:'Manrope', system-ui, sans-serif; --mono:'Azeret Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html{background:var(--felt);background-image:linear-gradient(var(--wire-f) 1px,transparent 1px),linear-gradient(90deg,var(--wire-f) 1px,transparent 1px);background-size:36px 36px;background-position:-1px -1px}
body{margin:0 auto;background:transparent;color:var(--ink);font:400 15px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 12px 24px;max-width:1180px}
a{color:var(--ice)}
code{font-family:var(--mono)}
[hidden]{display:none !important}
.rk-ln{display:inline-block;font:600 10.5px/1 var(--mono);color:var(--ice);border:1px solid currentColor;padding:3px 5px 2px;margin-right:4px;vertical-align:2px;text-transform:uppercase;letter-spacing:.04em}

/* ---- the rulebook page: the first thing on screen ---- */
.rk-sheet{margin:0;padding:14px 16px 16px;background:var(--felt-dd);border:1px solid var(--wire);border-left:4px double var(--wire);font-size:15px;line-height:1.55}
.rk-sheet-k{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 12px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.rk-sheet-k img{border:1px solid var(--wire)}
.rk-sheet-pg{margin-left:auto;font:400 10.5px var(--mono);letter-spacing:.02em;text-transform:none;color:var(--mute)}
.rk-sheet-lede{margin:0}
.rk-sheet-lede b{color:var(--ice);font-weight:700;white-space:nowrap}
.rk-say{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.rk-say strong{color:var(--ice)}
.rk-say em{font-style:normal;color:var(--fold);font-weight:700}

/* ---- the CA pill: the top of the page, and it stays there while you scroll ---- */
.rk-capill{position:sticky;top:10px;z-index:30;align-self:start;display:grid;grid-template-columns:1fr auto;grid-template-areas:"tag ctl" "addr ctl";
  gap:2px 10px;align-items:center;padding:9px 10px 9px 18px;background:rgba(33,80,58,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1.5px solid var(--ice);border-radius:999px;box-shadow:0 6px 22px rgba(10,30,22,.35)}
.rk-catag{grid-area:tag;font:700 10.5px/1.2 var(--disp);letter-spacing:.1em;color:var(--ice)}
.rk-caaddr{grid-area:addr;font-size:10.4px;letter-spacing:-.03em;color:var(--ink);word-break:break-all;user-select:all;line-height:1.3}
.rk-caaddr.rk-wait{color:var(--mute);user-select:text;word-break:normal}
.rk-cactl{grid-area:ctl;display:flex;flex-direction:column;align-items:center;gap:2px}
.rk-cacopy{min-width:62px;height:34px;border:0;border-radius:999px;background:var(--ice);color:var(--felt-dd);font:700 11px var(--disp);letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;padding:0 12px}
.rk-cacopy:disabled{opacity:.45;cursor:default}
.rk-cacopy.is-done{background:var(--ink)}
.rk-cagm{font:600 10px var(--mono);color:var(--mute);text-decoration:none}

/* ---- the table: the pit + the move ---- */
.rk-table{display:grid;gap:14px;min-width:0}
.rk-pit{min-width:0}
.rk-pit-head{display:flex;gap:12px;align-items:baseline;font:600 11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.rk-clock{margin-left:auto}
.rk-clock b{font:700 15px var(--mono);color:var(--ink)}
.rk-clock.is-hot b{color:var(--fold)}
.rk-oval{position:relative;width:100%;aspect-ratio:1/0.9;max-height:62vh;margin:0 auto}
.rk-wire{position:absolute;inset:0;opacity:.85}
.rk-wire i{position:absolute;display:block;border:1px solid var(--wire);border-radius:50%;transform:translate(-50%,-50%);left:50%;top:50%}
.rk-wire .w1{width:86%;height:84%;border:1.5px solid var(--ice)}
.rk-wire .w2{width:60%;height:58%}
.rk-wire .w3{width:34%;height:32%}
.rk-wire .wv{width:0;height:96%;border-radius:0;border-width:0 0 0 1px;border-style:dashed;opacity:.5}
.rk-wire .wh{width:96%;height:0;border-radius:0;border-width:1px 0 0 0;border-style:dashed;opacity:.5}
.rk-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;text-align:center;width:44%}
.rk-hub-k{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.rk-hub-v{font:700 20px/1.15 var(--disp);color:var(--ice);letter-spacing:.02em}
.rk-hub-s{font:400 10.5px/1.3 var(--mono);color:var(--mute)}
.rk-ring{position:absolute;inset:0}
.rk-chair{position:absolute;transform:translate(-50%,-50%);width:15.5%;aspect-ratio:1;border:1.5px dashed var(--wire);border-radius:50%;background:var(--felt-d);
  display:grid;place-content:center;justify-items:center;text-align:center;line-height:1.05;transition:background .3s,border-color .3s}
.rk-chair b{font:700 11px var(--disp);color:var(--mute)}
.rk-chair span{font:400 8.5px var(--mono);color:var(--mute);white-space:nowrap}
.rk-chair.c-met{border:2px solid var(--ice);background:#1E5A63}
.rk-chair.c-met b,.rk-chair.c-met span{color:var(--ink)}
.rk-chair.c-due{border:2px solid var(--fold);animation:rkBlink 1.1s steps(2) infinite}
.rk-chair.c-due b{color:var(--fold)}
.rk-chair.c-out{border:1.5px solid rgba(255,176,140,.55);background:transparent;opacity:.75;
  background-image:linear-gradient(45deg,transparent 47%,var(--fold) 47%,var(--fold) 53%,transparent 53%),linear-gradient(-45deg,transparent 47%,var(--fold) 47%,var(--fold) 53%,transparent 53%)}
.rk-chair.c-out span{color:var(--fold)}
.rk-chair.c-next{border:2px solid var(--ice);background:rgba(127,214,255,.18);box-shadow:0 0 0 4px rgba(127,214,255,.18);animation:rkPulse 1.6s ease-in-out infinite}
.rk-chair.c-next b,.rk-chair.c-next span{color:var(--ice)}
.rk-chair.c-me{outline:2px solid var(--ink);outline-offset:2px}
.rk-chair.c-flash{animation:rkFlash .9s ease-out 1}
@keyframes rkBlink{50%{background:rgba(255,176,140,.25)}}
@keyframes rkPulse{50%{box-shadow:0 0 0 9px rgba(127,214,255,0)}}
@keyframes rkFlash{0%{background:var(--ice)}100%{background:#1E5A63}}
.rk-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 10.5px var(--mono);color:var(--mute);margin-top:6px}
.rk-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.lg-met{background:var(--ice)}.lg-due{border:2px solid var(--fold)}.lg-out{background:var(--fold);opacity:.6}.lg-open{border:2px dashed var(--ice)}

.rk-move{background:var(--felt-dd);border:1px solid var(--wire);padding:14px 16px 16px;display:grid;gap:8px;align-content:start}
.rk-move-top{display:flex;justify-content:space-between;align-items:center}
.rk-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:700 12px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase}
.rk-brand img{border:1px solid var(--wire)}
.rk-move-k{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.rk-wallet{border:1px solid var(--wire);background:transparent;color:var(--ink);font:600 11px var(--mono);padding:6px 10px;cursor:pointer}
.rk-move-v{margin:0;font:400 15px var(--mono);color:var(--mute)}
.rk-move-v b{font:700 34px/1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.rk-match{height:54px;border:0;background:var(--ice);color:var(--felt-dd);font:700 15px var(--disp);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rk-match:disabled{background:transparent;border:1.5px dashed var(--wire);color:var(--mute);cursor:default}
.rk-fine{margin:0;font:400 11px/1.45 var(--mono);color:var(--mute)}
.rk-mine{font-size:13.5px;border-top:1px dashed var(--wire-f);padding-top:8px}
.rk-mine button,.rk-closer{border:1.5px solid var(--fold);background:transparent;color:var(--fold);font:700 11px var(--mono);padding:6px 10px;cursor:pointer;text-transform:uppercase}

/* ---- the side: tape, climb, book ---- */
.rk-side{display:grid;gap:14px;min-width:0;align-content:start}
.rk-box{background:rgba(33,80,58,.82);border:1px solid var(--wire-f);padding:12px 14px}
.rk-h{margin:0 0 8px;font:700 11px var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.rk-h span{font:400 10px var(--mono);letter-spacing:0;text-transform:none;color:var(--mute);margin-left:6px}
.rk-h2{margin-top:14px}
.rk-feed{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto;font:400 12px/1.45 var(--mono)}
.rk-feed li{display:grid;grid-template-columns:44px 1fr;gap:6px;padding:4px 0;border-bottom:1px dotted var(--wire-f)}
.rk-feed time{color:var(--mute)}
.rk-feed .t-fold span{color:var(--fold)}
.rk-feed .t-split span{color:var(--ice)}
.rk-feed .t-new{animation:rkPrint .7s steps(6) 1}
@keyframes rkPrint{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.rk-quiet span{color:var(--mute)}
.rk-rungs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.rk-rungs li{display:grid;justify-items:center;padding:4px 0;border:1px solid var(--wire-f);font:400 8.5px var(--mono);color:var(--mute)}
.rk-rungs b{font:700 11px var(--disp);color:var(--ink)}
.rk-rungs .g-past{opacity:.4}
.rk-rungs .g-now{border-color:var(--ice);background:rgba(127,214,255,.18);color:var(--ice)}
.rk-rules p{margin:0 0 8px;font-size:13.5px}
.rk-worked{width:100%;border-collapse:collapse;font:400 11px/1.35 var(--mono)}
.rk-worked th{text-align:left;font-weight:600;color:var(--mute);border-bottom:1px solid var(--wire);padding:4px 4px 4px 0}
.rk-worked td{padding:5px 4px 5px 0;border-bottom:1px dotted var(--wire-f);vertical-align:top}
.rk-worked .rk-end td{color:var(--ice);font-weight:600}
.rk-pastrow{display:flex;justify-content:space-between;gap:10px;font:400 12px var(--mono);padding:5px 0;border-bottom:1px dotted var(--wire-f)}

.rk-foot{font:400 11px/1.6 var(--mono);color:var(--mute);border-top:1px solid var(--wire-f);padding-top:10px}
.rk-foot p{margin:0 0 4px}
.rk-footaddr code{word-break:break-all}

.rk-pick{position:fixed;inset:0;z-index:50;background:rgba(10,30,22,.6);display:grid;place-items:center}
.rk-pickbox{background:var(--felt-dd);border:1px solid var(--wire);padding:16px;min-width:260px;display:grid;gap:8px}
.rk-pickbox p{margin:0;font:700 12px var(--disp);text-transform:uppercase;letter-spacing:.08em}
.rk-pickbox button{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--wire-f);background:transparent;color:var(--ink);padding:9px;font:600 13px var(--body);cursor:pointer}
.rk-pickbox img{width:20px;height:20px}
.rk-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--felt-dd);font:600 12px var(--mono);padding:9px 14px}

/* ---- tablet: wider measure, bigger pit ---- */
@media (min-width:640px){
  body{padding:20px 24px 28px;gap:18px}
  .rk-sheet{font-size:16px;padding:18px 22px}
  .rk-capill{justify-self:center;width:min(100%,600px)}
  .rk-caaddr{font-size:12.5px}
  .rk-oval{max-width:560px}
  .rk-chair span{font-size:10px}
  .rk-chair b{font-size:13px}
  .rk-hub-v{font-size:28px}
}

/* ---- desktop: the page recomposes — book + pill + table on the left, tape/climb/rules as a column on the right ---- */
@media (min-width:1000px){
  body{grid-template-columns:minmax(0,1fr) 370px;grid-template-rows:auto auto auto 1fr auto;column-gap:26px;padding:28px 28px 32px}
  .rk-sheet{grid-column:1;grid-row:3;font-size:16px;padding:20px 26px}
  .rk-capill{grid-column:1;grid-row:1;justify-self:stretch;width:auto}
  .rk-caaddr{font-size:13.5px}
  .rk-table{grid-column:1;grid-row:2;grid-template-columns:minmax(270px,1fr) minmax(0,1.35fr);align-items:start;gap:22px}
  .rk-oval{max-width:none;max-height:none}
  .rk-side{grid-column:2;grid-row:1 / span 4}
  .rk-foot{grid-column:1 / -1;grid-row:5}
  .rk-move-v b{font-size:52px}
  .rk-hub-v{font-size:32px}
  .rk-feed{max-height:380px}
}
@media (min-width:1300px){
  .rk-chair span{font-size:11px}
}