/* ==========================================================
   calcme.gr — Playful homepage (playful.html μόνο)
   Φορτώνεται ΜΕΤΑ το home.css. Δεν αγγίζει τις σελίδες των υπολογιστών.
   ========================================================== */

.hp-hero {
  --kc-ink: #16161d;
  --kc-face: #f6f6f8;
  --kc-side: #cfcfd8;
  --pc-body: #1c1c24;
  --pc-lcd: #e6edd3;
  --pc-lcd-ink: #1f2a12;
  --eq-face: #c600f0;
  --eq-side: #7f009c;
}

/* Χρώματα πλήκτρων ανά κατηγορία */
.hp-c-blue   { --kc-face: #3b82f6; --kc-side: #1d4ed8; --kc-ink: #fff; }
.hp-c-green  { --kc-face: #10b981; --kc-side: #047857; --kc-ink: #fff; }
.hp-c-orange { --kc-face: #f97316; --kc-side: #c2410c; --kc-ink: #fff; }
.hp-c-pink   { --kc-face: #ec4899; --kc-side: #be185d; --kc-ink: #fff; }
.hp-c-violet { --kc-face: #8b5cf6; --kc-side: #6d28d9; --kc-ink: #fff; }

/* ---------- Hero: διάταξη ---------- */
.hp-hero { isolation: isolate; }

.hm-hero .hero-inner.hp-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  padding-bottom: 0.5rem;
}

.hp-calc {
  margin: 1rem auto 0;
  max-width: 26rem;
}

@media (min-width: 1024px) {
  .hm-hero .hero-inner.hp-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: 3.5rem;
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    text-align: left;
  }
  .hp-text .hero-title { font-size: 2.75rem; text-wrap: balance; }
  .hp-text .hero-subtitle { margin-left: 0; margin-right: 0; }
  .hp-text .search-wrap { max-width: 36rem; }
  .hp-text .hm-quick { align-items: flex-start; }
  .hp-text .hm-quick-row { justify-content: flex-start; }
  .hp-calc { margin: 0; max-width: none; justify-self: end; width: 20.5rem; }
}

/* ---------- Η αριθμομηχανή ---------- */
.pc {
  position: relative;
  background: var(--pc-body);
  border-radius: 1.75rem;
  padding: 1.125rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 32px 60px -30px rgba(28, 22, 60, 0.6),
    0 14px 24px -18px rgba(28, 22, 60, 0.45);
}
@media (min-width: 1024px) {
  .pc { transform: rotate(2.5deg); }
}

.pc-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 5.25rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.875rem;
  background: var(--pc-lcd);
  color: var(--pc-lcd-ink);
  box-shadow: inset 0 2px 6px rgba(31, 42, 18, 0.25);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.pc-expr {
  min-height: 1.1em;
  font-size: 0.8125rem;
  opacity: 0.7;
  white-space: nowrap;
}
.pc-out {
  display: block;
  font-size: 2.375rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pc-out.is-long { font-size: 1.625rem; }
.hp-calc.is-result .pc-out { animation: pc-pop 0.32s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes pc-pop {
  from { transform: scale(0.94); opacity: 0.5; }
  to   { transform: none; opacity: 1; }
}

.pc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin-top: 1rem;
}

.pc-k {
  height: 3.125rem;
  border: 0;
  border-radius: 0.875rem;
  background: var(--kc-face);
  color: var(--kc-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 0 var(--kc-side),
    0 9px 14px -8px rgba(0, 0, 0, 0.55);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.pc-k--fn { --kc-face: #3a3a46; --kc-side: #23232b; --kc-ink: #fff; }
.pc-k--eq {
  grid-column: 4;
  grid-row: 4 / span 2;
  height: auto;
  --kc-face: var(--eq-face);
  --kc-side: var(--eq-side);
  --kc-ink: #fff;
  font-size: 1.625rem;
}
.pc-k--zero { grid-column: span 2; }

@media (hover: hover) and (pointer: fine) {
  .pc-k:hover { filter: brightness(1.06); }
}
.pc-k:active,
.pc-k.is-down {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 var(--kc-side),
    0 3px 6px -4px rgba(0, 0, 0, 0.5);
}
.pc-k:focus-visible,
.pc-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pc-note {
  margin: 0.875rem 0.25rem 0.125rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #b4b4c2;
}

.pc-toggle { display: none; }

/* Κινητό / tablet: μόνο η «οθόνη», τα πλήκτρα ανοίγουν με κουμπί */
@media (max-width: 1023px) {
  .pc { padding: 0.5rem; border-radius: 1.125rem; }
  .pc-screen { min-height: 3.75rem; padding: 0.5rem 0.75rem 0.5rem 6rem; }
  .pc-out { font-size: 1.625rem; }
  .pc-out.is-long { font-size: 1.25rem; }
  .pc-keys { display: none; margin-top: 0.5rem; gap: 0.5rem; }
  .pc.is-open .pc-keys { display: grid; }
  .pc-k { height: 3rem; }
  .pc-note { display: none; }
  .pc.is-open .pc-note { display: block; margin: 0.625rem 0.25rem 0.25rem; }
  /* Κλειστή: όλη η οθόνη πατιέται και ανοίγει τα πλήκτρα. Ανοιχτή: μικρό κουμπί «Κλείσιμο». */
  .pc-screen { cursor: pointer; }
  .pc-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: absolute;
    inset: 0;
    padding: 0 0.75rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--pc-lcd-ink);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pc-toggle svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
  .pc-toggle-label {
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--pc-body);
    color: #fff;
    box-shadow: 0 3px 0 #000, 0 6px 10px -6px rgba(0, 0, 0, 0.5);
    transition: transform 90ms ease-out, box-shadow 90ms ease-out;
  }
  .pc-toggle svg { order: 2; opacity: 0.55; }
  .pc-toggle:active .pc-toggle-label { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
  .pc-toggle:focus-visible { outline-offset: -3px; outline-color: var(--pc-lcd-ink); }
  .pc.is-open .pc-toggle { inset: 50% auto auto 0.5rem; transform: translateY(-50%); padding: 0; height: auto; }
  .pc.is-open .pc-toggle svg { display: none; }
  .pc.is-open .pc-screen { cursor: default; }
}

/* ---------- Πλήκτρα που αιωρούνται (βάθος) ---------- */
.hp-layers {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hp-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.hp-cap {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28%;
  background: var(--kc-face);
  color: var(--kc-ink);
  font-family: var(--font-display);
  font-weight: 800;
  transform: rotate(var(--r));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 0 var(--kc-side),
    0 12px 18px -10px rgba(28, 22, 60, 0.45);
}
.hp-cap--s { width: 2.25rem; height: 2.25rem; font-size: 0.9375rem; opacity: 0.45; filter: blur(1.5px); }
.hp-cap--m { width: 3rem;    height: 3rem;    font-size: 1.25rem;  opacity: 0.85; filter: blur(0.4px); }
.hp-cap--l { width: 4rem;    height: 4rem;    font-size: 1.75rem; }

@media (max-width: 1023px) {
  .hp-layer--front { display: none; }
  .hp-layer--mid .hp-cap { opacity: 0.35; filter: blur(1px); }
}
@media (max-width: 639px) {
  .hp-layer--mid { display: none; }
  .hp-cap--s { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .pc { transform: none; }
  .pc-k { transition: none; }
  .hp-calc.is-result .pc-out { animation: none; }
}

@media print {
  .hp-layers { display: none !important; }
}