/* Tema pixel a paginii clasice: aceeași lume ca în camera 3D.
   Se încarcă doar pe clasic.html, după styles.css; restul site-ului rămâne neschimbat. */

:root { --px-edge: #070910; --px-ring: #3a4266; --px-tile-a: #3a4266; --px-tile-b: #2a3050; }
[data-theme="light"] { --px-edge: #1f2433; --px-ring: #b9c0d6; --px-tile-a: #c9cfe0; --px-tile-b: #b4bbd0; }

/* rame pixelate: un contur dublu și o umbră în trepte, fără colțuri rotunjite */
.btn, .tech-group, .tech-list li, .contact-links a, .nav-room, .nav-btn {
  border-radius: 0 !important;
}
.btn {
  box-shadow: 0 0 0 3px var(--px-ring), 6px 6px 0 3px var(--px-edge);
  transition: transform .12s steps(2), box-shadow .12s steps(2), background .2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 0 0 0 3px var(--px-ring), 8px 8px 0 3px var(--px-edge); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 3px var(--px-ring); }
.btn-primary:hover { box-shadow: 0 0 0 3px var(--px-ring), 8px 8px 0 3px var(--px-edge); }

/* eticheta pixelată de deasupra fiecărui titlu de secțiune (fără diacritice: fontul nu le are) */
.section-title::before {
  content: attr(data-px);
  display: block;
  font: 10px/1 "Press Start 2P", monospace;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 14px;
}
html[lang="en"] .section-title::before { content: attr(data-px-en); }
.section-title::after { border-radius: 0; height: 4px; width: 36px; box-shadow: 8px 0 0 var(--accent); background: var(--accent); }

/* tehnologiile: casete și „jetoane” pătrate */
.tech-group { box-shadow: 0 0 0 2px var(--px-ring); padding: 16px 18px; }
.tech-list li { border: 0; box-shadow: inset 0 0 0 2px var(--px-ring); }

/* podeaua de sub prezentare, pe care se plimbă personajul */
.hero-podea {
  position: absolute; left: 0; right: 0; bottom: 9vh; height: 12px; z-index: 1;
  background: repeating-linear-gradient(90deg, var(--px-tile-a) 0 12px, var(--px-tile-b) 12px 24px);
}
.hero-erou {
  position: absolute; bottom: calc(9vh + 12px); left: 0; z-index: 2;
  width: 76px; height: 140px; image-rendering: pixelated; cursor: pointer;
}

/* cardurile intră pe rând, în pași, ca obiectele dintr-un inventar */
.reveal .project-card, .reveal .mini-card, .reveal .idea-card, .reveal .tech-group {
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .3s steps(4), transform .3s steps(4);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-visible .project-card, .reveal.is-visible .mini-card, .reveal.is-visible .idea-card, .reveal.is-visible .tech-group {
  opacity: 1; transform: none;
}

@media (max-width: 760px) {
  .hero-podea { bottom: 5vh; }
  .hero-erou { bottom: calc(5vh + 12px); width: 48px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .reveal .project-card, .reveal .mini-card, .reveal .idea-card, .reveal .tech-group { transition: none; }
}

/* ===== A. Cardurile, în aceeași limbă ca butoanele ===== */
/* ramă pătrată groasă în culoarea proiectului + umbră în trepte; fără chenarul subțire de dedesubt */
.project-card.pixel-card, .mini-card.pixel-card {
  border: 0;
  box-shadow: 0 0 0 4px var(--ic-1), 0 0 0 7px var(--px-edge), 9px 9px 0 7px var(--px-edge);
  transition: transform .14s steps(2), box-shadow .14s steps(2);
}
.project-card.pixel-card:hover, .mini-card.pixel-card:hover,
[data-theme="light"] .project-card.pixel-card:hover, [data-theme="light"] .mini-card.pixel-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 0 0 0 4px var(--ic-1), 0 0 0 7px var(--px-edge), 12px 12px 0 7px var(--px-edge);
}
[data-theme="light"] .project-card.pixel-card, [data-theme="light"] .mini-card.pixel-card {
  box-shadow: 0 0 0 4px var(--ic-1), 0 0 0 7px var(--px-edge), 9px 9px 0 7px var(--px-edge);
}
/* banda de sus: model de pixeli în șah, ca la jocurile vechi, în loc de dungi */
.pixel-banner {
  background:
    repeating-conic-gradient(rgba(0, 0, 0, .2) 0 25%, transparent 0 50%) 0 0 / 8px 8px,
    linear-gradient(180deg, color-mix(in srgb, var(--ic-frame) 55%, #2d2d3d), var(--ic-frame));
  border-bottom: 4px solid var(--px-edge);
}
/* iconița prinde viață când treci peste card */
.pixel-icon { transition: transform .2s steps(3); }
.theme-coin:hover .pixel-icon, .theme-faded-coin:hover .pixel-icon { animation: px-moneda .9s steps(6) infinite; }
.theme-flower:hover .pixel-icon { animation: px-floare 1s steps(4) infinite alternate; }
.theme-cross:hover .pixel-icon { animation: px-sclipire 1.2s steps(4) infinite; }
.theme-chart:hover .pixel-icon { animation: px-salt .7s steps(3) infinite alternate; }
.theme-portal:hover .pixel-icon { animation: px-portal 1.4s steps(6) infinite; }
.theme-moon:hover .pixel-icon { animation: px-salt 1.2s steps(3) infinite alternate; }
@keyframes px-moneda { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
@keyframes px-floare { to { transform: scale(1.18); } }
@keyframes px-sclipire { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.8) drop-shadow(0 0 6px var(--ic-glow)); } }
@keyframes px-salt { to { transform: translateY(-4px); } }
@keyframes px-portal { 0% { filter: hue-rotate(0) brightness(1); } 50% { filter: hue-rotate(-40deg) brightness(1.5) drop-shadow(0 0 8px var(--ic-glow)); } 100% { filter: hue-rotate(0) brightness(1); } }
/* „LIVE” / „ARHIVĂ” ca jeton pixelat */
.pixel-card .project-badge { border-radius: 0; box-shadow: 0 0 0 2px var(--px-edge), 3px 3px 0 2px var(--px-edge); }
/* „Detalii și funcții”: buton pixelat, cu o săgeată care se rotește când îl deschizi */
.pixel-card .feature-details { border-radius: 0; box-shadow: 0 0 0 2px var(--px-ring); border: 0; }
.pixel-card .feature-summary::after, .pixel-card .feature-details[open] .feature-summary::after {
  content: '\25B6'; font-size: .7em; transition: transform .2s steps(2);
}
.pixel-card .feature-details[open] .feature-summary::after { transform: rotate(90deg); }
/* pătrățelul de dinaintea datei, ca la logo */
.pixel-card .project-meta::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; background: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .pixel-icon, .pixel-card:hover .pixel-icon { animation: none !important; }
  .project-card.pixel-card, .mini-card.pixel-card { transition: none; }
}

/* ===== B. Funia pe care coboară personajul ===== */
.px-funie {
  position: absolute; z-index: 5; width: 6px; margin-left: -3px; pointer-events: none;
  background: repeating-linear-gradient(160deg, #c49a64 0 4px, #8a5a36 4px 8px);
  box-shadow: 0 0 0 2px var(--px-edge);
}
.px-nod {
  position: absolute; left: 50%; width: 16px; height: 10px; margin-left: -8px;
  background: #a87a4a; box-shadow: 0 0 0 2px var(--px-edge), inset 0 -3px 0 #7a5233;
}
.px-iarba {
  position: absolute; z-index: 5; width: 100px; height: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #4f9a3a 0 6px, #3d7f2e 6px 12px);
  box-shadow: 0 0 0 2px var(--px-edge), 0 -4px 0 -1px #5fae45;
}
.px-urcator {
  position: fixed; left: 0; top: 0; z-index: 6; width: 54px; height: 100px;
  image-rendering: pixelated; cursor: pointer; visibility: hidden;
}
html[data-funie="mediu"] .px-urcator { width: 42px; height: 78px; }
html[data-funie="mic"] .px-urcator { width: 28px; height: 52px; }
html[data-funie="mic"] .px-funie { width: 4px; margin-left: -2px; }
html[data-funie="mic"] .px-nod { width: 10px; height: 6px; margin-left: -5px; }
html[data-funie="mic"] .px-iarba { width: 60px; }
/* când trece pe lângă nodul unei secțiuni, eticheta ei se aprinde */
.px-atins .section-title::before { animation: px-aprins .9s steps(3) 1; }
@keyframes px-aprins { 0%, 100% { color: var(--accent); text-shadow: none; } 40% { color: #fde68a; text-shadow: 0 0 10px #fbbf24; } }
@media (prefers-reduced-motion: reduce) {
  .px-funie, .px-iarba { display: none; }
  .px-atins .section-title::before { animation: none; }
}

/* ===== D. Balonul de vorbire ===== */
.px-balon {
  position: fixed; z-index: 20; max-width: 260px; padding: 10px 12px; pointer-events: none;
  font: 600 .85rem/1.45 Inter, system-ui, sans-serif; color: #1a1410; background: #f4efe4;
  box-shadow: 0 0 0 3px var(--px-edge), 5px 5px 0 3px var(--px-edge);
  opacity: 0; transform: translateY(6px); transition: opacity .2s steps(2), transform .2s steps(2);
}
.px-balon.vizibil { opacity: 1; transform: none; }

/* ===== C. Filtrul de tehnologii ===== */
.tech-list li[role="button"] { cursor: pointer; transition: background .15s steps(2); }
.tech-list li[aria-pressed="true"] { background: var(--accent); color: #0b1120; box-shadow: inset 0 0 0 2px var(--px-edge); }
.project-card.px-stins, .mini-card.px-stins { opacity: .28; filter: grayscale(.7); transition: opacity .3s steps(3), filter .3s steps(3); }
.project-card.px-ales, .mini-card.px-ales { animation: px-salt-card .5s steps(3) 2 alternate; }
@keyframes px-salt-card { to { transform: translateY(-6px); } }

/* mesajul pixelat de jos (filtru, realizări) */
.px-mesaj {
  position: fixed; left: 50%; bottom: 18px; z-index: 30; transform: translate(-50%, 140%);
  max-width: calc(100vw - 32px); padding: 10px 14px; font: 700 .85rem/1.5 Inter, system-ui, sans-serif;   /* textul are diacritice: nu în fontul pixelat */
  color: #1a1410; background: var(--accent); box-shadow: 0 0 0 3px var(--px-edge), 5px 5px 0 3px var(--px-edge);
  transition: transform .25s steps(3);
}
.px-mesaj.vizibil { transform: translate(-50%, 0); }
.px-mesaj a { color: #1a1410; margin-left: 8px; }

/* ===== E. Bara de niveluri, lipită sub meniu ===== */
.px-niveluri {
  position: fixed; left: 0; right: 0; top: 64px; z-index: 90; height: 10px; display: flex; gap: 3px; padding: 0 3px;
  background: var(--px-edge);
}
.px-umplere { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); opacity: .35; pointer-events: none; }
.px-nivel { position: relative; flex: 1; height: 10px; padding: 0; border: 0; cursor: pointer; background: var(--px-tile-b); }
.px-nivel.activ { background: var(--accent); }
.px-nivel:hover, .px-nivel:focus-visible { background: #fde68a; }
.px-sunet {
  position: relative; width: 26px; height: 18px; margin-top: -4px; padding: 0; border: 0; cursor: pointer;
  font-size: 12px; line-height: 18px; color: var(--accent); background: var(--px-edge); box-shadow: 0 0 0 2px var(--px-ring);
}

/* ===== G. Portalul spre Down to Bedrock (codul „bedrock”) ===== */
.px-portal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 22px; background: rgba(5, 2, 12, .78); }
.px-portal[hidden] { display: none; }
.px-portal-cadru { width: 150px; height: 220px; padding: 16px; background: #1d1326; box-shadow: 0 0 0 4px #0b0612, 0 0 60px 10px rgba(155, 92, 255, .55); }
.px-portal-vartej {
  width: 100%; height: 100%;
  background: repeating-conic-gradient(from 0deg, #3b0f6b 0 10deg, #7c3fd1 10deg 20deg, #a571ff 20deg 26deg, #5a1d9a 26deg 36deg);
  animation: px-vartej 2.4s steps(12) infinite;
}
@keyframes px-vartej { to { filter: hue-rotate(-60deg) brightness(1.3); transform: scale(1.04); } }
.px-portal a { font: 700 1.05rem Inter, system-ui, sans-serif; color: #e9d5ff; }
.px-portal-x { position: absolute; top: 18px; right: 18px; font-size: 20px; color: #fff; background: none; border: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .px-mesaj, .px-stins { transition: none; }
  .px-ales, .px-portal-vartej { animation: none; }
}