/* ==========================================================================
   GoPickaro — theme.css
   Η μοναδική πηγή για χρώματα, υφές φόντου και το κύριο κουμπί.
   Κάθε σελίδα το φορτώνει ΠΡΙΝ από το δικό της <style>, ώστε η σελίδα να
   μπορεί να παρακάμψει ό,τι χρειάζεται.

   Πηγές υφών (uiverse.io, άδεια MIT), προσαρμοσμένες στα χρώματά μας:
     .gp-texture  <- ugly-squid-22     (στατικό, γενικό φόντο)
     .gp-stage    <- nice-seahorse-4   (κινούμενο, μόνο πίσω από εργαλεία)
     .gp-mesh     <- smart-wolverine-3 (στατικό, σελίδες με πολύ κείμενο)
     .gpb         <- thin-owl-11       (κουμπί κύριας ενέργειας)
   ========================================================================== */

:root{
  /* βάση */
  --bg:          #0c0f12;
  --bg-deep:     #06080a;
  --panel:       rgba(255,255,255,.03);
  --panel-solid: #12181f;
  --border:      rgba(255,255,255,.08);

  /* κείμενο */
  --text:  #f1f5f9;
  --text2: #94a3b8;
  --text3: #64748b;

  /* τονισμοί */
  --accent:      #38bdf8;
  --accent-deep: #0284c7;
  --accent-dark: #075985;
  --accent2:     #a8eddf;
  --gold:        #facc15;

  /* σημασιολογικά */
  --ok:     #4ade80;
  --warn:   #fbbf24;
  --danger: #f87171;

  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   1. Γενική υφή φόντου. Ένα tile 60px, καμία κίνηση, πρακτικά μηδέν κόστος.
   Χωρίς background-attachment:fixed, γιατί σε κινητό προκαλεί
   επανασχεδίαση σε κάθε κύλιση.
   -------------------------------------------------------------------------- */
.gp-texture{
  background-color: var(--bg);
  background-image: linear-gradient(32deg, rgba(3,6,9,.78) 30px, transparent);
  background-size: 60px 60px;
  background-position: -5px -5px;
}

/* --------------------------------------------------------------------------
   2. Σκηνή εργαλείου. Πλέγμα με βινιέτα που σκουραίνει τις άκρες και
   τραβάει το μάτι στο κέντρο. Μπαίνει ΜΟΝΟ γύρω από το εργαλείο,
   ποτέ σε ολόκληρη τη σελίδα.
   -------------------------------------------------------------------------- */
.gp-stage{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at center, transparent 28%, var(--bg-deep) 92%),
    linear-gradient(rgba(56,189,248,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.10) 1px, transparent 1px),
    linear-gradient(rgba(168,237,223,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,237,223,.05) 1px, transparent 1px);
  background-size: 100% 100%, 60px 60px, 60px 60px, 20px 20px, 20px 20px;
  animation: gp-drift 30s linear infinite;
}
@keyframes gp-drift{
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 60px 60px, 60px 60px, 40px 40px, 40px 40px; }
}

/* --------------------------------------------------------------------------
   3. Πλούσια υφή για σελίδες με πολύ κείμενο.
   ΠΡΟΣΟΧΗ: στον πρωτότυπο κώδικα τα ψευδοστοιχεία είχαν z-index 1 και 2,
   δηλαδή κάθονταν ΠΑΝΩ από το κείμενο. Εδώ είναι -1 μέσα σε δικό τους
   στρώμα (isolation:isolate), οπότε το κείμενο μένει καθαρό.
   -------------------------------------------------------------------------- */
