/* Chips mode: builds on rps.css arena styles. */
.chips-page { --gold: #ffd166; --gold-deep: #9a6a12; --red: #ff6b7a; }
.chips-page .brand-word b { color: var(--gold); }
.chips-page .hud-button span:first-child { font-size: 14px; }

/* ---------- bankroll ---------- */
.bankroll { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 22px 12px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(90deg, #4cc9ff14, transparent 32%, transparent 68%, #b7ff6914), #0b1323cc; backdrop-filter: blur(12px); box-shadow: 0 18px 44px #0007, inset 0 1px 0 #ffffff0d; }
.bank-side { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; }
.bank-jev { flex-direction: row-reverse; }
.bank-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bank-jev .bank-text { align-items: flex-end; }
.bank-human .tag { color: var(--gold); }
.bank-jev .tag { color: var(--jev); }
.bankroll .bank-jev .avatar { color: #10240f; background: linear-gradient(145deg, #e2ffbf, var(--jev)); box-shadow: 0 0 24px #b7ff6955; }
.bank-jev .streak { color: var(--jev); background: #b7ff691f; border-color: #b7ff6966; }
.bank-number { font-size: 42px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff4d6; text-shadow: 0 0 26px #ffd16655; white-space: nowrap; }
.bank-jev .bank-number { color: var(--jev); text-shadow: 0 0 26px #b7ff6955; }
.bank-number.bump { animation: bump .55s var(--ease-pop); }
.bank-number.up { color: #e9fff0; text-shadow: 0 0 30px #4cc9ffaa; }
.bank-number.down { color: #ffd9dd; text-shadow: 0 0 30px #ff6b7a99; }
.coin { flex: none; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 45%, var(--gold-deep) 100%); box-shadow: 0 0 24px #ffd16666, inset 0 -3px 0 #0003, inset 0 0 0 5px #ffffff22; position: relative; }
.coin::after { content: "J"; position: absolute; inset: 0; display: grid; place-items: center; color: #6b4608; font-weight: 900; font-size: 19px; }
.profit-chip { flex: none; padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--muted); background: #ffffff0d; border: 1px solid var(--line-2); white-space: nowrap; }
.profit-chip.plus { color: #bfeaff; border-color: #4cc9ff66; background: #4cc9ff1c; }
.profit-chip.minus { color: #ffd0d5; border-color: #ff6b7a66; background: #ff6b7a1a; }
.progress { grid-column: 1 / -1; height: 6px; margin-top: 12px; border-radius: 99px; background: #ffffff10; overflow: hidden; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 12px #ffd16688; transition: width .6s var(--ease-out); }
.stake-timeline { align-items: flex-end; min-height: 16px; }
.stake-timeline i { height: auto; min-height: 4px; align-self: flex-end; }

/* ---------- pot + table states ---------- */
.pot { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; min-width: 44px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; color: #3d2703; background: linear-gradient(180deg, #ffe7a3, var(--gold)); box-shadow: 0 4px 14px #0008, 0 0 18px #ffd16677; text-align: center; }
.pot.drop { animation: pot-drop .5s var(--ease-pop); }
@keyframes pot-drop { from { transform: translateY(-40px) scale(1.6); opacity: 0; } }
.arena.high-stakes { border-color: #ffd16666; box-shadow: 0 26px 60px #0009, 0 0 0 1px #ffd16633, 0 0 60px #ffd16622, inset 0 1px 0 #ffffff12; }
.arena.high-stakes .versus-ring { animation-duration: 2s; }
.float-score.gain { color: #bfeaff; }
.float-score.loss { color: var(--red); }
.float-score.big { font-size: 40px; color: var(--gold); }

/* ---------- panels ---------- */
.table-panel { padding: 22px 24px; border: 1px solid var(--line); border-radius: 24px; background: #0b1323d9; backdrop-filter: blur(12px); box-shadow: 0 18px 44px #0007, inset 0 1px 0 #ffffff0d; text-align: center; }
.table-panel .eyebrow { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .22em; }
.table-panel h1 { margin: 8px 0 6px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.01em; background: linear-gradient(180deg, #fff, #ffe7a3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rules { margin: 0 auto 16px; max-width: 520px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.rules b { color: #fff4d6; }
.fine { margin: 12px 0 0; color: var(--dim); font-size: 11px; }
.opponent-pick { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.opponent { cursor: pointer; }
.opponent input { position: absolute; opacity: 0; pointer-events: none; }
.opponent span { display: flex; flex-direction: column; gap: 3px; min-width: 190px; padding: 11px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: #ffffff06; text-align: left; transition: border-color .15s, background .15s, transform .15s var(--ease-pop); }
.opponent b { font-size: 14px; }
.opponent small { color: var(--muted); font-size: 11px; }
.opponent input:checked + span { border-color: var(--gold); background: #ffd16614; box-shadow: 0 0 0 3px #ffd16622; }
.opponent input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.opponent:hover span { transform: translateY(-2px); }
.cta { min-width: 200px; height: 52px; padding: 0 26px; border: 0; border-radius: 16px; font-size: 16px; font-weight: 900; letter-spacing: .04em; color: #2b1c02; background: linear-gradient(180deg, #ffe7a3, var(--gold) 55%, #e9a83a); box-shadow: 0 10px 28px #ffd16633, inset 0 1px 0 #ffffffaa, inset 0 -3px 0 #0002; transition: transform .15s var(--ease-pop), box-shadow .15s, filter .15s; }
.cta:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 16px 36px #ffd16655, inset 0 1px 0 #ffffffaa, inset 0 -3px 0 #0002; }
.cta:active:not(:disabled) { transform: translateY(0) scale(.97); }
.cta:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.quiet-button { align-self: center; margin-top: 2px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: var(--dim); font-size: 11px; font-weight: 700; }
.quiet-button:hover { color: var(--red); }

/* ---------- compact desktop layout ---------- */
.chips-page .status-row { display: none; }
.chips-page .move-button { min-height: 96px; }
.chips-page .bankroll { padding: 12px 22px 10px; }
.chips-page .bank-number { font-size: 38px; }
.chips-page .progress { margin-top: 10px; }
.chips-page .stake-timeline { margin-top: 8px; min-height: 10px; }
.chips-page .arena { padding-top: 44px; }

/* ---------- deck: stake + hands ---------- */
.deck { display: flex; flex-direction: column; gap: 10px; }
.stake-bar { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 20px; background: #0b1323d9; backdrop-filter: blur(12px); box-shadow: 0 12px 30px #0006, inset 0 1px 0 #ffffff0d; }
.stake-label { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.chip-rack { display: flex; gap: 8px; }
.chip-token { --c: #7fa6c9; position: relative; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: repeating-conic-gradient(from 8deg, #ffffffcc 0 12deg, transparent 12deg 45deg), var(--c); box-shadow: 0 5px 12px #0009, inset 0 -3px 0 #0003; transition: transform .18s var(--ease-pop), box-shadow .18s, opacity .2s; }
.chip-token span { position: absolute; inset: 6px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); border: 2px dashed #ffffff88; color: #fff; font-size: 12px; font-weight: 900; text-shadow: 0 1px 2px #0008; }
.chip-token.t10 { --c: #5f86ad; }
.chip-token.t50 { --c: #d9534f; }
.chip-token.t100 { --c: #2f8f5b; }
.chip-token.t200 { --c: #1c1c28; }
.chip-token.t200 span { color: var(--gold); border-color: #ffd16699; }
.chip-token:hover:not(:disabled) { transform: translateY(-4px) rotate(-8deg); }
.chip-token.selected { transform: translateY(-6px); box-shadow: 0 12px 20px #000a, 0 0 0 3px var(--gold), 0 0 22px #ffd16666; }
.chip-token:disabled { opacity: .35; }
.chip-token:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.stake-line { display: flex; align-items: center; justify-content: center; gap: 10px; }
.step { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 11px; background: #ffffff08; font-size: 18px; font-weight: 700; transition: border-color .15s, color .15s; }
.step:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.stake-value { min-width: 80px; font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; color: #fff4d6; text-shadow: 0 0 22px #ffd16655; }
.stake-value.bump { animation: bump .35s var(--ease-pop); }
.stake-bar .payout { margin: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.payout b { color: #cfeeff; }
.payout .lose { color: #ffc4ca; }
.deck.locked-out .stake-bar { opacity: .6; }
.chips-page .move-button.queued { border-color: var(--gold); box-shadow: 0 0 0 3px #ffd16644, 0 0 30px #ffd16633; animation: queued 1s ease-in-out infinite; }
@keyframes queued { 50% { box-shadow: 0 0 0 5px #ffd16622, 0 0 40px #ffd16655; } }

/* ---------- summary ---------- */
.summary { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: #03060dcc; backdrop-filter: blur(8px); animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; } }
.summary-card { width: min(460px, 100%); padding: 30px 26px 24px; border: 1px solid #ffd16655; border-radius: 28px; background: radial-gradient(ellipse at 50% 0%, #2a2410, #0d1322 60%); box-shadow: 0 30px 80px #000c, 0 0 80px #ffd16622; text-align: center; animation: card-in .5s var(--ease-pop); }
@keyframes card-in { from { transform: translateY(30px) scale(.9); opacity: 0; } }
.summary-card .eyebrow { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .24em; }
.summary-card h2 { margin: 8px 0 14px; font-size: 26px; }
.summary-balance { display: block; font-size: 58px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff4d6; text-shadow: 0 0 34px #ffd16677; }
.summary-profit { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 99px; font-weight: 900; font-variant-numeric: tabular-nums; }
.summary-profit.plus { color: #bfeaff; background: #4cc9ff1f; }
.summary-profit.minus { color: #ffd0d5; background: #ff6b7a1f; }
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 12px; }
.summary-stats div { padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff06; }
.summary-stats small { display: block; color: var(--muted); font-size: 10px; }
.summary-stats strong { display: block; margin-top: 3px; font-size: 18px; font-variant-numeric: tabular-nums; }
.summary-note { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.summary-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  .chips-page { --card: min(30vw, 128px); }
  .chips-page .hud-button span:not(:first-child):not(.sr-only) { display: none; }
  .chips-page .arena { padding-top: 50px; }
  .chips-page .banner { min-height: 70px; margin-top: 10px; }
  .bankroll { padding: 12px 14px; border-radius: 18px; }
  .bank-side { gap: 8px; }
  .coin, .bankroll .avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; }
  .bankroll .avatar { border-radius: 11px; }
  .coin::after { font-size: 13px; }
  .bank-number { font-size: 28px; }
  .profit-chip { position: absolute; top: calc(100% + 2px); left: 0; font-size: 10px; padding: 2px 7px; }
  .bankroll .streak { position: absolute; top: calc(100% + 2px); right: 0; margin: 0; font-size: 0; padding: 1px 6px; background: #0b1323; }
  .bankroll .streak::after { content: "🔥" attr(data-count); font-size: 11px; }
  .progress { margin-top: 20px; }
  .table-panel { padding: 16px 14px; border-radius: 20px; }
  .stake-bar { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 10px 12px; border-radius: 18px; }
  .stake-label { display: none; }
  .chip-rack { gap: 6px; }
  .chip-token { width: 40px; height: 40px; }
  .chip-token span { inset: 5px; font-size: 11px; }
  .stake-value { font-size: 26px; min-width: 56px; }
  .step { width: 30px; height: 30px; }
  .stake-bar .payout { grid-column: 1 / -1; text-align: center; }
  .opponent span { min-width: 150px; }
  .summary-balance { font-size: 46px; }
}
@media (max-width: 380px) {
  .bank-number { font-size: 24px; }
}

/* ---------- challenger ---------- */
.challenger-row { display: flex; align-items: center; gap: 12px; width: min(360px, 100%); margin: 0 auto 16px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 16px; background: #ffffff06; text-align: left; }
.challenger-row .avatar { width: 40px; height: 40px; border-radius: 13px; font-size: 16px; }
.challenger-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.challenger-text small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.challenger-text strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.step-link { height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 99px; background: none; color: #cfdcf0; font-size: 12px; font-weight: 800; }
.step-link:hover { border-color: var(--gold); color: var(--gold); }
#bank-owner { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- lobby: no active match ---------- */
body.lobby .arena { display: none; }
body.lobby .game { justify-content: flex-start; }
body.lobby #start-panel { padding: 34px 24px 28px; animation: modal-in .45s var(--ease-pop); }