/* Starport Poker — original styles. One screen, no page scrolling. */
html, body.pk-body { height: 100%; margin: 0; overflow: hidden; }
body.pk-body { background: radial-gradient(ellipse at 50% 0%, #1d2350 0%, #0b0d22 55%, #05060f 100%); color: #e8ecff; font-family: Gluten, system-ui, sans-serif; }
.pk-stars { position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 12%, #cfe, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
  radial-gradient(1px 1px at 88% 64%, #fde, transparent), radial-gradient(1px 1px at 22% 86%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 34%, #def, transparent), radial-gradient(1px 1px at 6% 52%, #fff, transparent); }
.pk-app { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; box-sizing: border-box; padding: 6px 8px 8px; gap: 6px; }
.pk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pk-back { white-space: nowrap; }
.pk-title { font-family: Chango, Gluten, sans-serif; font-size: 1.15rem; margin: 0; color: #ffd76a; text-shadow: 0 0 12px rgba(255, 200, 80, .45); white-space: nowrap; }
.pk-modes { display: flex; border: 1px solid #4a5299; border-radius: 999px; overflow: hidden; }
.pk-mode { background: transparent; color: #c9d0ff; border: 0; padding: 4px 11px; font: inherit; cursor: pointer; }
.pk-mode.on { background: linear-gradient(#5a63d8, #3b42a8); color: #fff; }
.pk-wallet { padding: 3px 10px; border-radius: 999px; background: rgba(255, 215, 106, .12); border: 1px solid rgba(255, 215, 106, .4); color: #ffe39a; white-space: nowrap; }
.pk-links { margin-left: auto; display: flex; gap: 10px; }
.pk-choices-wrap { position: relative; }
.pk-choices-btn { font: inherit; background: #262c66; color: #fff; border: 1px solid #5a63d8; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.pk-choices { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: 240px; background: #161a40; border: 1px solid #5a63d8; border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.pk-ch-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pk-x { background: none; border: 0; color: #c9d0ff; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.pk-ch-item { display: block; width: 100%; text-align: left; font: inherit; background: none; color: #e8ecff; border: 0; border-radius: 6px; padding: 5px 7px; cursor: pointer; }
.pk-ch-item:hover:not(:disabled) { background: #2a3070; }
.pk-ch-item:disabled { opacity: .4; cursor: default; }
.pk-ch-label { margin: 6px 0 3px; font-size: .8rem; color: #9aa3e0; }
.pk-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pk-theme { font: inherit; font-size: .8rem; background: #20255a; color: #fff; border: 1px solid #3b42a8; border-radius: 6px; padding: 3px; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.pk-theme i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.pk-theme[data-theme=nebula] i { background: #2b3f8f; } .pk-theme[data-theme=emerald] i { background: #13704a; } .pk-theme[data-theme=mars] i { background: #8a3a22; } .pk-theme[data-theme=void] i { background: #2a2140; }
.pk-theme.on { outline: 2px solid #ffd76a; }

.pk-main { max-width: none; width: 100%; margin: 0; padding: 0; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 8px; min-height: 0; }
.pk-center { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 5px; }
.pk-tablewrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pk-felt { --felt: #2b3f8f; --felt2: #121c4a; position: relative; width: var(--fw, 600px); height: var(--fh, 340px); border-radius: 50% / 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--felt) 0%, var(--felt2) 78%); box-shadow: 0 0 0 calc(var(--cw) * .28) #3a2a1a, 0 0 0 calc(var(--cw) * .34) #c9a24a, 0 0 40px 10px rgba(90, 110, 255, .35), inset 0 0 50px rgba(0, 0, 0, .6); }
.theme-emerald .pk-felt { --felt: #13704a; --felt2: #08311f; }
.theme-mars .pk-felt { --felt: #8a3a22; --felt2: #3a140a; }
.theme-void .pk-felt { --felt: #2a2140; --felt2: #0c0816; }
.pk-rail { position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(255, 215, 106, .25); pointer-events: none; }
.pk-logo { position: absolute; left: 50%; top: 21%; transform: translateX(-50%); font-family: Chango, sans-serif; font-size: calc(var(--cw) * .38); letter-spacing: .25em; color: rgba(255, 255, 255, .1); text-align: center; pointer-events: none; }
.pk-logo small { display: block; font-family: Gluten, sans-serif; font-size: .55em; letter-spacing: .1em; }
.pk-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--cw) * .1); }
.pk-tname { font-size: calc(var(--cw) * .26); color: #b8c2ff; white-space: nowrap; }
.pk-board { display: flex; gap: calc(var(--cw) * .1); min-height: calc(var(--cw) * 1.4); }
.pk-pot { font-size: calc(var(--cw) * .3); color: #ffe39a; background: rgba(0, 0, 0, .35); padding: 1px 10px; border-radius: 999px; white-space: nowrap; min-height: 1.2em; }

/* cards */
.pk-card { position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .1); background: linear-gradient(160deg, #fff 0%, #eef1ff 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  color: #1a1f3d; font-family: Gluten, sans-serif; flex: none; overflow: hidden; }
.pk-card.red { color: #d0263c; }
.pk-card .r { position: absolute; left: 7%; top: 2%; font-size: calc(var(--cw) * .42); font-weight: 600; line-height: 1; }
.pk-card .s1 { position: absolute; left: 9%; top: 32%; font-size: calc(var(--cw) * .28); line-height: 1; }
.pk-card .s2 { position: absolute; right: 6%; bottom: 3%; font-size: calc(var(--cw) * .62); line-height: 1; opacity: .9; }
.pk-card.back { background: radial-gradient(circle at 50% 50%, #ffd76a 0 9%, transparent 10%), repeating-linear-gradient(45deg, #3b42a8 0 4px, #262c66 4px 8px); border: 2px solid #ffd76a; box-sizing: border-box; }
.pk-card.back::after { content: ''; position: absolute; inset: 14%; border: 1px solid rgba(255, 215, 106, .6); border-radius: 30%; }
.pk-card.win { box-shadow: 0 0 0 2px #ffd76a, 0 0 14px #ffd76a; }
.pk-card.deal { animation: pkDeal .28s ease-out; }
@keyframes pkDeal { from { transform: translateY(-30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.pk-card.ghost { background: rgba(255, 255, 255, .05); box-shadow: none; border: 1px dashed rgba(255, 255, 255, .15); }

/* seats */
.pk-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: calc(var(--cw) * 2.7); pointer-events: none; }
.pk-seat .cards { display: flex; gap: 2px; height: calc(var(--cw) * 1.4 * .78); }
.pk-seat .cards .pk-card { width: calc(var(--cw) * .78); height: calc(var(--cw) * 1.09); }
.pk-seat .cards .pk-card .r { font-size: calc(var(--cw) * .34); } .pk-seat .cards .pk-card .s1 { font-size: calc(var(--cw) * .22); } .pk-seat .cards .pk-card .s2 { font-size: calc(var(--cw) * .48); }
.pk-seat.me .cards { height: calc(var(--cw) * 1.4); } .pk-seat.me .cards .pk-card { width: var(--cw); height: calc(var(--cw) * 1.4); }
.pk-seat.me .cards .pk-card .r { font-size: calc(var(--cw) * .42); } .pk-seat.me .cards .pk-card .s1 { font-size: calc(var(--cw) * .28); } .pk-seat.me .cards .pk-card .s2 { font-size: calc(var(--cw) * .62); }
.pk-plate { margin-top: -6px; position: relative; z-index: 2; background: linear-gradient(#22285e, #12153a); border: 1px solid #5a63d8; border-radius: 10px; padding: 2px 8px; text-align: center; min-width: 80%; font-size: calc(var(--cw) * .25); line-height: 1.25; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.pk-plate .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--cw) * 2.6); }
.pk-plate .stk { color: #ffe39a; }
.pk-plate .sty { color: #9aa3e0; font-size: .8em; }
.pk-seat.turn .pk-plate { border-color: #ffd76a; box-shadow: 0 0 12px #ffd76a; }
.pk-seat.folded { opacity: .45; }
.pk-seat.empty .pk-plate { border-style: dashed; color: #7d86c8; background: rgba(18, 21, 58, .6); }
.pk-last { font-size: calc(var(--cw) * .22); color: #fff; background: rgba(0, 0, 0, .5); border-radius: 6px; padding: 0 5px; margin-top: 2px; min-height: 1.1em; white-space: nowrap; }
.pk-last:empty { visibility: hidden; }
.pk-timer { height: 3px; width: 90%; background: rgba(255, 255, 255, .15); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.pk-timer i { display: block; height: 100%; background: #ffd76a; transition: width 1s linear; }
.pk-bet { position: absolute; transform: translate(-50%, -50%); font-size: calc(var(--cw) * .24); background: rgba(0, 0, 0, .55); color: #ffe39a; border-radius: 999px; padding: 1px 7px 1px 3px; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.pk-chip { width: calc(var(--cw) * .26); height: calc(var(--cw) * .26); border-radius: 50%; background: radial-gradient(circle, #ffd76a 0 30%, #d0263c 31% 62%, #fff 63% 70%, #d0263c 71%); display: inline-block; }
.pk-btn { position: absolute; transform: translate(-50%, -50%); width: calc(var(--cw) * .36); height: calc(var(--cw) * .36); border-radius: 50%; background: #fff; color: #1a1f3d; font-size: calc(var(--cw) * .2); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px #000; }

/* status + actions */
.pk-status { text-align: center; min-height: 1.3em; font-size: .95rem; color: #dfe4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-status.err { color: #ff8a9a; }
.pk-actions { display: flex; gap: 10px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.pk-acts { display: flex; gap: 6px; }
.pk-act { font: inherit; font-size: 1rem; min-width: 92px; padding: 7px 12px; border-radius: 10px; border: 1px solid; cursor: pointer; color: #fff; }
.pk-act.fold { background: linear-gradient(#6b2232, #45131f); border-color: #c04a5e; }
.pk-act.call { background: linear-gradient(#245c3d, #133824); border-color: #4fc27f; }
.pk-act.raise { background: linear-gradient(#7a5a12, #4a360a); border-color: #ffd76a; }
.pk-act:disabled, .pk-presets button:disabled, #slider:disabled { opacity: .35; cursor: default; }
.pk-sizer { display: flex; flex-direction: column; gap: 3px; min-width: 240px; }
.pk-presets { display: flex; gap: 4px; }
.pk-presets button { flex: 1; font: inherit; font-size: .8rem; background: #20255a; color: #fff; border: 1px solid #3b42a8; border-radius: 6px; padding: 2px 4px; cursor: pointer; }
.pk-slide { display: flex; align-items: center; gap: 6px; }
.pk-slide input { flex: 1; accent-color: #ffd76a; }
.pk-slide output { min-width: 58px; text-align: right; color: #ffe39a; }

/* side */
.pk-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 8px; box-sizing: border-box; }
.pk-tabs { display: flex; gap: 4px; align-items: center; }
.pk-sideclose { display: none; margin-left: auto; }
.pk-pane { flex: 1; min-height: 0; overflow: auto; margin-top: 6px; }
.pk-log { margin: 0; padding: 0 0 0 4px; list-style: none; font-size: .82rem; line-height: 1.35; }
.pk-log li.h { color: #ffd76a; margin-top: 4px; }
.pk-log li.w { color: #8ff0b4; }
.pk-small { font-size: .75rem; }
.pk-scoreboard { font-size: .85rem; }
.pk-lob-t { border: 1px solid #3b42a8; border-radius: 8px; padding: 6px; margin-bottom: 6px; font-size: .85rem; background: rgba(32, 37, 90, .5); }
.pk-lob-t b { color: #ffe39a; }
.pk-lob-t .btn { margin-top: 4px; padding: 3px 10px; font-size: .85rem; }
.pk-lob-t.here { border-color: #ffd76a; }
#lobby input { width: 100%; box-sizing: border-box; margin: 3px 0; }
#lobby .pk-row input[type=number] { width: 90px; }

/* setup dialog */
.pk-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 6, 15, .55); z-index: 30; }
.pk-overlay[hidden] { display: none; }
.pk-dialog { background: #161a40; border: 1px solid #5a63d8; border-radius: 14px; padding: 10px 14px; width: min(420px, 94%); max-height: 96%; overflow: auto; box-sizing: border-box; box-shadow: 0 10px 40px #000; }
.pk-dialog h2 { margin: 0 0 4px; font-family: Chango, sans-serif; font-size: 1rem; color: #ffd76a; }
.pk-dialog input[type=text] { width: 100%; box-sizing: border-box; }
.pk-lbl { font-size: .8rem; color: #9aa3e0; margin: 5px 0 2px; display: block; }
.pk-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.pk-seg button { font: inherit; font-size: .85rem; background: #20255a; color: #fff; border: 1px solid #3b42a8; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.pk-seg button.on { background: #5a63d8; border-color: #ffd76a; }
.pk-note { font-size: .78rem; color: #b8c2ff; margin: 6px 0; }
.pk-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* narrower screens: side panel becomes a pop-over */
@media (max-width: 900px) {
  .pk-main { grid-template-columns: minmax(0, 1fr); }
  .pk-side { position: absolute; z-index: 50; right: 8px; top: 52px; bottom: 8px; width: min(320px, calc(100% - 16px)); display: none; background: #12153a; border: 1px solid #5a63d8; border-radius: 10px; }
  .pk-app.side-open .pk-side { display: flex; }
  .pk-sideclose { display: block; }
}
@media (max-width: 600px) {
  .pk-title { font-size: .95rem; }
  .pk-links { font-size: .8rem; gap: 6px; }
  .pk-act { min-width: 0; flex: 1; font-size: .9rem; padding: 6px 8px; }
  .pk-acts { width: 100%; }
  .pk-sizer { width: 100%; min-width: 0; }
  .pk-actions { gap: 4px; }
  .pk-top { gap: 5px; font-size: .85rem; }
  .pk-mode { padding: 3px 7px; }
}
@media (max-height: 640px) {
  .pk-act { padding: 4px 10px; font-size: .9rem; }
  .pk-app { padding-top: 4px; gap: 4px; }
}
/* the side panel is dark in the starport theme */
.pk-side.panel { background: rgba(14, 17, 46, .92); color: #e8ecff; border: 1px solid #3b42a8; border-radius: 12px; }
.pk-side .muted, .pk-side .pk-small { color: #9aa3e0; }
.pk-side table.board { color: #e8ecff; }
.pk-side .tab { color: #c9d0ff; background: #20255a; border-color: #3b42a8; }
.pk-side .tab.on { background: #5a63d8; color: #fff; }
.pk-side input { background: #0c0f2a; color: #fff; border: 1px solid #3b42a8; border-radius: 6px; padding: 4px; }
@media (max-width: 600px) { .pk-title { display: none; } .pk-wallet { padding: 2px 7px; } }
.pk-pot:empty { visibility: hidden; }