/* Poker Odds Calculator styles (v0.3.3) */
.poc-root {
  --poc-bg: #0e1116;
  --poc-surface: #151a22;
  --poc-text: #eef2f7;
  --poc-muted: #9aa4b2;
  --poc-accent: #1fa37e;
  --poc-danger: #e23d50;
  --poc-border: #263041;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  line-height: 1.3;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  max-width: 1100px;
  margin: 12px auto;
  background: var(--poc-bg);
  color: var(--poc-text);
  border: 1px solid var(--poc-border);
}

.poc-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.poc-brand { display:flex; align-items:center; gap:10px; }
.poc-brand .logo { width:36px; height:36px; border-radius:8px; background: url('../img/logo.png') center/contain no-repeat; background-color: var(--poc-surface); border:1px solid var(--poc-border); }
.poc-controls { display:flex; gap:8px; flex-wrap:wrap; }
.poc-button { background: var(--poc-surface); color: var(--poc-text); border:1px solid var(--poc-border); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight:600; }
.poc-button.primary { background: var(--poc-accent); border-color: var(--poc-accent); color: white; }
.poc-button.danger { background: var(--poc-danger); border-color: var(--poc-danger); color: white; }
.poc-button.ghost { background: transparent; }

.poc-layout { display:grid; grid-template-columns: 280px 1fr; gap: 16px; align-items:start; }
@media (max-width: 900px) { .poc-layout { grid-template-columns: 1fr; } }

