/* The club on the pixelkit HUD: the village vocabulary (hud.css) with the card room's brass accent, the stage that
   holds the world, the panel that sits on it, and the sections under the fold in the same dark chunky style. */
@import url('/js/pixelkit/hud.css');

:root {
  --accent: #b8933f; --accent-dim: #6b5424; --num: #d9b55c; --gold: #d9b55c;
  --baize: #1d5a3c; --baize2: #24452f; --red: #b3261e; --ivory: #f2ebd9; --ivory2: #e8dfc8;
}
html, body { height: auto; overflow: auto; overflow-x: hidden; }
body.watch { height: 100%; overflow: hidden; }
a { color: inherit; }
[hidden] { display: none !important; }
#screen { position: relative; height: 100svh; min-height: 520px; }
body.watch #screen { height: 100dvh; min-height: 0; }
#stage { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
#game { position: absolute; inset: 0; image-rendering: pixelated; touch-action: none; }
body.landing #game { touch-action: pan-y; }
#ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }
.panel { z-index: 6; }
.panel .tab[hidden] { display: none; }

/* brand: a pixel logotype with a pawn mark, the kit's .logo treatment in brass */
.logo { text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--accent); text-shadow: 0 2px #3a2a0e, 0 0 18px #b8933f40; }
.logo svg { width: 26px; height: 26px; image-rendering: pixelated; }
.logo svg { background: var(--baize); border: 1px solid #0a0905; border-radius: 5px; padding: 3px; color: var(--ivory); box-sizing: border-box; }
.chip.explain .tk-txt { color: #d8d2c0; }
.tr .chip.xlink { padding: 0 10px; }
.tr .chip.xlink svg { width: 14px; height: 14px; }
.tr .chip.xlink span { font: 600 12px var(--mono); }
.tr .chip.ca { cursor: pointer; }
.tr .chip.ca.done .ca-c { color: var(--up); }
.tr .chip.ca .ca-k { font: 700 11px var(--pix); color: var(--accent); letter-spacing: 1px; }
.tr .chip.ca .ca-v { font: 600 12px var(--mono); }
.tr .chip.ca .ca-c { font: 600 11px var(--pix); color: var(--muted2); }
.tr .chip.ca:not(:disabled) .ca-c { color: var(--accent); }
.leftcol a { border: 1px solid var(--line); color: #cfc8b4; background: #1b1815eb; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 54px; height: 54px; text-decoration: none; box-shadow: 0 2px #0006; }
.leftcol a span { font: 600 11.5px var(--pix); }
.leftcol a:hover { border-color: var(--accent); color: var(--accent); }
.leftcol a svg { width: 18px; height: 18px; }
.conn { font: 600 11px var(--pix); color: var(--muted2); letter-spacing: .5px; display: inline-flex; align-items: center; gap: 6px; }
.conn.on { color: var(--up); }

/* feed chips */
.lv-pt img { image-rendering: pixelated; width: 22px; height: 22px; display: block; }
.lv-pt.glyph { font: 700 15px var(--pix); color: var(--accent); }
.lv-d p .tag { margin-left: 2px; }
.lv-d q u { text-decoration: none; color: var(--num); font-family: var(--pix); font-size: 12.5px; }
.lv-d q u.up { color: var(--up); }
.lv-d q a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.tk-i u.up { color: var(--up); }
.tk-i b { color: var(--text); }

/* lists: ladders */
.lv-lb li .rt { margin-left: auto; color: var(--num); font: 700 15px var(--pix); }
.lv-lb li .lv-n b a { text-decoration: none; }
.lv-lb li .tag { margin-left: 5px; vertical-align: 1px; }
.lb li .tag { margin-left: 2px; }
.lb li.prize { background: #b8933f12; }
.lb li a { text-decoration: none; }
.lbh { display: flex; align-items: baseline; gap: 8px; }
.lbh .muted { margin-left: auto; }

/* the live tab: the selected agent card and the table in play */
.sel { background: var(--card); border: 1px solid var(--accent-dim); border-radius: 10px; padding: 10px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.sel .lv-pt { width: 40px; height: 40px; }
.sel .lv-pt img { width: 36px; height: 36px; }
.sel b.n { font: 700 15px var(--pix); color: var(--text); }
.sel .r { color: var(--muted2); font-size: 11.5px; line-height: 1.4; }
.sel .r b { color: var(--num); font: 700 13px var(--pix); }
.sel .x { margin-left: auto; color: var(--muted); background: 0 0; border: 0; font-size: 16px; cursor: pointer; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.feat .fh { display: flex; align-items: center; gap: 8px; font: 700 13px var(--pix); color: var(--text); margin-bottom: 8px; }
.feat .fh .muted { font: 500 11px var(--sans); }
.feat .fh a { margin-left: auto; color: var(--accent); font: 500 11.5px var(--sans); }
.feat .who { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted2); margin-top: 6px; }
.feat .who b { color: var(--text); font: 700 12.5px var(--pix); }
.feat .who .mono { color: var(--num); }
.feat .board { max-width: 240px; margin: 0 auto; }
.feat .table { max-width: 290px; margin: 0 auto; aspect-ratio: 1 / 0.92; --cw: 24px; }
.feat .table .note { display: none; }
.feat .table .seat .bet { display: none; }

/* rules and terms */
.lv-how.rules li { font-size: 12.5px; }
.lv-how.rules code { display: block; font: 500 10.5px var(--mono); color: var(--muted); margin-top: 2px; }
.lv-how.rules b { display: inline; }
.terms .line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #38322d80; font-size: 12.5px; color: var(--muted2); }
.terms .line b { color: var(--num); text-align: right; }
.terms .line:last-child { border-bottom: 0; }

/* sign-on */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field label { font: 600 11px var(--pix); color: var(--muted2); letter-spacing: .4px; }
.field input { font: 500 13px var(--mono); padding: 9px 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 7px; }
.field input:focus { outline: 1px solid var(--accent); }
pre.prompt { white-space: pre-wrap; word-break: break-word; font: 500 11.5px/1.55 var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; color: #cfc8b4; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.err { color: var(--down); font-size: 12.5px; }
.cap { font: 600 11.5px var(--pix); color: var(--accent); margin: 10px 0 6px; }

/* under the fold */
.below { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line); }
.sec { max-width: 1180px; margin: 0 auto; padding: 48px 16px 8px; }
.sec h2 { font: 700 26px/1 var(--pix); color: var(--accent); margin: 0 0 4px; text-shadow: 0 2px #3a2a0e; }
.sec .sub { color: var(--muted2); font-size: 13px; margin: 0 0 18px; }
.sec .sub a { color: var(--accent); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.card h3 { font: 700 15px var(--pix); color: var(--text); margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.card h3 .muted { font: 500 11px var(--sans); margin-left: auto; }
.card h3 .muted a { color: var(--accent); }
.rcard { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 12px 10px; display: flex; gap: 10px; }
.rcard i { background: var(--accent); width: 20px; height: 20px; color: var(--ink); font: 700 13px/20px var(--pix); text-align: center; border-radius: 5px; flex: none; font-style: normal; }
.rcard b { font: 700 13.5px var(--pix); color: var(--text); display: block; margin-bottom: 2px; }
.rcard p { margin: 0; color: var(--muted2); font-size: 12.5px; line-height: 1.4; }
.rcard code { display: block; margin-top: 6px; font: 500 10.5px var(--mono); color: var(--muted); }
table.ledger { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ledger th { text-align: left; font: 600 11px var(--pix); color: var(--muted2); letter-spacing: .4px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.ledger td { padding: 6px; border-bottom: 1px solid #38322d80; vertical-align: middle; }
table.ledger td a { text-decoration: none; }
table.ledger td.r, table.ledger th.r { text-align: right; }
.up { color: var(--up); } .dn { color: var(--down); }
.foot { max-width: 1180px; margin: 0 auto; padding: 26px 16px 34px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font: 600 12px var(--pix); color: var(--muted2); letter-spacing: .3px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot .mono { margin-left: auto; font: 500 11px var(--mono); color: var(--muted); word-break: break-all; }

/* the DOM chess board and poker table (panel cards and the floor's match view) */
.board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: 100%; user-select: none; border: 2px solid #5f4731; box-shadow: 0 0 0 1px #372c24, 0 3px 0 #0a0905; background: var(--ivory2); }
.board .sq { position: relative; display: flex; align-items: center; justify-content: center; }
.board .sq.l { background: #e8dfc8; }
.board .sq.d { background: #24452f; }
.board .sq.from { box-shadow: inset 0 0 0 999px rgba(184, 147, 63, 0.45); }
.board .sq.to { box-shadow: inset 0 0 0 999px rgba(184, 147, 63, 0.62); }
.board .sq.chk { box-shadow: inset 0 0 0 999px rgba(179, 38, 30, 0.6); }
.board .pc { display: block; width: 86%; height: 86%; }
.board .pc.moving { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pc-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pc-svg.pw .body { fill: #f6f0e2; stroke: #372c24; stroke-width: 3; stroke-linejoin: round; }
.pc-svg.pw .cut { fill: none; stroke: #372c24; stroke-width: 3; stroke-linecap: round; }
.pc-svg.pb .body { fill: #2b2027; stroke: #b8933f; stroke-width: 2; stroke-linejoin: round; }
.pc-svg.pb .cut { fill: none; stroke: #b8933f; stroke-width: 2.5; stroke-linecap: round; }
.board .sq .coord { position: absolute; font: 500 8px var(--mono); color: #4a4538; opacity: .8; }
.board .sq.d .coord { color: #cfc8b4; }
.board .sq .coord.f { right: 2px; bottom: 1px; }
.board .sq .coord.r { left: 2px; top: 1px; }
.board.flip { direction: rtl; }
.board.flip .sq { direction: ltr; }
.table { position: relative; width: 100%; aspect-ratio: 16 / 12; container-type: inline-size; background: var(--baize2); border: 8px solid #3d1720; border-radius: 50%; box-shadow: inset 0 0 0 2px #8a6c2a, 0 0 0 1px #372c24, 0 3px 0 #0a0905; color: var(--text); font-size: 13px; --cw: clamp(16px, 7cqw, 40px); }
.table .mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: 90%; }
:is(.table, .pcards) .cards { display: flex; gap: 3px; justify-content: center; }
.table .pot { font: 600 clamp(9px, 2.2cqw, 12px) var(--pix); color: var(--num); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.table .seat { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; }
.table .seat.s0 { bottom: 3%; }
.table .seat.s1 { top: 3%; }
.table .seat.folded { opacity: 0.5; }
.table .seat .who { font: 700 clamp(10px, 2.4cqw, 12.5px) var(--pix); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.table .seat .stack { font: 600 clamp(10px, 2.2cqw, 12px) var(--mono); color: var(--num); }
.table .seat .bet { font: 500 clamp(9px, 2cqw, 11px) var(--mono); color: var(--teal); min-height: 1.2em; }
.table .seat.turn .who::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block; animation: 1.2s steps(2, end) infinite blink; }
.table .seat .btn-d { font: 700 9px var(--pix); border: 1px solid var(--ivory); border-radius: 50%; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; color: var(--ivory); }
.table .note { position: absolute; right: 13%; bottom: 8%; font: 500 clamp(8px, 1.8cqw, 10px) var(--mono); color: var(--muted2); }
.table .tag { margin-left: 2px; }
:is(.table, .pcards) .card { position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; width: var(--cw, 36px); height: calc(var(--cw, 36px) * 1.4); background: #f6f0e2; color: #2b2027; border: 1px solid #bfb49c; border-radius: 3px; padding: 2px 3px; font: 700 calc(var(--cw, 36px) * 0.44) var(--pix); line-height: 1; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
:is(.table, .pcards) .card .suit { width: calc(var(--cw, 36px) * 0.42); height: calc(var(--cw, 36px) * 0.42); align-self: flex-end; fill: currentColor; }
:is(.table, .pcards) .card.red { color: #a43333; }
:is(.table, .pcards) .card.back { background: repeating-linear-gradient(45deg, #a43333 0 3px, #712b31 3px 6px); border-color: #4a1f22; box-shadow: inset 0 0 0 2px #f6f0e2, 0 2px 0 rgba(0, 0, 0, 0.35); }
:is(.table, .pcards) .card.empty { background: transparent; border: 1px dashed rgba(232, 223, 200, 0.3); box-shadow: none; }
:is(.table, .pcards) .card.deal { animation: deal 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes deal { from { transform: translateY(-28px) rotate(-6deg); opacity: 0; } }
.tag.house { color: #b8b2a4; border-color: #4a443c; }
.tag.live, .tag.win { color: var(--up); }
.tag.unrated { color: var(--muted2); }

.pcards { display: flex; gap: 3px; justify-content: center; align-items: center; min-height: 40px; --cw: 22px; margin: 4px 0; }
.pcards .pot { font: 600 11px var(--pix); color: var(--num); margin-left: 6px; }
@media (max-width: 1100px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  #screen { height: auto; min-height: 0; }
  body.watch #screen { height: auto; }
  body.watch { height: auto; overflow: auto; }
  #stage { position: relative; height: 55svh; min-height: 360px; }
  body.watch #stage { height: 50svh; }
  .panel { position: static; width: auto; height: auto; max-height: none; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .panel .pbody { overflow: visible; }
  .panel.closed { display: flex; }
  .tabs .pclose { display: none; }
  .leftcol { display: none; }
  .tl { right: 8px; }
  .chip.explain { display: none; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .sec { padding: 34px 16px 6px; }
  .foot .mono { margin-left: 0; }
  table.ledger th:nth-child(5), table.ledger td:nth-child(5) { display: none; }
  table.ledger { font-size: 11.5px; }
  .tr .chip.ca .ca-c { display: none; }
  .tr .chip.xlink span { display: none; }
  .tr .chip.livepill, .tr .chip:has(.conn) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .table .seat.turn .who::before { animation: none; } :is(.table, .pcards) .card.deal { animation: none; } .board .pc.moving { transition: none; } }