.gp-mesh{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(168,237,223,.055) 1px, transparent 0),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 0),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 40px 40px, 20px 20px, 20px 20px;
}
.gp-mesh::before,
.gp-mesh::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.gp-mesh::before{
  background: repeating-linear-gradient(45deg, transparent, transparent 10px,
              rgba(255,255,255,.028) 10px, rgba(255,255,255,.028) 20px);
}
.gp-mesh::after{
  background: radial-gradient(circle, rgba(56,189,248,.07) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .6;
}

/* --------------------------------------------------------------------------
   4. Κουμπί κύριας ενέργειας. Ένα ανά σελίδα, στη σημαντικότερη ενέργεια.
   Δομή:
     <button type="button" class="gpb gpb--sky">
       <div class="gpb-top">Spin</div>
       <div class="gpb-bottom"></div>
       <div class="gpb-base"></div>
     </button>
   -------------------------------------------------------------------------- */
.gpb{
  -webkit-appearance: none; appearance: none;
  position: relative;
  isolation: isolate;   /* δικό του στρώμα: τα κάτω κομμάτια (z-index -1/-2) δεν χάνονται πίσω από το φόντο της σελίδας */
  border-width: 0;
  padding: 0 8px 12px;
  min-width: 11em;
  box-sizing: border-box;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.gpb[disabled]{ cursor: default; opacity: .55; }
/* Ως <a>: χωρίς υπογράμμιση και με σωστό κουτί γύρω από τα απόλυτα παιδιά. */
a.gpb{ display: inline-block; text-decoration: none; }
/* Αν το κουμπί γίνει flex (π.χ. display:inline-flex από JavaScript), η πάνω όψη πιάνει όλο το πλάτος. */
.gpb > .gpb-top{ flex: 1 1 auto; }
.gpb-top svg{ flex: none; }

.gpb-top{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; z-index: 0;
  padding: 11px 20px;
  transform: translateY(0);
  text-align: center;
  font-family: var(--font);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* ψηφία ίδιου πλάτους: οι μετρητές δεν αλλάζουν το πλάτος */
  transition-property: transform;
  transition-duration: .2s;
  -webkit-user-select: none; user-select: none;
}
.gpb:not([disabled]):active .gpb-top,
.gpb.is-held .gpb-top{ transform: translateY(6px); }

.gpb-top::after{
  content: '';
  position: absolute; z-index: -1;
  border-radius: 5px;
  width: 100%; height: 100%;
  box-sizing: content-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px 1px rgba(255,255,255,.18);
  transition-property: border-radius, padding;
  transition-duration: .2s;
}
.gpb:not([disabled]):active .gpb-top::after{ border-radius: 7px; padding: 0 2px; }

.gpb-bottom{
  position: absolute; z-index: -1;
  bottom: 4px; left: 4px;
  border-radius: 8px / 16px 16px 8px 8px;
  padding-top: 6px;
  width: calc(100% - 8px); height: calc(100% - 10px);
  box-sizing: content-box;
  background-image:
    radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255,255,255,.25), transparent),
    radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255,255,255,.25), transparent),
    radial-gradient(16px at -4px 0, rgba(255,255,255,.9), transparent),
    radial-gradient(16px at calc(100% + 4px) 0, rgba(255,255,255,.9), transparent);
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.5), inset 0 -1px 3px 3px rgba(0,0,0,.4);
  transition-property: border-radius, padding-top;
  transition-duration: .2s;
}
.gpb:not([disabled]):active .gpb-bottom{ border-radius: 10px 10px 8px 8px / 8px; padding-top: 0; }

.gpb-base{
  position: absolute; z-index: -2;
  top: 4px; left: 0;
  border-radius: 12px;
  width: 100%; height: calc(100% - 4px);
  background-color: rgba(0,0,0,.18);
  box-shadow: 0 1px 1px 0 rgba(255,255,255,.55), inset 0 2px 2px rgba(0,0,0,.25);
}

/* Ορατή εστίαση πληκτρολογίου. Λείπει εντελώς από τον πρωτότυπο κώδικα. */
.gpb:focus-visible{ outline: none; }
.gpb:focus-visible .gpb-top::after{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22),
              0 0 0 3px var(--bg),
              0 0 0 6px var(--accent2);
}

/* Παραλλαγές. Στα ανοιχτά χρώματα τα γράμματα είναι σκούρα, αλλιώς
   δεν διαβάζονται. Μόνο η γκρι παραλλαγή κρατάει άσπρα. */
