/* Gin (member request, henry: "Add gin from FAM chat", ported from the Fam room). public/gin.js. The table is the
   letterboard's red felt; the cards are real paper cards (they stay white in dark mode), and their backs are little
   letterboards with a white B. Picks and the melds they'd fit on glow pale pink (no blue, no yellow). */
.gin, .gin-invite, .gin-turn {
  --card: #ffffff;
  --card-ink: #0b1a2e;
  --card-red: #d3121c;
  --card-edge: #0b1a2e33;
  --gsel: #b3d1ff;       /* your picks, and melds they'd fit on */
  --back: #0c3d8e;
  --letter-2: #ffffffb8;
}

/* ---------- a card ---------- */
.gc { --cw: 54px; position: relative; flex: none; display: block; width: var(--cw); height: calc(var(--cw) * 1.4); padding: 0; border: 0; border-radius: calc(var(--cw) * .1); background: var(--card); color: var(--card-ink); box-shadow: 0 0 0 1px var(--card-edge), 0 2px 0 #0000004d; font-family: var(--font); letter-spacing: 0; text-transform: none; text-shadow: none; text-align: left; user-select: none; -webkit-user-select: none; }
.gc.red { color: var(--card-red); }
.gc-i { position: absolute; left: 0; top: calc(var(--cw) * .06); width: calc(var(--cw) * .42); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.gc-i b { font-weight: 700; font-size: calc(var(--cw) * .32); letter-spacing: -.04em; }
.gc-i i { font-style: normal; font-size: calc(var(--cw) * .28); margin-top: 1px; }
.gc-p { position: absolute; right: calc(var(--cw) * .1); bottom: calc(var(--cw) * .08); font-size: calc(var(--cw) * .56); line-height: 1; }
.gc-fig { font-weight: 700; font-size: calc(var(--cw) * .5); }
.gc.back { background: var(--back); box-shadow: inset 0 0 0 3px var(--back), inset 0 0 0 4.5px #ffffffb0, 0 2px 0 #0000004d; display: grid; place-items: center; }
.gc.back span { font: 600 calc(var(--cw) * .6)/1 var(--board); color: var(--letter); text-shadow: 0 1px 0 #0006; }
.gc.sm { --cw: 40px; }
.gc.xs { --cw: 32px; }
.gc.xs .gc-p { display: none; }


/* ---------- seat colours (ported from Fam): four far-apart hues, one per seat, so nobody at a table shares a colour ----------
   --c is bright for the red felt, --cd is deep for paper (cards, the score sheet, the chat card). No red or pink (that's the
   felt and your picks), no yellow, no blue. */
[data-seat="0"] { --c: #ffa24a; --cd: #c2410c; } /* orange */
[data-seat="1"] { --c: #5ee6c3; --cd: #0f7a5c; } /* mint */
[data-seat="2"] { --c: #dcb0ff; --cd: #7e22ce; } /* lilac */
[data-seat="3"] { --c: #c3ec5c; --cd: #4d7c0f; } /* lime */

/* ---------- header button: next to the plaza face ---------- */

/* ---------- the card in the chat: a mini letterboard with a hand fanned on it ---------- */
.gin-invite { margin: 16px 0 8px; }
.gi-who { font-size: 14px; color: var(--ink-2); margin: 0 0 5px 2px; }
.gi-card { display: block; width: min(100%, 330px); padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--paper); color: var(--ink); text-align: left; box-shadow: 0 0 0 1.5px var(--rule); }
.gi-card:disabled { opacity: .6; cursor: default; }
.gi-board { position: relative; display: block; padding: 14px 16px 13px; min-height: 76px; }
.gi-board .row1 { display: block; font-size: 30px; }
.gi-board .row2 { display: block; margin-top: 6px; padding-right: 96px; }
.gi-fan { position: absolute; right: 16px; top: 12px; width: 84px; height: 56px; }
.gi-fan .gc { --cw: 36px; position: absolute; left: 22px; top: 4px; transform-origin: 50% 110%; }
.gi-fan .gc:nth-child(1) { transform: rotate(-16deg) translateX(-14px); }
.gi-fan .gc:nth-child(3) { transform: rotate(16deg) translateX(14px); }
.gi-foot { display: flex; align-items: center; gap: 10px; padding: 11px 16px 12px; }
.gi-seats { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 15px; }
.gi-seat b { color: var(--cd); }
.gi-seat span { color: var(--ink-2); }
.gi-cta { flex: none; margin-left: auto; font-weight: 700; font-size: 15px; color: var(--red); }
.gi-card.turn .gi-cta { background: var(--red); color: var(--red-ink); padding: 6px 12px; border-radius: 10px; }
.gi-card:active { transform: translateY(1px); }

/* ---------- the overlay ---------- */
.gin { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h); z-index: 30; display: flex; flex-direction: column; background: var(--felt); color: var(--letter); opacity: 0; transition: opacity .18s; overscroll-behavior: contain; }
.gin.in { opacity: 1; }
.gin-top { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px 8px; }
.gin-title { flex: 1; min-width: 0; }
.gin-title .row2 { margin-top: 5px; }
.gin-back, .gin-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--letter); }
.gin-back { border: 0; background: none; }
.gin:not(.at-table) .gin-back { visibility: hidden; width: 8px; }
.gin-x { border: 2px solid var(--letter); background: none; }
.gin-back svg { width: 26px; height: 26px; } .gin-x svg { width: 20px; height: 20px; }
.gin-body { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 820px; margin: 0 auto; }
.gin :focus-visible { outline: 2px solid var(--letter); outline-offset: 2px; }
.gin .btn { background: var(--letter); color: var(--felt); }
.gin .btn.quiet { background: transparent; border-color: #ffffff80; color: var(--letter); }
.gin .btn:disabled { opacity: .35; }
.gin .wait { pointer-events: none; }

/* ---------- all tables ---------- */
.gin-home { flex: 1; overflow-y: auto; padding: 18px 16px calc(28px + var(--sab)); -webkit-overflow-scrolling: touch; }
.gh-new { display: flex; align-items: center; gap: 14px; }
.gh-new p { margin: 0; font-size: 15px; color: var(--letter-2); }
.gin-home h3 { margin: 26px 0 8px; font-size: 16px; }
.gh-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ffffff22; }
.gh-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ffffff22; }
.gh-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border: 0; background: none; text-align: left; color: inherit; }
.gh-names { display: flex; flex-wrap: wrap; gap: 0 12px; font-weight: 700; }
.gh-names span { color: var(--c); }
.gh-names b { color: var(--letter); font-weight: 400; }
.gh-st { font-size: 14.5px; color: var(--letter-2); }
.gh-btn { flex: none; min-width: 72px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #ffffff66; background: none; color: var(--letter); font-weight: 700; font-size: 15px; }
.gh-btn.hot { background: var(--letter); border-color: var(--letter); color: var(--felt); }
.gh-row.turn .gh-st { color: var(--letter); font-weight: 700; }
.gh-empty { color: var(--letter-2); margin-top: 26px; }
.gh-rules { margin-top: 30px; border-top: 1px solid #ffffff22; padding-top: 14px; max-width: 64ch; }
.gh-rules summary { font-weight: 700; cursor: pointer; padding: 6px 0; }
.gh-rules p { color: var(--letter-2); font-size: 15.5px; margin: 10px 0; }
.gh-rules b { color: var(--letter); }

/* ---------- seats (before the first deal) ---------- */
.gin-seats { flex: 1; overflow-y: auto; padding: 24px 16px calc(24px + var(--sab)); display: flex; flex-direction: column; gap: 24px; }
.gs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gs-seat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px; border-radius: 12px; background: #ffffff0f; text-align: center; }
.gs-seat .mface { width: 64px; height: 64px; }
.gs-seat .mface img, .gs-seat .mface svg { width: 100%; height: 100%; display: block; }
.gs-seat b { color: var(--c, var(--letter)); }
.gs-seat:not(.empty) { box-shadow: inset 0 -4px 0 var(--c); }
.gs-seat span:not(.mface) { font-size: 13.5px; color: var(--letter-2); }
.gs-seat.empty { background: none; border: 1.5px dashed #ffffff40; }
.gs-seat.empty b { color: var(--letter-2); font-weight: 400; }
.gs-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gs-note { flex-basis: 100%; margin: 4px 0 0; font-size: 15px; color: var(--letter-2); }

/* ---------- at the table ---------- */
.g-chips { flex: none; display: flex; gap: 6px; padding: 10px 12px 4px; overflow-x: auto; scrollbar-width: none; }
.g-chip { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; border-radius: 12px; border: 1.5px solid transparent; }
.g-chip .mface { flex: none; width: 36px; height: 36px; }
.g-chip .mface img, .g-chip .mface svg { width: 100%; height: 100%; display: block; }
.g-chip-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.g-chip-t b { font-size: 14.5px; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-chip-t > span { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.g-count { font-style: normal; font-size: 12.5px; color: var(--letter-2); display: inline-flex; align-items: center; gap: 3px; }
.g-count::before { content: ""; width: 8px; height: 11px; border-radius: 2px; background: var(--back); box-shadow: 0 0 0 1px #ffffffb0; }
.g-chip { box-shadow: inset 0 -3px 0 var(--c); }
.g-chip.turn { border-color: var(--letter); background: #ffffff14; }
.g-last { flex: none; padding: 4px 16px 0; min-height: 1.4em; font-size: 14px; color: var(--letter-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.g-piles { flex: none; display: flex; align-items: flex-end; gap: 14px; padding: 10px 0 10px 14px; }
.g-stock { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 6px; }
.g-stock .gc { --cw: 48px; }
.g-stock .g-left { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: var(--felt); color: var(--letter); font-size: 12.5px; font-weight: 700; line-height: 16px; }
.g-stock:disabled { cursor: default; }
.g-stock.empty { width: 48px; height: 67px; border-radius: 5px; border: 1.5px dashed #ffffff40; display: grid; place-items: center; }
.g-piles.pickable .g-stock:not(:disabled) .gc { box-shadow: inset 0 0 0 3px var(--back), inset 0 0 0 4.5px #ffffffb0, 0 0 0 3px var(--gsel); }
.g-discard { flex: 1; min-width: 0; display: flex; align-items: flex-end; overflow-x: auto; padding: 10px 14px 4px 2px; scrollbar-width: none; min-height: 81px; }
.g-discard::-webkit-scrollbar, .g-chips::-webkit-scrollbar { display: none; }
.g-discard .gc { --cw: 48px; }
.g-discard .gc + .gc { margin-left: -26px; }
.g-discard .gc.picked { transform: translateY(-9px); box-shadow: 0 0 0 3px var(--gsel), 0 2px 0 #0000004d; }
.g-empty { font-size: 13px; color: var(--letter-2); align-self: center; }
.g-discard > .g-empty { height: 67px; display: grid; place-items: center; padding: 0 14px; border-radius: 5px; border: 1.5px dashed #ffffff40; }

.g-melds { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px 8px; border-top: 1px solid #ffffff1c; -webkit-overflow-scrolling: touch; }
.g-none { color: var(--letter-2); font-size: 14.5px; margin: 12px 0; }
.g-group { margin-top: 8px; }
.g-owner { font-size: 13.5px; font-weight: 700; color: var(--c); margin-bottom: 4px; }
.g-row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.g-meld { display: flex; padding: 4px; border: 1.5px solid transparent; border-radius: 8px; background: none; }
.g-meld .gc + .gc { margin-left: -19px; }
/* who scores each card on the table: a stripe in their seat colour */
.g-meld .gc::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 4px; border-radius: 2px; background: var(--cd); }
.g-meld.fits { border-color: var(--gsel); background: #b3d1ff2e; }

.g-bar { flex: none; padding: 8px 12px 6px; border-top: 1px solid #ffffff1c; }
.g-hint { font-size: 15px; line-height: 1.35; min-height: 2.7em; color: var(--letter); }
.g-acts { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 44px; }
.g-acts .sp { flex: 1; }
.g-acts .btn { padding: 10px 16px; }
.g-sort { border: 0; background: none; color: var(--letter-2); font-size: 14.5px; text-decoration: underline; padding: 8px 2px; }

.g-hand { flex: none; --hw: 54px; --step: 30px; display: flex; flex-wrap: wrap; justify-content: center; padding: 16px 10px calc(12px + var(--sab)); }
.g-hand { position: relative; }
.g-hand .gc { --cw: var(--hw); margin-left: calc(var(--step) - var(--hw)); transition: transform .14s cubic-bezier(.2, .8, .2, 1), translate .18s cubic-bezier(.2, .8, .2, 1); }
.g-hand.mine .gc { touch-action: none; -webkit-touch-callout: none; cursor: grab; }
.g-hand .gc.rowstart { margin-left: 0; }
.g-hand .gc.sel { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--gsel), 0 2px 0 #0000004d; z-index: 1; }
.g-hand .gc.fresh::before { content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gsel); }
.g-hand .gc.must { box-shadow: 0 0 0 2px var(--felt), 0 0 0 4px var(--gsel), 0 2px 0 #0000004d; }
.g-hand .gc.must.sel { box-shadow: 0 0 0 3px var(--gsel), 0 2px 0 #0000004d; }
.g-hand.watching { min-height: calc(12px + var(--sab)); padding: 0; }
/* dragging a card to arrange your hand (ported from Fam): it lifts and tilts; the rest slide aside */
.g-hand .gc.drag { z-index: 5; transform: scale(1.08) rotate(-3deg); transition: transform .14s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 10px 10px #00000066); cursor: grabbing; }
.g-hand .rowbreak { flex-basis: 100%; height: 6px; }

/* ---------- scores between hands ---------- */
.gin-scores { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px calc(20px + var(--sab)); display: flex; flex-direction: column; gap: 16px; }
.sc-sheet { background: var(--card); color: var(--card-ink); border-radius: 4px; padding: 14px 16px 10px; }
.sc-head { font-size: 21px; font-weight: 700; line-height: 1.2; }
.sc-sub { font-size: 14.5px; color: #4a5f7d; margin-top: 3px; }
.sc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.sc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #d2dcec; }
.sc-row .mface { flex: none; width: 40px; height: 40px; }
.sc-row .mface img, .sc-row .mface svg { width: 100%; height: 100%; display: block; }
.sc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-mid b { color: var(--cd); }
.sc-mid > span { font-size: 14px; color: #4a5f7d; }
.sc-left { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.sc-left .gc { box-shadow: 0 0 0 1px #0b1a2e4d; }
.sc-num { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.sc-hand { font-size: 14px; color: #4a5f7d; }
.sc-num b { font-size: 22px; }
.sc-row.won .sc-num b { color: var(--card-red); }
.sc-older { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid #d2dcec; font-size: 13.5px; color: #4a5f7d; }

@media (min-width: 600px) {
  .g-piles .gc { --cw: 56px; }
  .g-stock.empty, .g-discard > .g-empty { width: 56px; height: 78px; }
  .g-discard .gc + .gc { margin-left: -30px; }
  .gc.sm { --cw: 46px; }
  .g-meld .gc + .gc { margin-left: -22px; }
}
@media (prefers-reduced-motion: reduce) { .gin, .g-hand .gc, .g-hand .gc.drag { transition: none; } }

/* Wagers (member request, henry): the pot is a white tile on the felt, felt-red Barlow number and star. */
.gin-pot { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gin-pot .gs-note { margin: 0; max-width: 30em; }
.gp-row { display: flex; align-items: center; gap: 10px; }
.gp-tile { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 70px; height: 48px; padding: 0 12px; border-radius: 4px; background: #fff; color: var(--felt); }
.gp-tile b { font: 600 30px/1 var(--board); font-variant-numeric: tabular-nums; }
.gp-tile svg { width: 22px; height: 22px; fill: currentColor; }
.gp-step { width: 44px; height: 44px; padding: 0; border: 0; background: #ffffff1f; color: var(--letter); font: 700 24px/1 var(--font); display: grid; place-items: center; }
.gp-step:disabled { opacity: .35; }
.gin-scores > .gin-pot { margin: 4px 0 10px; }

/* ---------- "your turn" slip (ported from Fam): a mini letterboard that drops in and buzzes (gin.js slip) ---------- */
.gin-turn { position: fixed; z-index: 35; left: 50%; top: calc(10px + env(safe-area-inset-top)); width: min(calc(100% - 24px), 380px); padding: 0; border: 0; overflow: hidden; background: none; text-align: left; color: var(--letter); transform: translate(-50%, calc(-100% - 20px - env(safe-area-inset-top))); transition: transform .32s cubic-bezier(.2, .9, .3, 1.2); filter: drop-shadow(0 4px 10px #00000059); touch-action: none; visibility: hidden; }
.gin-turn.in { transform: translate(-50%, 0); visibility: visible; }
.gin-turn:not(.in) { transition: transform .22s ease-in, visibility 0s .22s; }
.gt-board { position: relative; display: block; padding: 12px 74px 12px 16px; min-height: 64px; }
.gt-board .row1 { display: block; font-size: 24px; }
.gt-board .row2 { display: block; margin-top: 5px; font-size: 14px; }
.gt-card { position: absolute; right: 18px; top: 50%; margin-top: -24px; transform: rotate(9deg); }
.gt-card .gc { --cw: 34px; }
.gin-turn.shake .gt-board { animation: gt-buzz .42s .3s linear 1; }
.gin-turn.shake .gt-card { animation: gt-tap .42s .3s ease-out 1; }
@keyframes gt-buzz { 0%, 100% { transform: none; } 10%, 30%, 60%, 80% { transform: translateX(-3px); } 20%, 40%, 70%, 90% { transform: translateX(3px); } 50% { transform: none; } }
@keyframes gt-tap { 0%, 100% { transform: rotate(9deg); } 25% { transform: rotate(-6deg) translateY(-3px); } 60% { transform: rotate(14deg); } }
.gin-turn:active .gt-board { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .gin-turn, .gin-turn:not(.in) { transition: none; } .gin-turn.shake .gt-board, .gin-turn.shake .gt-card { animation: none; } }
/* at the table the slip lands on the felt header, so it gets a white frame to lift off it */
.gin-turn.here .gt-board { box-shadow: inset 0 0 0 2px var(--letter); }