/* Cribbage — portrait, after the design in the "Cribbage Phone Layout" canvas: felt green, cream cards, gold
   accents, Atkinson Hyperlegible. Shared page furniture (home, lobby, pop-ups) first, then the table. */
:root {
  --felt-glow: #2c6a52;
  --felt: #0E241D;
  --felt-dark: #08160F;
  --sheet: #14322A;
  --panel: rgba(20, 50, 42, 0.92);
  --panel2: #14322A;
  --table: #123A2F;
  --chip: #1E4A3D;
  --text: #F2F5F1;
  --muted: #B9C9C1;
  --gold: #F5B841;
  --gold-deep: #C98A12;
  --win: #4be08c;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
input { -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
body { font-family: 'Atkinson Hyperlegible Next', "Trebuchet MS", system-ui, sans-serif; }

/* ---------- home, lobby, pop-ups ---------- */
.panel h2 { margin: 0 0 8px; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.field { display: block; margin: 8px 0 4px; }
.field span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.field input { width: 100%; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 2px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); color: var(--text); outline: none; }
.row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.btn { border: 0; border-radius: 12px; padding: 12px 18px; font-size: 17px; font-weight: 700; background: rgba(255,255,255,.12); }
.btn.gold:disabled { filter: grayscale(.8); opacity: .6; }
.btn.ghost { background: transparent; border: 2px solid rgba(255,255,255,.25); }
.btn.danger { background: #a3242f; }
.btn.small { padding: 7px 12px; font-size: 15px; }
.linkbtn { display: block; text-align: center; text-decoration: none; margin-top: 8px; }
.live-dot { display: inline-block; }
.game-list { display: flex; flex-direction: column; gap: 8px; }
.game-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.game-item .code { font-family: ui-monospace, Menlo, Consolas, monospace; background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 6px; font-size: 13px; margin-left: 6px; }
.code-row { display: flex; align-items: baseline; justify-content: space-between; }
.code-row strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 30px; color: var(--gold); letter-spacing: 4px; }
.seat-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.seat-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); flex-wrap: wrap; }
.seat-list li.empty { opacity: .6; border: 2px dashed rgba(255,255,255,.2); background: transparent; }
.seat-list .tag { font-size: 12px; color: var(--muted); }
.bot-tag { font-size: 12px; color: var(--muted); font-weight: 400; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 18px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(0,0,0,.4); flex: none; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.back-link { display: inline-block; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 15px; padding: 4px 0; }
#historyBtn { margin-top: 4px; }
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 12px; animation: fade .2s ease-out; }
.sheet.wide { width: 900px; }
.sheet h2 { margin: 0 0 10px; font-family: Georgia, serif; padding-right: 36px; }
.sheet h3 { margin: 14px 0 6px; font-size: 16px; }
.sheet .btn.ghost, .sheet .btn.danger { width: 100%; margin-top: 8px; }
.sheet .row .btn { width: auto; }
.rules h3 { color: var(--text); margin: 0 0 4px; font-size: 15px; }
.rules p { margin: 5px 0; }
.claim-list { display: flex; flex-direction: column; gap: 8px; }
.claim-list button { padding: 10px; border-radius: 12px; border: 0; background: rgba(255,255,255,.08); font-size: 17px; font-weight: 700; text-align: left; }
.win-tally { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.win-chip b { color: var(--gold); margin-left: 4px; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,.06); border-radius: 12px; }
.history-item.incomplete .hi-title { color: var(--muted); }
.hi-main { flex: 1; min-width: 0; }
.hi-date { font-size: 12px; color: var(--muted); }
.hi-title { font-size: 16px; margin: 2px 0; }
.hi-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-del { border: 0; background: rgba(0,0,0,.25); border-radius: 10px; width: 36px; height: 36px; font-size: 16px; flex: none; }
.score-table-wrap { overflow-x: auto; }
table.scores { border-collapse: collapse; width: 100%; font-size: 15px; }
table.scores th, table.scores td { padding: 6px 8px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
table.scores td.rd { text-align: left; }
table.scores tr.current td { background: rgba(245,183,0,.15); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.6); }
.none { color: var(--muted); font-size: 13px; }
.rotate { display: none; }