.gpb--sky .gpb-top{ color:#04222f; text-shadow:0 1px rgba(255,255,255,.25); }
.gpb--sky .gpb-top::after{ background-image: radial-gradient(var(--accent), var(--accent-deep)); }
.gpb--sky .gpb-bottom{ background-color: var(--accent-dark); }

.gpb--mint .gpb-top{ color:#08302a; text-shadow:0 1px rgba(255,255,255,.3); }
.gpb--mint .gpb-top::after{ background-image: radial-gradient(var(--accent2), #5fc9b5); }
.gpb--mint .gpb-bottom{ background-color:#2b6f62; }

.gpb--gold .gpb-top{ color:#3a2a02; text-shadow:0 1px rgba(255,255,255,.3); }
.gpb--gold .gpb-top::after{ background-image: radial-gradient(#fcd34d, #d99e06); }
.gpb--gold .gpb-bottom{ background-color:#78560a; }

.gpb--ghost .gpb-top{ color:var(--text); text-shadow:0 -1px rgba(0,0,0,.4); }
.gpb--ghost .gpb-top::after{ background-image: radial-gradient(#2b3543, #1b2330); }
.gpb--ghost .gpb-bottom{ background-color:#0d131b; }

.gpb--violet .gpb-top{ color:#221250; text-shadow:0 1px rgba(255,255,255,.3); }
.gpb--violet .gpb-top::after{ background-image: radial-gradient(#c4b5fd, #8b5cf6); }
.gpb--violet .gpb-bottom{ background-color:#4c1d95; }

.gpb--white .gpb-top{ color:#0f172a; text-shadow:0 1px rgba(255,255,255,.6); }
.gpb--white .gpb-top::after{ background-image: radial-gradient(#ffffff, #cbd5e1); }
.gpb--white .gpb-bottom{ background-color:#64748b; }

.gpb--red .gpb-top{ color:#fff; text-shadow:0 -1px rgba(0,0,0,.35); }
.gpb--red .gpb-top::after{ background-image: radial-gradient(#f87171, #dc2626); }
.gpb--red .gpb-bottom{ background-color:#7f1d1d; }

/* Χρώμα λάμψης ανά παραλλαγή, για την κατάσταση «τρέχει» */
.gpb--sky   { --gpb-glow: rgba(56,189,248,.6); }
.gpb--mint  { --gpb-glow: rgba(168,237,223,.65); }
.gpb--violet{ --gpb-glow: rgba(196,181,253,.65); }
.gpb--gold  { --gpb-glow: rgba(251,191,36,.65); }
.gpb--red   { --gpb-glow: rgba(248,113,113,.6); }

/* --------------------------------------------------------------------------
   Δευτερεύον κουμπί (.gpb--sm): ίδια κατασκευή, ύψος περίπου 36px.
   Για Copy, Print, Reset, Cancel και κουμπιά μέσα σε φόρμες.
   -------------------------------------------------------------------------- */
.gpb--sm{ padding: 0 5px 8px; min-width: 0; }
.gpb--sm .gpb-top{ padding: 6px 14px; font-size: .85rem; gap: 6px; }
.gpb--sm .gpb-top::after{ border-radius: 4px; }
.gpb--sm:not([disabled]):active .gpb-top,
.gpb--sm.is-held .gpb-top{ transform: translateY(4px); }
.gpb--sm:not([disabled]):active .gpb-top::after{ border-radius: 6px; padding: 0 1px; }
.gpb--sm .gpb-bottom{
  bottom: 3px; left: 3px;
  width: calc(100% - 6px); height: calc(100% - 8px);
  padding-top: 4px;
  border-radius: 6px / 12px 12px 6px 6px;
  background-image:
    radial-gradient(3px 6px at 3px calc(100% - 6px), rgba(255,255,255,.25), transparent),
    radial-gradient(3px 6px at calc(100% - 3px) calc(100% - 6px), rgba(255,255,255,.25), transparent),
    radial-gradient(11px at -3px 0, rgba(255,255,255,.9), transparent),
    radial-gradient(11px at calc(100% + 3px) 0, rgba(255,255,255,.9), transparent);
}
.gpb--sm:not([disabled]):active .gpb-bottom{ border-radius: 8px 8px 6px 6px / 6px; padding-top: 0; }
.gpb--sm .gpb-base{ top: 3px; height: calc(100% - 3px); border-radius: 9px; }
.gpb--sm:focus-visible .gpb-top::after{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 2px var(--bg), 0 0 0 5px var(--accent2);
}

/* --------------------------------------------------------------------------
   Μικρό κουμπί (.gpb--mini): ίδια κατασκευή σε μικρότερη κλίμακα,
   π.χ. τα − / + κάτω από τον μετρητή του τροχού. Ύψος 20px.
   -------------------------------------------------------------------------- */
.gpb--mini{ padding: 0 3px 6px; min-width: 0; }
.gpb--mini .gpb-top{ height: 14px; padding: 0; font-size: .8rem; line-height: 1; }
.gpb--mini .gpb-top::after{ border-radius: 4px; }
.gpb--mini:not([disabled]):active .gpb-top,
.gpb--mini.is-held .gpb-top{ transform: translateY(3px); }
.gpb--mini:not([disabled]):active .gpb-top::after{ border-radius: 5px; padding: 0 1px; }
.gpb--mini .gpb-bottom{
  bottom: 2px; left: 2px;
  width: calc(100% - 4px); height: calc(100% - 6px);
  padding-top: 3px;
  border-radius: 5px / 8px 8px 5px 5px;
  background-image:
    radial-gradient(8px at -2px 0, rgba(255,255,255,.9), transparent),
    radial-gradient(8px at calc(100% + 2px) 0, rgba(255,255,255,.9), transparent);
}
.gpb--mini:not([disabled]):active .gpb-bottom{ border-radius: 6px 6px 5px 5px / 4px; padding-top: 0; }
.gpb--mini .gpb-base{ top: 2px; height: calc(100% - 2px); border-radius: 7px; }
.gpb--mini:focus-visible .gpb-top::after{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 2px var(--bg), 0 0 0 4px var(--accent2);
}

/* --------------------------------------------------------------------------
   Ετικέτα μετρητή μέσα σε κουμπί (π.χ. «10×»). Το JavaScript της σελίδας
   κλειδώνει το αρχικό πλάτος, ώστε στο «9×» να μην κουνιούνται τα διπλανά.
   -------------------------------------------------------------------------- */
.gpb .lbl{ display: inline-block; text-align: right; }

/* --------------------------------------------------------------------------
   Κατάσταση «τρέχει» (.multispin-active): παλλόμενη λάμψη, μισοπατημένο.
   -------------------------------------------------------------------------- */
.gpb::before{
  content: '';
  position: absolute; z-index: -3;
  inset: -2px 2px 6px;
  border-radius: 14px;
  opacity: 0;
  box-shadow: 0 0 26px 4px var(--gpb-glow, rgba(56,189,248,.6));
  pointer-events: none;
}
.gpb.multispin-active::before{ animation: gpb-glow 1.4s ease-in-out infinite; }
.gpb.multispin-active .gpb-top{ transform: translateY(3px); }
@keyframes gpb-glow{ 0%,100%{ opacity: .25; } 50%{ opacity: 1; } }

/* --------------------------------------------------------------------------
   Σήμα GoPickaro (μικρός διπλός τροχός) και λέξη «GoPickaro».
   Ίδιο με το .gp-mark του navbar.js, για τις σελίδες κειμένου που δεν το φορτώνουν.
   -------------------------------------------------------------------------- */
.gp-mark{
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; position: relative; display: inline-block;
  background: conic-gradient(#7dd3fc 0 45deg, #a8eddf 0 90deg, #c4b5fd 0 135deg, #fcd34d 0 180deg,
                             #fda4af 0 225deg, #fdba74 0 270deg, #a5b4fc 0 315deg, #f9a8d4 0 360deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.5);
}
.gp-mark::before{ content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(#273449, #1e293b); box-shadow: 0 0 0 2px #9aa4b2; }
.gp-mark::after{ content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 6px rgba(252,211,77,.8); }
.gp-word{ font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); line-height: 1; }
.gp-word b{ font-weight: 800; color: var(--accent2); }

/* --------------------------------------------------------------------------
   5. Σεβασμός στη ρύθμιση «λιγότερη κίνηση» του λειτουργικού.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .gp-stage{ animation: none; }
  .gpb-top, .gpb-top::after, .gpb-bottom{ transition-duration: 0s; }
  .gpb.multispin-active::before{ animation: none; opacity: .8; }
}

/* AdSense: κρύβουμε κενές θέσεις και το «Discover more» (σχετικές αναζητήσεις σε θέση χωρίς διαφήμιση).
   Να ξαναδούμε όταν εγκριθεί ο ιστότοπος. */
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="unfill-optimized"]{display:none!important}