/* Separate table layout: private hand first, shared public information below. */
.pass-play-open #app, .pass-play-open #home, .pass-play-open #coach { display: none !important; }
.pp-screen { position: fixed; inset: 0; z-index: 3000; overflow: auto; background: radial-gradient(ellipse at 50% 15%, #173e30, #091e18 85%); color: #f2efe3; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.pp-screen[hidden], .pp-setup [hidden] { display: none !important; }
.pp-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #0d2922; border-bottom: 1px solid #446453; }
.pp-title { font-weight: 700; color: #dcc579; min-width: 4.5em; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.pp-view-controls { position: relative; }
.pp-view-controls > summary { list-style: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid #557a65; border-radius: 10px; cursor: pointer; }
.pp-view-controls > summary::-webkit-details-marker { display: none; }
.pp-view-controls svg { width: 22px; height: 22px; fill: none; stroke: #e6ddbb; stroke-width: 1.5; }
.pp-view-panel { position: absolute; inset-inline-end: 0; top: 52px; width: min(240px, 85vw); background: #153b2c; border: 1px solid #6b815e; border-radius: 12px; padding: 14px; box-shadow: 0 10px 25px #0008; display: grid; gap: 10px; z-index: 5; }
.pp-view-panel select { min-height: 44px; width: 100%; padding: 8px; color: #f5efdc; border: 1px solid #68816c; border-radius: 7px; background: #0c281e; }
.pp-screen button, .pp-setup button, .pp-setup select, .pp-setup input { min-height: 44px; }
.pp-main { max-width: 1080px; margin: auto; padding: 16px; }
.pp-meta { color: #bbcec4; font-size: 14px; margin: 0 0 16px; }
.pp-private { padding: 26px 16px; margin-bottom: 24px; border: 4px solid #755332; border-radius: 22px; background: radial-gradient(ellipse at 50% 35%, #1b7051, #104a36 90%); box-shadow: inset 0 0 40px #0003, 0 8px 24px #0003; text-align: center; }
.pp-private h1 { font-size: clamp(22px, 5vw, 32px); margin: 12px 0; overflow-wrap: anywhere; }
.pp-private .sub { color: #c4d2c9; margin: 14px 0; }
.pp-lock { font-size: 42px; color: #dcc579; }
.pp-hand { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 24px auto; max-width: 750px; padding: 10px 2px 16px; border-bottom: 3px solid #a17c4c; border-radius: 8px; }
.pp-screen .pp-tile { width: 44px; height: 61px; flex: 0 0 auto; margin: 0; padding: 0; }
.pp-hand button.selected { outline: 3px solid var(--table-selection); outline-offset: 2px; transform: translateY(-5px); }
.pp-hand .tile { box-shadow: inset 0 1px 0 #ffffff80, 0 3px 0 var(--tile-side), 0 4px 0 var(--tile-side-dark), 0 5px 8px #0005; }
.pp-hand .tile.drawn::after { content: ""; position: absolute; bottom: -10px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #f0deb1; }
.pp-hand button:focus-visible, .pp-screen button:focus-visible { outline: 3px solid #73bfff; outline-offset: 3px; }
.pp-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pp-offered { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pp-claim-tiles { display: flex; gap: 2px; justify-content: center; margin-top: 6px; }
.pp-claim-tiles .pp-tile { width: 28px; height: 39px; min-height: 0; }
.pp-public { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.pp-seat { min-width: 0; border: 1px solid #375747; border-radius: 14px; padding: 14px; background: rgba(9,30,22,.65); }
.pp-seat h3 { font-size: 15px; margin: 0 0 12px; overflow-wrap: anywhere; }
.pp-current { border-color: #c5ae63; background: rgba(26,60,42,.75); }
.pp-seat-heading { display: flex; align-items: center; gap: 9px; }
.pp-wind { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid #728567; border-radius: 50%; color: #dfd4ab; font-size: 18px; }
.pp-seat-name { flex: 1; min-width: 0; }
.pp-score { font-variant-numeric: tabular-nums; color: #e9dbac; flex: none; }
.pp-meld { padding: 4px; background: #ffffff0b; border-radius: 6px; }
.pp-river { padding-top: 5px; gap: 5px; }
.pp-public .tile.recent { outline-offset: 1px; }
@media (min-width: 1000px) {
  .pp-main[data-state="play"] { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr); gap: 16px 24px; align-items: start; }
  .pp-main[data-state="play"] > :not(.pp-public) { grid-column: 1; }
  .pp-main[data-state="play"] .pp-meta { grid-column: 1 / -1; }
  .pp-main[data-state="play"] .pp-public { grid-column: 2; grid-row: 2 / 5; grid-template-columns: 1fr; margin-top: 0; }
  .pp-hand { max-width: 430px; gap: 8px; }
  .pp-screen .pp-hand .pp-tile { width: 50px; height: 68px; }
}
.pp-river, .pp-melds, .pp-meld { display: flex; gap: 3px; flex-wrap: wrap; }
.pp-melds { margin-bottom: 8px; gap: 8px; }
.pp-public .pp-tile { width: 28px; height: 39px; }
.pp-concealed { display: block; font-size: 13px; padding: 8px; background: #244e3d; border-radius: 6px; }
.pp-learning-badge { color: #e5cf95; font-size: 12px; margin: -6px 0 14px; }
.pp-handoff-stage { font-size: 13px; color: #d5e1d4; }
.pp-advice { margin: 18px auto 0; max-width: 480px; padding: 16px; border: 1px solid #9ba87b; border-radius: 14px; background: #0a2e22; text-align: start; line-height: 1.6; }
.pp-advice p { margin: 8px 0; }
.pp-help-best { display: flex; align-items: center; gap: 12px; }
.pp-help-toggle { margin-top: 18px; }
.pp-actions { position: relative; }
.pp-field { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 14px 0; }
.pp-field input, .pp-field select { max-width: 60%; width: 210px; padding: 8px; border-radius: 8px; }
.pp-replace { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.pp-error { color: #ffd1be; }
@media (max-width: 500px) {
  .pp-header { align-items: center; padding: 10px; gap: 8px; }
  .pp-controls { justify-content: flex-end; }
  .pp-controls .btn { padding: 10px; font-size: 13px; }
  .pp-main { padding: 12px; }
  .pp-private { padding: 18px 10px; }
  .pp-hand { max-width: 360px; gap: 5px; }
  .pp-screen .pp-hand .pp-tile { width: 44px; height: 61px; }
  .pp-public { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pp-screen *, .pp-screen *::before, .pp-screen *::after { animation: none !important; transition: none !important; } }