<style>

/* POWERSPIN — μόνο ο πίνακας, χωρίς imports (system fonts) */

/* === RESET: ακυρώνει ό,τι έρχεται από άλλα stylesheets στον πίνακα ===
   Επαναφέρει τα στοιχεία στις προεπιλογές του browser, ώστε μετά να
   εφαρμοστούν ΜΟΝΟ οι δικοί μου κανόνες παρακάτω.
   (Σκόπιμα ΔΕΝ αγγίζει το allwyn banner, ώστε να κρατήσει το δικό σου CSS.) */
.pspin_table,
.pspin_table thead,
.pspin_table tbody,
.pspin_table tr,
.pspin_table th,
.pspin_table td,
.pspin_table .powerspin_number_css,
.pspin_table .powerspin_symbol{
  all:revert;
}

.pspin_table{
  --ps-card:#ffffff;
  --ps-text:#1a1d26;
  --ps-muted:#8b91a3;
  --ps-line:#eceef3;
  --ps-zebra:#f5f6fa;   /* εναλλασσόμενη γραμμή (πιο απαλό) */
  --ps-hover:#e9ecf4;   /* hover (λίγο πιο σκούρο από το zebra) */

  width:100%;          /* γεμίζει όλο το element που το περιέχει */
  max-width:100%;
  table-layout:fixed;  /* οι 4 στήλες μοιράζονται ίσα το πλάτος, χωρίς scroll */
  border-collapse:separate;
  border-spacing:0;
  background:var(--ps-card);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,25,40,.04), 0 10px 30px -18px rgba(20,25,40,.18);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:.95rem;
  color:var(--ps-text);
  -webkit-font-smoothing:antialiased;
}

.pspin_table *{box-sizing:border-box;}

/* Κεφαλίδα */
.pspin_table thead th{
  position:sticky; top:0; z-index:5;
  background:var(--ps-card);
  color:var(--ps-muted);
  font-weight:600;
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:15px 8px 12px;
  text-align:center;
  border-bottom:1px solid var(--ps-line);
}
.pspin_table thead th:first-child{text-align:left; padding-left:18px;}
.pspin_table thead th:last-child{padding-right:18px;}

/* Κελιά — οριζόντια γραμμή κάτω από κάθε γραμμή */
.pspin_table tbody td{
  padding:5px 8px;
  text-align:center;
  border-bottom:1px solid var(--ps-line);
  vertical-align:middle;
}

/* Zebra γραμμές (ξεκινάει από την 1η γραμμή) */
.pspin_table tbody tr:nth-child(odd) td{background:var(--ps-zebra);}
/* Hover (μπαίνει μετά το zebra ώστε να υπερισχύει) */
.pspin_table tbody tr:hover td{background:var(--ps-hover);}

/* Ώρα */
.pspin_table tbody td:first-child{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.82rem;
  color:var(--ps-muted);
  text-align:left;
  padding-left:18px;
  white-space:nowrap;
}

/* Στρογγυλό badge αριθμού (κρατάει τα inline χρώματα) */
.pspin_table .powerspin_number_css{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-weight:600;
  font-size:.82rem;
  line-height:1;
}

/* Ειδικό σύμβολο — εμφανίζει τη δική σου εικόνα */
.pspin_table .powerspin_symbol{
  display:inline-block;
  width:26px;
  height:26px;
  margin:0 auto;
  border-radius:50%;
  background-image:url("/images/power-spin-symbol-28.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Μ-Ζ / U-O */
.pspin_table tbody td:nth-child(3),
.pspin_table tbody td:nth-child(4){
  font-weight:700;
  font-size:.8rem;
  color:var(--ps-text);
}

/* Πολύ στενές οθόνες */
@media (max-width:340px){
  .pspin_table{font-size:.88rem;}
  .pspin_table tbody td{padding:4px 5px;}
  .pspin_table tbody td:first-child,
  .pspin_table thead th:first-child{padding-left:13px;}
  .pspin_table .powerspin_number_css,
  .pspin_table .powerspin_symbol{width:24px; height:24px;}
}

</style>
