/* Gin Rummy: burgundy felt table, piles, a fanned hand grouped into melds, the knock reveal.
   Card look from /shared/cards/cards.css; page layout from cb-arcade.css. */
.gr-page {
  --cb-felt-1: #8e2439; --cb-felt-2: #4b0f1d;
  --cb-card-back-1: #b0293f; --cb-card-back-2: #6e1025;
  --gold: #f2c14e; --gold-2: #ffd97a;
}
.gr-page [hidden] { display: none !important; }

.gr-tabs { display: flex; gap: 6px; margin: 0 0 10px; background: var(--cbx-soft); padding: 4px; border-radius: 14px; }
.gr-tabs button { flex: 1; border: 0; background: transparent; padding: 10px 8px; border-radius: 11px; font: 900 15px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; }
.gr-tabs button[aria-selected="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 6px rgba(42, 29, 23, .12); }

.gr-card { padding: 10px; }
.gr-banner, .cbx-card .gr-banner { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #3a0d18; color: #fff; font: 800 14px/1.4 var(--cbx-body); }
.gr-banner b { color: var(--gold-2); }

/* ---- the table ---- */
.gr-table, .gr-reveal {
  position: relative; border-radius: 18px; padding: 10px 10px 8px; color: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), inset 0 18px 50px rgba(0, 0, 0, .3), 0 10px 26px rgba(75, 15, 29, .25);
}
.gr-table::before, .gr-reveal::before {   /* faint felt grain */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
.gr-table > *, .gr-reveal > * { position: relative; }

.gr-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-height: 30px; font: 900 14px var(--cbx-body); }
.gr-bar .sc, .gr-bar .dw, .gr-bar .ct, .gr-bar .turn, .gr-sort { flex: none; white-space: nowrap; }
.gr-bar .nm { min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-bar .sc { padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .28); color: var(--gold-2); font: 900 13px var(--cbx-body); }
.gr-bar .sc::after { content: ' pts'; font-weight: 800; opacity: .75; }
.gr-bar .ct { margin-left: auto; font: 800 12.5px var(--cbx-body); color: rgba(255, 255, 255, .7); }
.gr-bar .turn { margin-left: auto; font: 900 12px var(--cbx-body); color: #1a0a0e; background: var(--gold); padding: 2px 8px; border-radius: 999px; animation: gr-pulse 1.4s ease-in-out infinite; }
@keyframes gr-pulse { 50% { opacity: .55; } }

.gr-oppfan { --cw: 26px; display: flex; justify-content: center; min-height: 37px; margin: 2px 0 6px; }
.gr-oppfan > .cb-card + .cb-card { margin-left: -16px; }
.gr-oppfan .cb-card { box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, .3); }

.gr-mid { display: flex; justify-content: center; align-items: flex-start; gap: 28px; --cw: 62px; }
.gr-pilebox { display: grid; justify-items: center; gap: 4px; }
.gr-pile { position: relative; border: 0; padding: 0; background: none; cursor: pointer; width: calc(var(--cw) + 10px); height: calc(var(--cw) * 1.4); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.gr-pile:disabled { cursor: default; }
.gr-pile .cb-card { position: absolute; left: 5px; top: 0; }
.gr-pile .cb-card.under { transform: translate(-6px, 0) rotate(-6deg); filter: brightness(.88); }
.gr-pile .cb-card.down { box-shadow: inset 0 0 0 3px #fff, 3px 3px 0 #e9dfcf, 4px 4px 0 rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .3); }
.gr-pile .cb-card.down.hint, .gr-pile .cb-card.top.hint { animation: gr-glow 1.3s ease-in-out infinite; }
@keyframes gr-glow { 0%, 100% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--gold), 0 0 0 rgba(242, 193, 78, 0); } 50% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--gold), 0 0 18px 4px rgba(242, 193, 78, .65); } }
.gr-pile .cb-card.top.hint { animation-name: gr-glow-face; }
@keyframes gr-glow-face { 0%, 100% { box-shadow: 0 0 0 3px var(--gold), 0 2px 4px rgba(0, 0, 0, .2); } 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 5px rgba(242, 193, 78, .7); } }
.gr-pile .cb-slot { position: absolute; left: 5px; top: 0; }
.gr-count { position: absolute; right: -4px; bottom: -6px; z-index: 2; min-width: 22px; padding: 2px 5px; border-radius: 999px; background: #1a0a0e; color: #fff; font: 900 12px/1.2 var(--cbx-body); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.gr-cap { font: 900 11px var(--cbx-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

.cbx-card .gr-note, .gr-note { margin: 8px 0 0; min-height: 18px; text-align: center; font: 800 13px/1.35 var(--cbx-body); color: rgba(255, 255, 255, .78); }
.cbx-card .gr-status, .gr-status { margin: 2px 0 0; min-height: 22px; text-align: center; font: 900 15.5px/1.35 var(--cbx-body); color: #fff; }
.cbx-card .gr-status.good { color: var(--gold-2); }
.cbx-card .gr-status.bad { color: #ffb4b4; }

/* ---- my hand: melds underlined in gold, deadwood on the right ---- */
.gr-hand { display: flex; justify-content: center; align-items: flex-end; gap: var(--gap, 8px); padding: 18px 0 4px; min-height: calc(var(--cw, 50px) * 1.4 + 30px); touch-action: manipulation; }
.gr-grp { display: flex; position: relative; padding-bottom: 9px; }
.gr-grp > .cb-card + .cb-card { margin-left: calc(var(--cw, 50px) * var(--ov, .5) * -1); }
.gr-grp.meld::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 0; height: 3px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 8px rgba(242, 193, 78, .5); }
.gr-grp.dead::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 0; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 9px); }
.gr-hand .cb-card.sel { transform: translateY(-24%); box-shadow: 0 0 0 3px var(--gold), 0 8px 16px rgba(0, 0, 0, .4); z-index: 2; }
.gr-hand .cb-card.fresh::before { content: ''; position: absolute; top: -7px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.gr-hand .cb-card.dim { filter: brightness(.7) saturate(.6); }
.gr-hand.locked .cb-card { cursor: default; }
@media (hover: hover) { .gr-hand:not(.locked) .cb-card:not(.sel):not(.dim):hover { transform: translateY(-10%); } }

.gr-bar.me { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
.gr-bar .dw { font: 900 13px var(--cbx-body); padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.gr-bar .dw b { font-size: 14px; }
.gr-bar .dw.low { background: rgba(242, 193, 78, .22); color: var(--gold-2); }
.gr-sort { margin-left: auto; border: 0; background: rgba(0, 0, 0, .28); color: #fff; font: 900 12.5px var(--cbx-body); padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.gr-sort:hover { background: rgba(0, 0, 0, .4); }

/* ---- buttons under the table ---- */
.gr-play { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.gr-play:not(:has(> :not([hidden]))) { display: none; }
.gr-play .cbx-btn { min-height: 48px; padding: 10px 18px; }
.gr-play .cbx-btn small { font-weight: 800; font-size: 13px; opacity: .8; }
.gr-send { margin-top: 10px; }
.gr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.gr-actions .cbx-btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.gr-opts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.gr-seg { display: inline-flex; background: var(--cbx-soft); border-radius: 999px; padding: 3px; }
.gr-seg button { border: 0; padding: 7px 12px; border-radius: 999px; background: transparent; font: 900 13.5px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; }
.gr-seg button[aria-pressed="true"] { background: var(--cbx-accent); color: #fff; }

/* ---- the reveal after a knock ---- */
.gr-reveal { padding: 14px 12px 12px; }
.cbx-card .gr-rh, .gr-rh { margin: 0; text-align: center; font: 900 28px/1.1 var(--cbx-display); color: var(--gold-2); letter-spacing: -.01em; }
.cbx-card .gr-rsub, .gr-rsub { margin: 4px 0 8px; text-align: center; font: 800 14px/1.4 var(--cbx-body); color: rgba(255, 255, 255, .85); }
.gr-rrow { margin-top: 8px; padding: 8px 0 2px; border-top: 1px solid rgba(255, 255, 255, .12); }
.cbx-card .gr-rname, .gr-rname { margin: 0; font: 900 14px var(--cbx-body); color: #fff; }
.gr-rname span { font-weight: 800; color: rgba(255, 255, 255, .7); }
.gr-rhand { display: flex; justify-content: center; align-items: flex-end; gap: var(--gap, 8px); padding: 10px 0 2px; flex-wrap: nowrap; }
.gr-rhand .cb-card { cursor: default; }
.gr-rhand .gr-grp.dead .cb-card { filter: brightness(.82) saturate(.75); }
.gr-rhand .cb-card.lay { box-shadow: 0 0 0 3px #7ee0a8, 0 2px 4px rgba(0, 0, 0, .2); animation: gr-lay .55s cubic-bezier(.2, .8, .2, 1.2) both; animation-delay: var(--d, .5s); }
@keyframes gr-lay { from { transform: translateY(120%) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cbx-card .gr-math, .gr-math { margin: 12px 0 0; text-align: center; font: 800 15px var(--cbx-body); color: #fff; }
.gr-math b { color: var(--gold-2); font-size: 18px; }
.gr-math span { color: rgba(255, 255, 255, .75); }
.cbx-card .gr-total, .gr-total { margin: 8px 0 0; text-align: center; font: 800 14px var(--cbx-body); color: rgba(255, 255, 255, .9); }
.gr-total b { color: var(--gold-2); font-size: 17px; }
.gr-total span { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); }
.gr-reveal #nextHand { margin-top: 12px; }

.gr-result { margin-top: 12px; padding: 14px; border-radius: 16px; background: #fff7ea; box-shadow: inset 0 0 0 2px #f1dfc3; }
.cbx-card .gr-big, .gr-big { margin: 0; font: 900 26px var(--cbx-display); color: var(--cbx-ink); }
.cbx-card .gr-fin, .gr-fin { margin: 6px 0 12px; font: 800 15px/1.45 var(--cbx-body); color: var(--cbx-ink-2); }

/* ---- dialog ---- */
.gr-dlg { border: 0; padding: 0; border-radius: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.gr-dlg [hidden] { display: none !important; }
.gr-dlg::backdrop { background: rgba(42, 12, 20, .5); }
.gr-dlg-card { padding: 20px; font-family: var(--cbx-body); }
.gr-dlg h2 { margin: 0 0 6px; font: 900 22px var(--cbx-display); color: var(--cbx-ink); }
.gr-dlg p { margin: 0 0 12px; font: 800 15px/1.45 var(--cbx-body); color: var(--cbx-muted); }
.gr-field { display: grid; gap: 4px; margin: 0 0 10px; font: 900 13px var(--cbx-body); color: var(--cbx-ink-2); }
.gr-field input { font: 800 17px var(--cbx-body); padding: 11px 12px; border: 2px solid var(--cbx-line); border-radius: 12px; }
.gr-choice { display: flex; gap: 8px; margin: 2px 0 10px; }
.gr-choice label { flex: 1; display: grid; gap: 2px; padding: 10px; border-radius: 12px; border: 2px solid var(--cbx-line); font: 900 14px var(--cbx-body); cursor: pointer; text-align: center; color: var(--cbx-ink); }
.gr-choice input { display: none; }
.gr-choice label:has(input:checked) { border-color: #9b1c35; background: #fdecef; }
.gr-choice small { font: 800 12px var(--cbx-body); color: var(--cbx-muted); }
.gr-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.gr-mine { margin-top: 14px; border-top: 2px solid var(--cbx-line); padding-top: 10px; }
.gr-mine h3 { margin: 0 0 6px; font: 900 14px var(--cbx-body); }
.gr-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gr-mine a { display: block; padding: 9px 12px; border-radius: 10px; background: var(--cbx-soft); font: 800 14px var(--cbx-body); color: var(--cbx-ink); text-decoration: none; }

@media (min-width: 600px) {
  .gr-card { padding: 14px; }
  .gr-table { padding: 14px 16px 10px; }
  .gr-mid { --cw: 76px; gap: 40px; }
  .gr-oppfan { --cw: 34px; min-height: 48px; }
  .gr-oppfan > .cb-card + .cb-card { margin-left: -20px; }
  .gr-bar { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-pile .cb-card.hint, .gr-bar .turn, .gr-rhand .cb-card.lay { animation: none; }
}