/* The see-through pokie (/pokies/see-through). The cabinet is dark in both themes, like a machine. */
.pk-cabinet {
  background: var(--band-hero);
  color: var(--on-hero);
  border-radius: var(--radius);
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
}
.pk-top { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between; }
.pk-k { color: var(--on-hero-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
#pk-credit { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.pk-bet { display: flex; gap: 0.5rem; align-items: center; }
.pk-bet select { font: inherit; padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid #3a4c7a; background: #0d1630; color: #fff; }

.pk [hidden] { display: none !important; }
.pk-reels { width: 100%; max-width: 640px; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; background: #0a1020; border-radius: 8px; padding: 0.5rem; outline-offset: 3px; }
.pk-reel { display: grid; gap: 0.4rem; }
.pk-cell {
  display: grid; place-items: center; aspect-ratio: 1 / 0.82; border-radius: 6px;
  background: #f4f1e8; color: #1c2230; font-weight: 800; font-size: clamp(1rem, 4.2vw, 2rem);
  font-variant-numeric: tabular-nums; transition: box-shadow 0.15s;
}
.pk-cell[data-s="9"], .pk-cell[data-s="10"] { color: #46566e; }
.pk-cell[data-s="J"], .pk-cell[data-s="Q"] { color: #2456c7; }
.pk-cell[data-s="K"], .pk-cell[data-s="A"] { color: #7b3fbf; }
.pk-cell[data-s="star"] { color: #c27c0e; }
.pk-cell[data-s="diamond"] { color: #0e8a8a; }
.pk-cell[data-s="seven"] { color: #d1342f; font-size: clamp(1.2rem, 5vw, 2.4rem); }
.pk-cell[data-s="wild"] { background: #2b1b4d; color: #ffd76a; font-size: clamp(0.65rem, 2.4vw, 1rem); letter-spacing: 0.04em; }
.pk-cell.hit { box-shadow: 0 0 0 3px #ffd76a, 0 0 14px #ffd76a; }
.pk-xr { display: none; text-align: center; font-size: 0.75rem; color: var(--on-hero-muted); }
.xray .pk-xr { display: block; }
.xray .pk-cell[data-s="seven"] { box-shadow: inset 0 0 0 3px #d1342f; }
.xray .pk-cell.hit[data-s="seven"] { box-shadow: inset 0 0 0 3px #d1342f, 0 0 0 3px #ffd76a; }

.pk-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pk-spin { min-width: 9rem; font-size: 1.1rem; }
.pk-actions .btn:not(.primary) { background: transparent; color: var(--on-hero); border-color: #3a4c7a; }
.pk-actions .btn[aria-pressed="true"] { background: #ffd76a; color: #13203f; border-color: #ffd76a; }
.pk-actions .ui-icon { margin-right: 0.3rem; }

.pk-says { margin: 1rem 0 0; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); min-height: 5.2rem; }
.pk-says p { margin: 0.4rem 0 0; }
.pk-tag { display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--tag-bg); color: var(--tag-text); }
.pk-tag[data-kind="loss"], .pk-tag[data-kind="near"] { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }
.pk-tag[data-kind="ldw"] { background: #ffd76a; color: #4a3500; }
.pk-tag[data-kind="win"], .pk-tag[data-kind="even"] { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }

.pk-xray-panel { margin-top: 1rem; padding: 1rem; border: 2px dashed #d1342f; border-radius: var(--radius); }
.pk-xray-panel h3 { margin-top: 0; }
.pk-table { border-collapse: collapse; margin: 0.5rem 0; font-variant-numeric: tabular-nums; }
.pk-table th, .pk-table td { padding: 0.3rem 0.7rem; border-bottom: 1px solid var(--grid); text-align: right; }
.pk-table .l { text-align: left; }

.pk-tally { margin-top: 1rem; }
.pk-tally h3 { margin: 0 0 0.5rem; }
#pk-net.loss, #pk-ff-net { color: var(--error); }
#pk-net.gain { color: var(--ok); }
.pk-ff-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pk-ff { margin-top: 1rem; }
.pk-chart { width: 100%; height: auto; max-height: 220px; display: block; margin-top: 0.75rem; }
.pk-chart .zero { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; }
.pk-chart .bal { fill: none; stroke: var(--error); stroke-width: 2; stroke-linejoin: round; }
.pk-chart text { fill: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .pk-cabinet { padding: 0.6rem; }
  .pk-reels { gap: 0.25rem; padding: 0.3rem; }
  .pk-reel { gap: 0.25rem; }
  .pk-spin { flex: 1; }
}