.round-intro { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; z-index: 31; animation: rise .4s ease-out; pointer-events: none; }
.round-intro.out { animation: fadeOut .3s ease-in forwards; }
.round-intro .ri-round { font-family: Georgia, serif; font-size: 11vh; font-weight: 900; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 30px rgba(0,0,0,.6); white-space: nowrap; }
.round-intro .ri-dealer { margin-top: 6px; font-size: 3.6vh; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.celebrate { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }
.your-turn-flash { position: absolute; inset: 0; z-index: 25; pointer-events: none; box-shadow: inset 0 0 60px 10px rgba(245,183,0,.7); animation: fadeOut 1.2s ease-out forwards; }
#scores, #menu, #mat { z-index: 65; }


.count-picker { display: flex; gap: 8px; margin: 6px 0 12px; }
.count-picker button { flex: 1; font-size: 22px; font-weight: 700; padding: 10px 0; border-radius: 12px; border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); }
.count-picker button.on { border-color: var(--gold); background: rgba(245,184,65,.2); color: var(--gold); }
.setup-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 14px; }
.setup-picker button { display: flex; flex-direction: column; gap: 2px; padding: 9px 8px; border-radius: 12px; border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); font-size: 16px; text-align: center; }
.setup-picker button small { font-size: 12.5px; color: var(--muted); }
.setup-picker button.on { border-color: var(--gold); background: rgba(245,184,65,.18); color: var(--gold); }
.brand-board { position: relative; width: 150px; height: 46px; margin: 0 auto 6px; }
.brand-board span { position: absolute; left: 10px; right: 10px; height: 10px; border-radius: 4px; background: #1F4A3C; background-image: radial-gradient(circle, #05110C 2px, transparent 2.6px); background-size: 9px 10px; }
.brand-board span:nth-child(1) { top: 2px; } .brand-board span:nth-child(2) { top: 18px; } .brand-board span:nth-child(3) { top: 34px; }
.brand-board i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); top: 1px; left: 52px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.brand-board i.b { background: #3D7BE0; top: 17px; left: 96px; }

/* ---------- the table: one portrait column ---------- */
#table { overflow: hidden; touch-action: none; background: var(--felt-dark); }
.cr { position: absolute; inset: 0; margin: 0 auto; max-width: 480px; display: flex; flex-direction: column; gap: var(--g); padding: calc(6px + env(safe-area-inset-top, 0px)) 14px calc(10px + var(--safe-b)); box-sizing: border-box; background: var(--felt); font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; --g: clamp(6px, 1.3vh, 12px); }
.cr button { font-family: inherit; }
.cr-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.ic { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; padding: 0; font-size: 20px; }
.ic svg, .sq svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.small { width: 38px; }
.cr-top-r { display: flex; }
#fsBtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cr-title { text-align: center; line-height: 1.2; }
#phaseTitle { font-size: 16px; font-weight: 700; }
#phaseSub { font-size: 14px; color: var(--muted); }

.board-panel { background: var(--panel2); border-radius: 16px; padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 6px; }
.score-row { display: flex; gap: 14px; }
.sc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.sc .dot { width: 12px; height: 12px; border: 0; flex: none; }
.sc .nm { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc .gain { font-size: 14px; font-weight: 700; color: var(--muted); }
.sc .pts { margin-left: auto; font-family: 'Atkinson Hyperlegible Mono', monospace; font-size: 28px; font-weight: 700; line-height: 32px; }
.sc.small .pts { font-size: 24px; }
.board { width: 100%; height: auto; display: block; overflow: visible; }
.board .plate { fill: #1F4A3C; }
.board .hole { fill: #05110C; }
.board .loop { fill: none; stroke: #2F5A4C; stroke-width: 2; }
.board .skunk { stroke: #E8836B; stroke-width: 2; }
.board .skunk.dbl { stroke: #7FA595; }
.board .start { fill: none; stroke: #7FA595; stroke-width: 1.5; }
.board .game-hole { fill: #05110C; stroke: #B9C9C1; stroke-width: 2; }
.board .peg { stroke-width: 2; transition: transform .75s cubic-bezier(.3,.9,.3,1); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.board .peg.back { stroke-width: 2.5; }
.board-labels { position: relative; height: 18px; font-size: 14px; color: #A4B8AF; }
.board-labels span { position: absolute; top: 0; white-space: nowrap; }
.board-labels .mid { transform: translateX(-50%); }
.board-labels .sk { color: #F0A28F; }

.opps { display: flex; flex-direction: column; gap: 4px; }
.opp { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 2px 6px; border-radius: 14px; transition: background .3s; }
.opp.turn { background: rgba(245,184,65,.12); box-shadow: inset 0 0 0 2px rgba(245,184,65,.55); }
.opp .avatar { width: 40px; height: 40px; font-size: 17px; }
.opp-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.opp-txt b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-txt small { font-size: 14px; color: var(--muted); }
.opp-cards { margin-left: auto; display: flex; padding-right: 4px; }
.opp-cards .card { --w: 26px; width: 26px; height: 37px; border-radius: 4px; }
.opp-cards .card + .card { margin-left: -14px; }

.table-area { flex: 1; min-height: 0; background: var(--table); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; }
.play-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 10px 14px; gap: 6px; min-height: 0; }
.pa-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.pa-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; }
.pa-lbl { font-size: 14px; color: var(--muted); white-space: nowrap; }
.slot-card { width: var(--tw); height: var(--th); position: relative; }
.slot-card.can-cut { cursor: pointer; border-radius: 9px; box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px rgba(245,184,65,.6); animation: glowPulse 1.2s ease-in-out infinite; }
.pa-count { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pa-count.dim { opacity: .35; }
.pc-k { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.pc-n { font-family: 'Atkinson Hyperlegible Mono', monospace; font-size: clamp(44px, 8vh, 64px); font-weight: 700; line-height: 1.05; }
.pc-of { font-size: 16px; color: var(--muted); }
.crib-stack { position: relative; width: var(--tw); height: var(--th); }
.crib-stack .card { position: absolute; left: calc(var(--k) * 3px); top: calc(var(--k) * -2px); }
.pile { display: flex; justify-content: center; align-items: center; min-height: calc(var(--th) + 4px); }
.pile .card { flex: none; border-bottom: 4px solid var(--owner, transparent); }
.pile .card.stack { margin-left: -24px; }
.crib-row { display: flex; gap: 8px; }
.card.slot-empty { background: transparent; border: 2px dashed #4E7A6B; box-shadow: none; }
.card.empty { background: transparent; border: 2px dashed #2F5A4C; box-shadow: none; }
.callout { display: flex; align-items: center; gap: 10px; background: var(--chip); border-radius: 999px; padding: 8px 16px; font-size: 16px; font-weight: 600; max-width: 100%; text-align: center; animation: rise .25s ease-out; }
.callout .dot { width: 10px; height: 10px; border: 0; flex: none; }
.callout b { font-family: 'Atkinson Hyperlegible Mono', monospace; color: var(--gold); }

/* the show */
.show-area { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; min-height: 0; overflow-y: auto; touch-action: pan-y; }
.sh-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; font-weight: 700; }
.sh-step { font-size: 14px; font-weight: 400; color: var(--muted); }
.sh-cards { display: flex; align-items: center; gap: 6px; justify-content: center; }
.sh-cards .card { --tw: clamp(46px, 13vw, 56px); width: var(--tw); height: calc(var(--tw) * 1.43); }
.sh-plus { font-size: 20px; color: var(--muted); }
.sh-lines { display: flex; flex-direction: column; gap: 2px; }
.bd-line { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.05); animation: rise .2s ease-out; }
.bd-line b { font-family: 'Atkinson Hyperlegible Mono', monospace; color: var(--gold); }
.bd-line.none { color: var(--muted); }
.sh-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.sh-total span { font-size: 14px; color: var(--muted); font-style: italic; }
.sh-total b { font-family: 'Atkinson Hyperlegible Mono', monospace; font-size: 40px; line-height: 1; }
.claim-note { text-align: center; font-size: 16px; }
.claim-note b { font-family: 'Atkinson Hyperlegible Mono', monospace; color: var(--gold); font-size: 20px; }
.claim-note.mug { color: #F0A28F; font-weight: 700; }

/* your hand */
.hand-area { display: flex; flex-direction: column; gap: 6px; }
.hand-head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
#handLabel { font-size: 16px; font-weight: 600; }
.turn-pill { background: var(--gold); color: #1A1406; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.hand-hint { margin-left: auto; font-size: 14px; color: var(--muted); font-family: 'Atkinson Hyperlegible Mono', monospace; }
.hand { display: flex; justify-content: center; align-items: flex-end; height: calc(var(--hh) + 22px); padding-top: 20px; box-sizing: border-box; }
.hand .none { color: var(--muted); font-size: 14px; align-self: center; }
.hc { padding: 0; border: 0; background: none; flex: none; border-radius: 10px; transition: transform .14s ease; --tw: var(--hw); --th: var(--hh); }
.hand .hc + .hc { margin-left: 12px; }
.hand.five .hc + .hc { margin-left: -6px; }
.hand.six .hc + .hc { margin-left: calc(var(--hw) * -0.22); }
.hc .card { width: var(--hw); height: var(--hh); --w: var(--hw); }
.hc.sel { transform: translateY(-18px); }
.hc.sel .card { box-shadow: 0 0 0 3px var(--gold), 0 8px 16px rgba(0,0,0,.45); }
.hc.dim { opacity: .4; }
.hc.ghost, .card.ghost { visibility: hidden; }

.action-row { display: flex; gap: 10px; }
.sq { width: 56px; height: 56px; flex: none; border: 0; border-radius: 16px; background: var(--chip); display: grid; place-items: center; }
.cta { flex: 1; height: 56px; border: 0; border-radius: 16px; background: var(--gold); color: #1A1406; font-size: 18px; font-weight: 800; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta.wait, .cta:disabled { background: #2A5547; color: #DCE6E1; }
.cta.alt { flex: 0 0 auto; background: var(--chip); color: var(--text); padding: 0 16px; }
.cta.mug { background: #B8432B; color: #fff; }
.cta.stepper { display: flex; padding: 0; overflow: hidden; }
.cta.stepper span { width: 56px; display: grid; place-items: center; font-size: 26px; }
.cta.stepper span + span { border-left: 1px solid rgba(255,255,255,.15); }

/* cards: cream faces, big corner index; backs in claret */
.card { --w: var(--tw); position: relative; width: var(--tw); height: var(--th); border-radius: calc(var(--w) * .14); background: #F7F3EA; color: #16181A; box-shadow: 0 2px 6px rgba(0,0,0,.35); box-sizing: border-box; overflow: hidden; }
.card.red { color: #B8232B; }
.card .ci { position: absolute; left: 9%; top: 6%; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.card .ci b { font-size: calc(var(--w) * .34); font-weight: 800; }
.card .ci i { font-style: normal; font-size: calc(var(--w) * .27); }
.card .cs { position: absolute; right: 9%; bottom: 5%; font-size: calc(var(--w) * .48); line-height: 1; }
.card.back { background: #7E2C2C; box-shadow: inset 0 0 0 3px #F7F3EA, inset 0 0 0 5px #7E2C2C, inset 0 0 0 6px #C9876E, 0 2px 6px rgba(0,0,0,.35); }
.card.back.tiny { box-shadow: inset 0 0 0 2px #F7F3EA, 0 1px 3px rgba(0,0,0,.4); }
.card.pop { animation: pop .35s ease-out; }
.fly .card { width: 100%; height: 100%; }

/* cut for the deal */
.cut-show { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(5,17,12,.72); animation: fade .25s ease-out; font-family: 'Atkinson Hyperlegible Next', sans-serif; }
.cut-show.out { animation: fadeOut .3s ease-in forwards; }
.cs-title { font-size: 30px; font-weight: 800; }
.cs-row { display: flex; gap: 22px; }
.cs-p { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 16px; }
.cs-card .card { --tw: 70px; --th: 100px; }
.cs-note { font-size: 18px; color: var(--muted); }

.log-body { display: flex; flex-direction: column; gap: 3px; max-height: 60vh; overflow-y: auto; touch-action: pan-y; }
.lg { font-size: 15px; color: var(--muted); padding: 2px 0; }
.lg.head { color: var(--text); font-weight: 700; margin-top: 4px; }
.lg.pts { display: flex; align-items: center; gap: 8px; color: var(--text); }
.lg.pts b { margin-left: auto; color: var(--gold); font-family: 'Atkinson Hyperlegible Mono', monospace; }
.skunk-note { font-size: 24px; font-weight: 800; margin: 0 0 10px; }

/* Sizes: cards from both the height and the width of the screen */
.cr { --tw: clamp(44px, min(13vw, 8.3vh), 56px); --th: calc(var(--tw) * 1.43); --hw: clamp(56px, min(19.5vw, 11.5vh), 80px); --hh: calc(var(--hw) * 1.4); }
@media (max-height: 700px) { .cr .opp { min-height: 40px; } .opp .avatar { width: 32px; height: 32px; font-size: 14px; } .board-labels { font-size: 12px; } .sc .pts { font-size: 22px; } .callout { font-size: 14px; padding: 6px 12px; } }

/* This game is played upright: ask to turn the phone back when it's sideways on a phone */
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  body.in-game .rotate { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; background: var(--felt-dark); font-size: 20px; font-weight: 700; }
  .rotate-phone { font-size: 80px; animation: turnUp 2s ease-in-out infinite; }
}
@keyframes turnUp { 0%,20% { transform: rotate(-90deg); } 50%,80% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }
@keyframes glowPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* Round / hand banner: centred with auto margins (its pop-in animation sets transform, which used to undo the
   translate(-50%, -50%) centring and push it right and down), in a see-through box so it reads over the table. */
.round-intro { inset: 0; margin: auto; width: max-content; max-width: 92vw; height: max-content; transform: none; padding: 2vh 5vh 2.6vh; border-radius: 22px; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 40px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.round-intro .ri-dealer { white-space: normal; }