/* Deck (desktop only) */
.poc-deck { border:1px solid var(--poc-border); border-radius:12px; padding:12px; }
.poc-deck h4 { margin:0 0 8px 0; font-size:14px; color: var(--poc-muted); }
.poc-deck-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.poc-suit-col { display:grid; grid-template-rows: repeat(13, 42px); gap:6px; }
.poc-card {
  border:1px solid var(--poc-border); border-radius:8px; background: var(--poc-surface);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; user-select:none; cursor:pointer;
  width: 32px; height: 42px;
}
.poc-card[data-suit="H"], .poc-card[data-suit="D"] { color: #e23d50; }
.poc-card[data-suit="S"], .poc-card[data-suit="C"] { color: #eaf1ff; }
.poc-card.assigned { opacity: .45; cursor:not-allowed; }

/* Table */
.poc-table { border:1px solid var(--poc-border); border-radius:12px; padding:12px; position:relative; min-height:520px; }
.poc-table-surface {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: clamp(280px, 70%, 780px);
  height: clamp(180px, 56%, 520px);
  background: radial-gradient(ellipse at center, #0b4d3b 0%, #073a2c 100%);
  border: 8px solid #2a3b2e; border-radius: 50% / 40%; box-shadow: inset 0 0 40px rgba(0,0,0,.5);
  z-index: 1;
}
.poc-seats { position:absolute; inset:0; z-index: 2; }
.poc-board { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:8px; z-index: 3; }

.poc-holecard { width:44px; height:60px; border-radius:8px; background: #10161f url('../img/logo.png') center/65% no-repeat;
  border:1px solid var(--poc-border); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.poc-holecard.faceup { background:none; }
.poc-holecard .clear { position:absolute; margin-left:28px; margin-top:-26px; background:var(--poc-danger); color:#fff; border:none; border-radius:6px; font-size:10px; padding:0 4px; cursor:pointer; }
.poc-selected { outline: 2px solid var(--poc-accent); outline-offset:2px; }

/* Seats around the table */
.poc-seat { position:absolute; width: 160px; }
.poc-seat .seat-card { background: var(--poc-surface); border:1px solid var(--poc-border); border-radius:12px; padding:8px; }
.poc-seat header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.poc-seat .actions { display:flex; gap:6px; }
.poc-seat .poc-holecards { display:flex; gap:6px; }
.poc-seat .poc-holecard { position:relative; }

/* Placeholder seats (Add Player buttons) */
.poc-seat-placeholder { position:absolute; width:160px; display:flex; align-items:center; justify-content:center; padding:8px; border:1px dashed var(--poc-border); border-radius:12px; background:transparent; color:var(--poc-muted); }
.poc-seat-placeholder .poc-button { width:100%; }

/* 9-max seat positions (tuned to avoid deck overlap) */
.poc-seat.pos-1 { left:50%; top:4%; transform:translate(-50%,0); }
.poc-seat.pos-2 { left:77%; top:12%; transform:translate(-50%,0); }
.poc-seat.pos-3 { left:90%; top:30%; transform:translate(-50%,0); }
.poc-seat.pos-4 { left:85%; top:58%; transform:translate(-50%,0); }
.poc-seat.pos-5 { left:65%; top:82%; transform:translate(-50%,0); }
.poc-seat.pos-6 { left:35%; top:82%; transform:translate(-50%,0); }
.poc-seat.pos-7 { left:15%; top:58%; transform:translate(-50%,0); }
.poc-seat.pos-8 { left:10%; top:30%; transform:translate(-50%,0); }
.poc-seat.pos-9 { left:23%; top:12%; transform:translate(-50%,0); }

/* Results area */
.poc-results-wrapper { margin-top:16px; position:relative; }
.poc-results-wrapper.hidden { display:none; }
.poc-results { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 900px) { .poc-results { grid-template-columns: 1fr; } }
.poc-table-simple { width:100%; border-collapse: collapse; }
.poc-table-simple th, .poc-table-simple td { border-bottom:1px solid var(--poc-border); padding:8px; font-size:13px; }
.poc-table-simple th { text-align:left; color: var(--poc-muted); font-weight:700; }
.poc-right { text-align:right; }
.poc-results-wrapper hr { border:0; border-top:1px solid var(--poc-border); margin: 8px 0 12px; }

/* Mobile player list & actions */
.poc-deck.desktop-only { display:block; }
.poc-mobile-list { display:none; margin-top: 12px; border:1px solid var(--poc-border); border-radius:12px; padding:12px; }
.poc-mobile-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--poc-border); }
.poc-mobile-row:last-child { border-bottom:none; }
.poc-mobile-row .name { font-weight:700; }
.poc-mobile-row .row-cards { display:flex; gap:6px; }
.poc-mobile-add { color: var(--poc-accent); cursor:pointer; font-weight:700; padding:10px 0; display:inline-block; }
.poc-actions-mobile { display:none; margin-top:12px; gap:8px; justify-content:flex-end; }

@media (max-width: 900px) {
  .poc-deck.desktop-only { display:none; }
  .poc-table { min-height: 420px; }
  .poc-seats { display:none; }
  .poc-mobile-list { display:block; }
  .poc-actions-mobile { display:flex; }
}

/* Modal card picker */
.poc-modal { position:fixed; inset:0; background: rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index: 9999; }
.poc-modal.open { display:flex; }
.poc-modal .box { background: var(--poc-bg); border:1px solid var(--poc-border); border-radius:14px; width: min(520px, 92vw); padding:14px; }
.poc-modal .box h4 { margin:0 0 8px; font-size:14px; color: var(--poc-muted); }
.poc-modal .suit-tabs { display:flex; gap:8px; margin: 8px 0; flex-wrap:wrap; }
.poc-modal .suit-tabs .tab { padding:6px 10px; border:1px solid var(--poc-border); background: var(--poc-surface); border-radius: 999px; cursor:pointer; }
.poc-modal .suit-tabs .tab.active { outline:2px solid var(--poc-accent); }
.poc-modal .cards { display:flex; gap:6px; margin-top:8px; overflow-x:auto; padding-bottom:6px; }
.poc-modal .cards .card { min-width:36px; height:48px; border:1px solid var(--poc-border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer; }
.poc-modal .cards .card[data-suit="H"], .poc-modal .cards .card[data-suit="D"] { color:#e23d50; }
.poc-modal .cards .card.assigned { opacity:.4; cursor:not-allowed; }
.poc-modal .footer { display:flex; justify-content:flex-end; margin-top:10px; }
.poc-modal .footer .done { color: var(--poc-accent); cursor:pointer; font-weight:800; }